# 一、食用说明
- 相似功能的插件，不推荐全都装上，请挑选一个使用
- 本列表所有插件均已测试使用过，但不代表不存在问题
- 任何插件本身的问题，请到对于代码仓库提交 issue
# 二、拓展
| 名称 | 简述 |
|---|
| Auto Close Tag | 自动闭合 HTML 标签 |
| Auto Import | import 提示 |
| Auto Rename Tag | 修改 HTML 标签时，自动修改匹配的标签 |
| Babel JavaScript | babel 插件，语法高亮 |
| Babelrc | .babelrc 文件高亮提示 |
| Beautify css/sass/scss/less | css/sass/less 格式化 |
| Better Align | 对齐赋值符号和注释 |
| Better Comments | 编写更加人性化的注释 |
| Bookmarks | 添加行书签 |
| Bracket Lens | 在闭合的括号处提示括号头部的代码 |
| Bracket Pair Colorizer 2 | 用不同颜色高亮显示匹配的括号 |
| Can I Use | HTML5、CSS3、SVG 的浏览器兼容性检查 |
Code Outline | 展示代码结构树 |
| Code Runner | 运行选中代码段（支持多数语言） |
| Code Spell checker | 单词拼写检查 |
| CodeBing | 快速打开 Bing 并搜索，可配置搜索引擎 |
| Color Highlight | 颜色值在代码中高亮显示 |
| Color Info | 小窗口显示颜色值，rgb,hsl,cmyk,hex 等等 |
| Color Picker | 拾色器 |
| CSS-in-JS | CSS-in-JS 高亮提示和转换 |
| Dash | 集成 Dash |
| Debugger for Chrome | 调试 Chrome |
| Document This | 注释文档生成 |
| DotENV | .env 文件高亮 |
| Edit csv | 编辑 CSV 文件 |
| EditorConfig for VS Code | EditorConfig 插件 |
| Emoji | 在代码中输入 emoji |
| endy | 将输入光标跳转到当前行最后面 |
| Error Gutters | 在行号处提示错误代码 |
| ESLint | ESLint 插件，高亮提示 |
| File Peek | 根据路径字符串，快速定位到文件 |
| filesize | 状态栏显示当前文件大小 |
| Find-Jump | 快速跳转到指定单词位置 |
| Font-awesome codes for html | FontAwesome 提示代码段 |
| ftp-sync | 同步文件到 ftp |
| Git Blame | 在状态栏显示当前行的 Git 信息 |
| Git File History | 快速浏览单文件历史提交变动 |
| Git Graph | Git 图形化视图，方便浏览和操作 |
| Git History(git log) | 查看 git log |
| Git Tree Compare | Git 树形比对，查看不同分支的差异 |
| gitignore | .gitignore 文件语法 |
| GitLens | 显示文件最近的 commit 和作者，显示当前行 commit 信息 |
| GraphQL for VSCode | graphql 高亮和提示 |
| Guides | 高亮缩进基准线 |
| Gulp Snippets | Gulp 代码段 |
| Highlight Matching Tag | 高亮匹配选中的标签 |
| HTML CSS Class Completion | CSS class 提示 |
| HTML CSS Support | css 提示（支持 vue） |
| HTMLHint | HTML 格式提示 |
| htmltagwrap | 快捷包裹 html 标签 |
| htmltagwrap | 包裹 HTML |
| Import Beautify | import 分组、排序、格式化 |
| Import Cost | 行内显示导入（import/require）的包的大小 |
| Indenticator | 缩进高亮 |
| IntelliSense for css class names | css class 输入提示 |
| JavaScript (ES6) code snippets | ES6 语法代码段 |
| JavaScript Standard Style | Standard 风格 |
| Jest Runner | 支持执行 Jest 单个测试文件或单个用例 |
| JS Refactor | 代码重构工具，提取函数、变量重命名等等 |
| JSON to TS | JSON 结构转化为 typescript 的 interface |
| JSON Tools | 格式化和压缩 JSON |
| jumpy | 快速跳转到指定单词位置 |
| language-stylus | Stylus 语法高亮和提示 |
| Less IntelliSense | less 变量与混合提示 |
| Lodash | Lodash 代码段 |
| Log Wrapper | 生产打印选中变量的代码 |
| markdownlint | Markdown 格式提示 |
| MochaSnippets | Mocha 代码段 |
| Node modules resolve | 快速导航到 Node 模块 |
| npm | 运行 npm 命令 |
| npm Intellisense | 导入模块时，提示已安装模块名称 |
| Output Colorizer | 彩色输出信息 |
| Partial Diff | 对比两段代码或文件 |
| Parameter Hints | 在函数调用处指示参数名称 |
| Path Autocomplete | 路径完成提示 |
| Path Intellisense | 另一个路径完成提示 |
| Polacode | 将代码生成图片 |
| PostCss Sorting | css 排序 |
| Prettier - Code formatter | prettier 官方插件 |
| Prettify JSON | 格式化 JSON |
| Project Manager | 快速切换项目 |
| Quokka.js | 不需要手动运行，行内显示变量结果 |
| Rainbow CSV | CSV 文件使用彩虹色渲染不同列 |
| React Native Storybooks | storybook 预览插件，支持 react |
| React Playground | 为编辑器提供一个 react 组件运行环境，方便调试 |
| React Standard Style code snippets | react standar 风格代码块 |
| REST Client | 发送 REST 风格的 HTTP 请求 |
| Sass | sass 插件 |
| Settings Sync | VSCode 设置同步到 Gist |
| Sort lines | 排序选中行 |
| Sort Typescript Imports | typescript 的 import 排序 |
| String Manipulation | 字符串转换处理（驼峰、大写开头、下划线等等） |
| stylelint | css/sass/less 代码风格 |
| SVG Viewer | SVG 查看器 |
| Syncing | vscode 设置同步到 gist |
| Test Spec Generator | 测试用例生成（支持 chai、should、jasmine） |
| TODO Parser | Todo 管理 |
| Todo Todo Tree | 收集代码中的 TODO 注释，支持快速搜索 |
| Toggle Quotes | 切换 JS 中的引号，"-> ' ->` | |
| TS/JS postfix completion | ts/js 后缀提示 |
| TSLint | TypeScript 语法检查 |
| Types auto installer | 自动安装 @types 声明依赖 |
| TypeScript Hero | TypeScript 辅助插件，管理 import、outline 等等 |
| TypeScript Import | TS 自动 import |
| TypeScript Import Sorter | import 整理排序 |
| Typescript React code snippets | React Typescript 代码段 |
| TypeSearch | TS 声明文件搜索 |
| Version Lens | package.json 文件显示模块当前版本和最新版本 |
| vetur | Vue 插件 |
| Volar | Vue 插件，支持 Vue3 |
| View Node Package | 快速打开选中模块的主页和代码仓库 |
| Visual Studio IntelliCode | 基于 AI 的代码提示 |
| VS Live Share | 实时多人协助 |
| VSCode Great Icons | 文件图标拓展 |
| vscode-database | 操作数据库，支持 mysql 和 postgres |
| vscode-icons | 文件图标，方便定位文件 |
| vscode-random | 随机字符串生成器 |
| vscode-spotify | 集成 spotify，播放音乐 |
| vscode-styled-components | styled-components 高亮支持 |
| vscode-styled-jsx | styled-jsx 高亮支持 |
| Vue Peek | 支持跳转到 Vue 组件定义文件 |
| Vue TypeScript Snippets | Vue Typescript 代码段 |
| VueHelper | Vue2 代码段（包括 Vue2 api、vue-router2、vuex2） |
| Wallaby.js | 实时测试插件 |
| Wrap Console Log Lite | 对选中代码快速 console.log |
# 三、个人首选项配置（仅供参考）
{
"breadcrumbs.enabled": true,
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"explorer.confirmDragAndDrop": false,
"extensions.autoUpdate": false,
"files.insertFinalNewline": true,
"git.autofetch": true,
"git.path": "F:\\Program Files\\Git\\cmd\\git.exe",
"search.exclude": {
"**/node_modules": true,
"**/dist": true
},
"typescript.locale": "en",
"window.titleBarStyle": "custom",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"window.zoomLevel": 1,
"workbench.activityBar.visible": true,
"workbench.colorTheme": "Plastic - deprioritised punctuation",
"workbench.iconTheme": "vscode-great-icons",
"workbench.startupEditor": "newUntitledFile",
"eslint.autoFixOnSave": true,
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"vsicons.projectDetection.autoReload": true,
"vsicons.dontShowNewVersionMessage": true,
"tslint.autoFixOnSave": true,
"debugwrapper.wrappers": {
"default": "console.log('$eSEL', $SEL)"
},
"prettier.tslintIntegration": true,
"cSpell.userWords": [
"Unmount"
],
"jest.autoEnable": false,
}
