Skip to content

public-snippets

公共代码片段，支持 JavaScript、Vue 3、UniApp、ng-view 组件库。

安装

直接在 VSCode 插件市场搜索安装即可。

JavaScript

基础语法

Prefix	Snippets	说明
`cl`	`console.log()`	打印日志
`cle`	`console.log(🚀)`	带表情的日志
`cw`	`console.warn()`	警告日志
`ce`	`console.error()`	错误日志
`ct`	`console.table()`	表格日志
`cv`	`const v = ""`	const 声明
`lv`	`let v = ""`	let 声明
`fun`	`function(){}`	函数声明
`afun`	`()=> {}`	箭头函数
`if`	`if(){}`	if 语句
`ife`	`if()else{}`	if-else 语句
`for`	`for` 循环	for 循环
`forof`	`for-of` 循环	for-of 循环
`forin`	`for-in` 循环	for-in 循环
`switch`	`switch` 语句	switch 语句
`try`	`try-catch`	异常捕获

异步编程

Prefix	Snippets	说明
`promise`	`new Promise()`	Promise
`promisef`	`Promise().then().catch()`	Promise 链式调用
`async`	`async function()`	异步函数
`aafun`	`const = async ()=>`	异步箭头函数
`aw`	`await`	await 表达式
`setI`	`setInterval`	定时器
`setT`	`setTimeout`	延时器

模块化

Prefix	Snippets	说明
`imp`	`import from`	默认导入
`imd`	`import { } from`	命名导入
`ima`	`import * as from`	导入全部
`exd`	`export default`	默认导出
`exn`	`export const`	命名导出

数组/对象方法

Prefix	Snippets	说明
`.map`	`.map()`	map 方法
`.filter`	`.filter()`	filter 方法
`.reduce`	`.reduce()`	reduce 方法
`.find`	`.find()`	find 方法
`.forEach`	`.forEach()`	forEach 方法
`.sort`	`.sort()`	sort 方法
`ok`	`Object.keys()`	获取对象键
`ov`	`Object.values()`	获取对象值
`oe`	`Object.entries()`	获取对象键值对
`js`	`JSON.stringify()`	JSON 序列化
`jp`	`JSON.parse()`	JSON 反序列化

Vue 3 / UniApp

响应式 API

Prefix	Snippets	说明
`vref`	`const = ref()`	ref 响应式数据
`vreactive`	`const = reactive()`	reactive 响应式对象
`vcomputed`	`computed()`	计算属性
`vwatch`	`watch()`	监听器
`vwd`	`watch(deep)`	深度监听
`vwi`	`watch(immediate)`	立即监听

生命周期

Prefix	Snippets	说明
`onm`	`onMounted()`	挂载完成
`onum`	`onUnmounted()`	卸载完成
`onbm`	`onBeforeMount()`	挂载前
`onbum`	`onBeforeUnmount()`	卸载前
`onu`	`onUpdated()`	更新完成
`onbu`	`onBeforeUpdate()`	更新前

UniApp 生命周期

Prefix	Snippets	说明
`onload`	`onLoad()`	页面加载
`onshow`	`onShow()`	页面显示
`onready`	`onReady()`	页面准备完成
`onhide`	`onHide()`	页面隐藏
`onunload`	`onUnload()`	页面卸载
`pulldown`	`onPullDownRefresh()`	下拉刷新
`reachbottom`	`onReachBottom()`	触底加载

组件 API

Prefix	Snippets	说明
`vprops`	`defineProps()`	定义 props
`vemits`	`defineEmits()`	定义 emits
`vmodel`	`defineModel()`	定义 model
`vexpose`	`defineExpose()`	暴露数据
`toref`	`toRef()`	转换为 ref
`torefs`	`toRefs()`	转换为 refs
`next`	`await nextTick()`	下次 DOM 更新

路由

Prefix	Snippets	说明
`vrouter`	`useRouter()`	路由实例
`vroute`	`useRoute()`	当前路由

UniApp API

Prefix	Snippets	说明
`navto`	`uni.navigateTo()`	跳转页面
`navback`	`uni.navigateBack()`	返回上一页
`toast`	`uni.showToast()`	提示框
`modal`	`uni.showModal()`	模态框
`loading`	`uni.showLoading()`	加载框
`getstorage`	`uni.getStorageSync()`	获取存储
`setstorage`	`uni.setStorageSync()`	设置存储
`request`	`uni.request()`	网络请求

Pinia

Prefix	Snippets	说明
`piniastore`	Pinia store 模板	创建 store
`usepiniastore`	使用 store	导入并使用 store
`storetorefs`	`storeToRefs()`	解构 store

ng-view 组件库

基于 ng-view UI 组件库的代码片段

基础组件

Prefix	组件名	说明
`nview`	ng-view	基础视图组件
`nflex`	ng-flex	弹性布局容器
`ngrid`	ng-grid	网格布局容器
`ntext`	ng-text	文本组件
`nimage`	ng-image	图片组件(动态)
`nib`	ng-image	图片组件(静态资源)
`nif`	ng-image	图片组件(服务器)
`nbtn`	ng-button	按钮组件
`nicon`	ng-icon	图标组件
`nprice`	ng-price	价格组件
`ndivider`	ng-divider	分割线组件

布局组件

Prefix	组件名	说明
`ngap`	ng-gap	间距组件
`nsticky`	ng-sticky	吸顶组件

弹窗组件

Prefix	组件名	说明
`nmodal`	ng-modal	模态框组件
`npopup`	ng-popup	弹窗组件
`noverlay`	ng-overlay	遮罩层组件

导航组件

Prefix	组件名	说明
`nnavbar`	ng-navbar	导航栏组件
`nstatusbar`	ng-status-bar	状态栏组件
`ntabs`	ng-tabs	标签栏组件

表单组件

Prefix	组件名	说明
`nradio`	ng-radio	单选框组件
`npicker`	ng-picker	选择器组件
`npickera`	ng-picker-area	地区选择器
`nupload`	ng-upload	上传组件

其他组件

Prefix	组件名	说明
`nfooter`	ng-footer	底部组件
`ntransition`	ng-transition	过渡动画组件

弹窗组件

Prefix	组件名	说明
`nmodal`	ng-modal	模态框组件
`npopup`	ng-popup	弹窗组件
`noverlay`	ng-overlay	遮罩层组件

布局属性

Prefix	属性	说明
`jcc`	`jc="center"`	justify-content: center
`jcs`	`jc="start"`	justify-content: start
`jce`	`jc="end"`	justify-content: end
`jcb`	`jc="between"`	justify-content: space-between
`jca`	`jc="around"`	justify-content: space-around
`aic`	`ai="center"`	align-items: center
`ais`	`ai="start"`	align-items: start
`aie`	`ai="end"`	align-items: end
`aist`	`ai="stretch"`	align-items: stretch
`drow`	`direction="row"`	flex-direction: row
`dcol`	`direction="col"`	flex-direction: column
`wrap`	`wrap="wrap"`	flex-wrap: wrap
`nowrap`	`wrap="nowrap"`	flex-wrap: nowrap
`gap`	`gap="20"`	间距
`rg`	`rg="20"`	行间距
`cg`	`cg="20"`	列间距
`center`	`center`	垂直水平居中
`xc`	`xCenter`	水平居中
`yc`	`yCenter`	垂直居中

通用属性

Prefix	属性	说明
`wh`	`wh="100 100"`	宽高设置
`width`	`width="100"`	宽度
`height`	`height="100"`	高度
`round`	`round="8"`	圆角
`margin`	`margin="10"`	外边距
`padding`	`padding="10"`	内边距
`mt`	`mt="10"`	上外边距
`mb`	`mb="10"`	下外边距
`ml`	`ml="10"`	左外边距
`mr`	`mr="10"`	右外边距
`bg`	`bg="#fff"`	背景色
`color`	`color="#333"`	文字颜色
`flex`	`flex`	flex: 1
`grow`	`grow="1"`	flex-grow
`shrink`	`shrink="0"`	flex-shrink
`zindex`	`z-index="999"`	层级 z-index
`opacity`	`opacity="0.5"`	透明度
`hidden`	`hidden`	隐藏溢出

Vue 指令

Prefix	Snippets	说明
`if`	`v-if`	条件渲染
`ef`	`v-else-if`	else-if 条件
`else`	`v-else`	else 条件
`fori`	`v-for` (item)	列表渲染
`model`	`v-model`	双向绑定

快捷输入

输入组件前缀（如 nflex、ntext）后按 Tab 键即可生成对应代码
输入属性前缀（如 jcc、aic）后按 Tab 键即可生成对应属性
使用 $1、$2 等 tabstop 可以快速跳转并编辑占位符