VSCode是一个跨平台的轻量级编辑器。凭借其出色的编辑体验、良好的扩展性和可配置性，成为前端开发使用最多的工具。VSCode拥有巨大的插件市场。当我们开始使用VSCode完成前端开发时，众多的插件选项可能会让我们难以选择。结合前端社区和插件市场的推荐，以及自己使用后的感受，分享一波收益明显的插件，供大家参考。BracketPairColorizer圆括号()、方括号[]和大括号{}是大多数语言中常用的运算符。在javascript中，函数定义、条件判断、数组、解构……括号的使用无处不在。我们在编写或阅读代码时，很难一眼就看出两个匹配的括号。这可能会导致两个负面影响：1.阅读效率降低。阅读代码时，需要仔细确认代码是否在两个括号之间；2.当你缺少lint功能来完成一段很长的代码片段时，缺少括号会导致代码执行错误。需要一些时间来整理。BracketPairColorizer插件提供了括号高亮和匹配辅助功能，我们可以一眼看出匹配的两个括号。AutoCompleteTag在编写HTML或JSX代码的过程中，如果我们有这样的需求：输入
时，会自动补全为；将
修改为以匹配的标签名称已相应更改。虽然未关闭的标签可以在H5中展示，但还是鼓励关闭标签。AutoCompleteTag为我们实现了这样的需求。类似的插件还有：AutoCloseTagAutoRenameTagCloseHTML/XMLtagESLint为了开发更规范的前端代码，避免一些代码在代码中容易出问题，社区沉淀了一个lint解决方案，ESlint是目前最常用的。通常ESLint通过命令行执行命令，并根据文件夹中的.eslintrc和.eslintignore文件对代码进行校验。这个过程与编码过程是分开的。ESLint插件识别项目下的配置，编码过程中直接提示，可配置保存文件时自动修复错误。类似的插件有：jslintsasslint对Sass语法执行lintPrettierESLint定义代码级规范，Prettier定义不同编辑器的代码格式化规范。确保同一项目的开发人员的代码格式一致，避免不同编辑器造成的代码差异，尤其是在合并代码的时候，更能深刻体会到代码格式一致的重要性。更多关于Prettier的信息可以在Prettier的官方网站上找到。Prettier插件通过项目下的.prettier文件格式化代码。我们需要将此文件提交到git存储库。类似的插件还有：EditorConfigforVSCodeRESTClient在前后端应用联调或者Node接口测试的过程中，我们都会有测试接口的需求。常用的工具有Postman和curl。Postman提供的功能非常齐全，但是开发的时候需要额外安装一个软件，开发过程中多次切换软件是不安全的。curl是系统自带的命令行工具，功能也很强大，但个人感觉在控制台输入curl命令不是很友好。RESTClient为我们提供了在编辑器窗口中快速请求接口的能力，我们可以将请求的API列表保存在项目中以备后用。GitLensGitlens对VSCode的git功能做了很多扩展，非常强大。可以快速跟踪代码变更，从项目、文件、代码行等维度快速定位。我个人建议在写代码的时候关掉换行提示。当Quokka.js学习javascript/Typescript的一些语法或特性时，我们可能想要一个可以快速执行的环境。以前我们一般都是使用浏览器自带的snippet功能。在浏览器中编码时，代码提示效果自然会变弱，一些新特性将不被支持。Quokka.js为编辑器提供了快速创建js/tsplayground的功能。我们可以在编辑器中快速编写可执行代码片段并验证一些功能。Quokka.js提供社区版和专业版（收费，不便宜）。社区版无法将保存的文件添加回运行环境，每次都需要新建一个文件执行。个人觉得平时做一些特性验证就可以了。类似的插件有：CodeRunnerSnippetSnippet是VSCode提供的无插件代码片段快速插入功能。比如安装reactsnippet后，输入imrc可以快速生成importReact,{Component}from'react.各种框架和语言都有snippet实现。因为我总是忘记codeslice的缩写，所以codeslice我用的不多。推荐几款不错的代码片段插件：ES7React/Redux/GraphQL/React-NativesnippetsJavaScript(ES6)代码片段Vetur主题开发过程，一套喜欢的主题也会在一定程度上影响编程效率和灵感。当然，不同的人有不同的视觉偏好，所以我会在***上分享我的主题配置。我选择的两款主题配置插件：MaterialIconTheme不同文件类型对应的图标展示；OneDarkPro皮肤看起来更亮更光滑。我们期待在VSCode的帮助下更高效、更高质量地完成工作。文中如有错误，欢迎大家指正。