# public snippets

**Repository Path**: SunshineC/public-snippets

## Basic Information

- **Project Name**: public snippets
- **Description**: VSCode 插件 - VSCode 代码片段
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-22
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 可以快速跳转并编辑占位符