通用
chinese(simplified)
编辑器中文简体插件
open in browser
浏览器中打开。右键点击HTML文件，在弹出的菜单中选择在默认浏览器或其他浏览器中打开即可。
Bookmarks
Bookmarks 可以帮助您在代码中导航，轻松快速地在重要位置之间移动。不再需要搜索代码。
用法：在想要记录的代码行中右键点击，在弹出的菜单中会新增一行书签，如下图所示。点击开关会将该行记录下来，也可通过快捷键 Ctrl+Alt+K 快速添加。
添加完成后在左侧新增菜单中可以查看对应文件中保存的书签位置：
vscode-icons
文件图标美化
path-interllisense
路径提示
VS Code Counter
统计项目代码行数。用法：右键点击项目根目录，选择 Count lines in directory 即可。
结果会保存在当前文件夹下的 .VSCodeCounter 目录中。results.md 会根据语言和文件夹分别进行统计，如下图所示：
Code Spell Checker
能够帮助我们检查单词拼写是否出现错误，检查的规则遵循 camelCase (驼峰拼写法)。
Vue相关
Vetur
功能：
- Syntax-highlighting
-
Snippet
-
EmmetLinting/Error Checking
- Formatting
- Auto Completion
- Debugging
- VTI/CLI
Vue 2 Snippets
Vue2 中代码片段
Vue 3 Snippets
Vue3 中代码片段
格式化相关
prettier
可在设置-扩展中设置相应格式化规则。
项目中存在 .editorconfig 或 .prettierrc 配置文件，会优先读取项目中的配置文件
ESLint
官方文档：cn.eslint.org/docs/user-g…
-
设置默认的格式化工具
在对应文件中点击右键，选择【使用…格式化文档】
css相关
Easy LESS
- less 转化为 css
cssrem
- px 转化为 rem
css tree
-
快速生成css tree 插件
用法：选中需要生成css tree 的标签 => Ctrl + shift + p => 选择 Generate CSS tree
Color Highlight
- 显示颜色值对应的颜色
小程序相关插件
wechat-snippet
- 微信小程序代码辅助,代码片段自动完成
minapp
-
微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
-
使用
- 需要输入<才会触发标签补全
- 输入空格会触发对应标签的属性补全
wxapp-helper
- 选择创建wx组件，自动生成配套的文件，简直不要太爽
内置浏览器
Browser Preview
- 这款神器可以让我们在vscode里面打开浏览器，一边编码一边查看，偶尔也可以用来摸鱼，非常人性，强烈推荐
live preview
- 目前 Browser Preview 插件建议使用这个
git 相关插件
Git Extension Pack
Git Graph
- 方便的查看或对比指定分支，或所有分支的提交记录
webgl插件
WebGL GLSL Editor
- 语法高亮，提示，格式化等
配置自定义代码块
点击设置图标-配置用户代码片段，如图：
弹出下方列表后往下滚动，找到【新建全局代码片段文件】，点击新建。
新建后输入"elink-标签片段"，按下回车，这里以全局代码片段为例，也可以针对文件夹(项目)来新建代码片段。然后将内容修改为下方一样：
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "",
"prefix": "elink",
"body": [
"<e-link href="https://element.eleme.io" target="_blank">$1</e-link>",
"$2"
],
"description": "创建e-link标签"
}
}
然后在vue文件中输入 elink 即可：
