共计 7024 个字符，预计需要花费 18 分钟才能阅读完成。
vscode 是一款开源且优秀的编辑器，接下来让我吐血推荐一下我工作使用过的令人惊叹的 Visual Studio Code 插件。
代码编辑插件
vscode-color-highlight—— 颜色代码高亮插件。（sublime text 也有）
vscode-Open in Browser—— 右键在浏览器打开。（sublime text 也有）
vscode-Path Intellisense—— 文件路径提示。（sublime text 也有）
vscode-copy-relative-path—— 复制文件相对路径。（辅助书写路径的工具）
vscode-Change Case—– 变量名命名风格切换。（解决了命名风格不统一的工具）
vscode-removeEmptyLines—– 能够迅速删除多行空白。（自动删除所有代码空行）
vscode-Trailing Spaces—– 检测并一键去除代码中多余的空格。
vscode-ECMAScript Quotes Transformer（终于找到这个插件了，一直苦于手动去转义 js 中的 html）
vscode-Bracket Pair Colorizer—– 自动标识相匹配括号的颜色。（增强了 vscode 的括号提示）
vscode-Prettier formatter——vscode 代码格式增强工具。（标准格式化工具）
PS：格式化工具请认准 Prettier formatter。vscode-change-case—— 各种命名之间格式转化工具。（不再担心命名格式不统一的问题）
PS：使用方法，比如：let ABC_a = 0。（字符之间需要加一个任意符号才可以实现命名格式转化。）
选中变量，执行 `Change Case Commands`
web 前端插件
vscode-Debugger for Chrome —- 在 vscode 与 Chrome 联调。
vscode-Browser Preview —- 在 vscode 进行浏览器预览。（类似与 eclipse IDE 里面浏览页面）
PS：vscode-Debugger for Chrome 与 vscode-Browser Preview 插件仍然处于实验阶段，不够稳定，建议直接使用 Chrome 调试较好。vscode-ESLint——js 代码检查工具。（标准化 ESLint 的插件，规范 js 代码）
PS：1. `npm install eslint -g`。2. 配置 vscode 设置文件。{
"eslint.autoFixOnSave": true,
"eslint.options": {
"root": true,
"env": {
"browser": true,
"node": true
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module"
},
"rules": {"indent": ["error", 2],
"jsx-quotes": ["error", "prefer-single"],
"quotes": ["error", "single"],
"semi": ["error", "never"]
}
},
"eslint.validate": [
{
"language": "javascript",
"autoFix": true
},
{
"language": "html",
"autoFix": true
}
]
}vscode-stylelint——css 代码检查工具。（标准化 stylelint 的插件，规范 style 代码）
补充：ESLint + Prettier formatter
1. `npm install eslint prettier-eslint --save-dev`
2. 配置 vcode 设置文件。（ESLint 配置要与 prettier 配置相同）{
"prettier.eslintIntegration": true,
"prettier.semi": false,
"prettier.stylelintIntegration": true,
"prettier.singleQuote": true
}
stylelint+Prettier formatter
1. `npm install stylelint prettier-stylelint --save-dev`
2. 配置 vcode 设置文件。（stylelint 配置要与 prettier 配置相同）{"prettier.stylelintIntegration": true,}
3. 创建一个.stylelintrc 文件。{
"styleint.config": {
"rules": {"color-no-hex": true}
}
}
4. 使用 shell 命令测试一下 stylelint 是否能够正常使用 fix 功能。`stylelint "*/*.css" --fix
5. 如果 stylelint 正常工作，prettier-stylelint 就可以使用 fix 功能。vscode-Placeholder Images—— 插入占位图。（多个占位图站点都有）
vscode-Auto Rename Tag—— 修改 html 标签的时候会自动匹配修改。
vscode-tag-wrapper—– 选中区域添加包裹标签。
PS：与 Auto Rename Tag 插件一起使用简直就是 perfect。vscode-Sass——sass/scss 文件语法提示。（sublime text 也有）
vscode-Easy Sass——scss 编译成 css，min.css。（不错的一个 sass 编译工具）
vscode-Sorting HTML and Jade attributes——html 属性排序（代码洁癖症者使用）
vscode-Turbo Console Log—- 快速生成控制台输出语句，支持批量添加，删除，注释打印语句。（以前我还一直手写 console.log 语句，又删又写又注释，这个插件简直就是调试输出的福音）
vscode-csscomb——css 属性排序。（代码洁癖症者使用）
PS：1. npm install csscomb -g
npm install csscomb --save-dev`
这两步是必须的。2. 配置 vcode 设置文件。{"csscomb.preset": "csscomb"}
排序模式有 "csscomb", "yandex", "zen" 三种。或者
{
"csscomb.preset": {
"remove-empty-rulesets": true,
"always-semicolon": true
}
}
增加一些优化配置项目。3. 选中 css/less/scss 文件, 执行 `CSSComb:Format styles` 命令。vscode-CSS Peek——class 类定义跳转。（终于拥有 dw cc 的这个 css 定义跳转功能）
vscode-eCSStractor—– 抽取页面的 class，生成一个 css 文档。
vscode-IntelliSense for CSS class names—– 在工作区自动扫描 css 文件类名，自动提示 class 类名。（相当于一些 css 框架的 class 提示）
vscode-Image Sprites—– 生成精灵图片。
vscode-Quokka——js 实时编译。（相当于边写边输出控制台信息）
vscode-Document This—–jsdoc 注释生成。
vscode-jQuery Code Snippets——jQuery 的语法高亮，语法提示。
vscode-npm——npm 与 package.json 的语法高亮，语法提示。
vscode-npm Intellisense——npm 包路径提示。
vscode-Auto Import—— 自动导入模块。
vscode-Vue.js Extension Pack——Vuejs 集成扩展包，依赖其他插件。
vscode-React Extension Pack——Reactjs 集成扩展包，依赖其他插件。
vscode-Pug (Jade) snippets——pug 模版语法提示。
数据库插件
vscode-MySQL——mysql 数据库管理工具。
vscode-Azure Cosmos DB——MongoDB、Graph (Gremlin)、Cosmos DB 数据库管理工具。
PS：使用 MongoDB 一些不常见 Shell 命令，需要配置 vscode 设置文件。{"mongo.shell.path": "E:\\bin\\mongo.exe",}代码质量插件
vscode-Jest——jest 语法提示，测试用例感应测试。
vscode-CodeMetrics—— 检测代码圈复杂度。
PS：圈复杂度是一种代码复杂度的衡量标准。此插件支持 ts/js/lua 语法，检测代码中的代码圈复杂度，可以自定义配置提示选项。{
"codemetrics.basics.ComplexityLevelExtremeDescription": "代码需要优化",
"codemetrics.nodeconfiguration.AnyKeyword": 150,
"codemetrics.nodeconfiguration.AnyKeywordDescription": "尽量控制在 150 个字符内",
"codemetrics.basics.ComplexityLevelHighDescription": "代码质量不错",
"codemetrics.basics.ComplexityLevelLow": 1,
"codemetrics.basics.ComplexityLevelLowDescription": "代码已优化",
"codemetrics.basics.DiagnosticsEnabled": true,
"codemetrics.basics.ComplexityLevelNormalDescription": "代码达标",
"codemetrics.nodeconfiguration.CallExpressionDescription": "Cakoexpression",
"codemetrics.nodeconfiguration.BreakStatementDescription": "Break atement",
"codemetrics.nodeconfiguration.CaseClauseDescription": "Case 语句",
"codemetrics.nodeconfiguration.JsxSelfClosingElementDescription": "Jsx 元素闭合",
"codemetrics.nodeconfiguration.JsxElementDescription": "这是 Jsx 元素",
"codemetrics.nodeconfiguration.LabeledStatementDescription": "标记语句",
"codemetrics.nodeconfiguration.MethodDeclarationDescription": "方法声明",
"codemetrics.nodeconfiguration.MethodSignatureDescription": "Method Signature",
"codemetrics.nodeconfiguration.NamedImports": 1,
"codemetrics.nodeconfiguration.ModuleDeclaration": 1,
"codemetrics.nodeconfiguration.ModuleDeclarationDescription": "模块声明",
"codemetrics.nodeconfiguration.NamedImportsDescription": "命名导入",
"codemetrics.nodeconfiguration.NamespaceImport": 1,
"codemetrics.nodeconfiguration.NamespaceImportDescription": "命名空间导入",
"codemetrics.nodeconfiguration.SwitchStatementDescription": "Switch 语句",
"codemetrics.nodeconfiguration.ThrowStatementDescription": "Throw 语句",
"codemetrics.nodeconfiguration.TryStatementDescription": "Try catch 语句",
"codemetrics.nodeconfiguration.VariableStatementDescription": "变量声明",
"codemetrics.nodeconfiguration.VariableStatement": 1,
"codemetrics.nodeconfiguration.ClassDeclarationDescription": "类声明",
"codemetrics.nodeconfiguration.ClassDeclaration": 1,
"codemetrics.nodeconfiguration.ReturnStatementDescription": "返回语句",
"codemetrics.nodeconfiguration.IfStatementDescription": "if 语句",
"codemetrics.nodeconfiguration.ArrowFunctionDescription": "箭头函数",
"codemetrics.nodeconfiguration.ConditionalExpressionDescription": "三目运算语句",
"codemetrics.nodeconfiguration.CatchClauseDescription": "Catch Case 语句",
"codemetrics.nodeconfiguration.ConstructorDescription": "构造函数",
"codemetrics.basics.ComplexityLevelNormal": 3,
"codemetrics.basics.ComplexityTemplate": "圈复杂度为 {0}，{1}",
"codemetrics.basics.ComplexityColorExtreme": "#ff0000",
"codemetrics.basics.ComplexityColorHigh": "#e6a23c",
"codemetrics.basics.ComplexityColorNormal": "#4bb14f",
}
远程访问插件
vscode-SSH FS—— 通过 SSH 协议登录服务器，可以操作服务器文件。
PS：配置 vscode 设置文件。（如果需要使用 Terminal 的话，请使用第三方 SSH 客户端 SmarTTY 或 mobaXterm。{
"sshfs.configs": [
{
"name": "test",
"label": "test",
"root": "/root",
"host": "192.168.0.1",
"port": 22,
"username": "root",
"agent": "pageant",
"password": "********"
}
]
} 其他插件
vscode-Comment Translate—–vscode 的 Google 翻译（简单又方便的文件内容翻译插件）
vscode-ASCIIDecorator——ASCII 字符生成。（代码注释逼格工具）
vscode-Banner Comments + —— 另一款 ASCII 字符生成。（代码注释逼格工具）
vscode-fileheader—— 快速生成文件头注释，保存文件自动添加修改时间。（容易跟踪文件修改记录）
vscode-REST Client—– 轻量级 http 请求测试。（Api 接口测试，类似于 postman）
vscode-fake—— 生成各种假数据类型。
vscode-SVG Viewer——svg 预览。
vscode-Image preview—— 图片预览。（支持 html、css 中图片资源预览）
vscode-RegExp Preview and Editor—— 正则表达式编写与预览。（灵活校验正则表达式）
vscode-Live Server—–http 服务器（相当于使用 nodejs 的 http-server）
PS：不建议在 ` 多个项目 ` 的工作空间打开 html。建议在 ` 单项目 ` 的工作空间或文件夹打开 html。vscode-Git Lens—– 增强 vscode 的内置 Git 功能。（可视化 Git 管理，清晰了解 Git 存储库信息，极其方便）
