前端开发值得拥有的 VSCode 插件

时间 2019-11-08

标签前端开发值得拥有 vscode 插件繁體版

原文原文链接

VSCode 是一款跨平台的轻量级编辑器，凭借着优秀的编辑体验，良好的可扩展性、可配置性，已经成为了前端开发使用最多的工具。javascript

VSCode 拥有庞大的插件市场，开始使用 VSCode 进行前端开发的过程当中，众多的插件选择可能会让咱们难以抉择。结合社区和插件市场推荐以及本身使用的状况，将开发过程当中感受有明显收益的插件分享一波，供你们参考。前端

Bracket Pair Colorizer

圆括号()、中括号[]和花括号{}是大多数编程语言经常使用的操做符，javascript 中，函数定义、条件语句、数组、解构...括号的使用更是无处不在。在咱们在编写或者阅读代码的时候，很难一眼看出两个匹配的括号。这样可能会致使两个负面影响：一、代码阅读效率下降，阅读时须要确认代码是否在同一括号间以肯定执行逻辑；二、在缺少 lint 功能完成较长代码片断，可能会漏写括号会致使代码执行错误，须要花废一点时间去从新梳理。java

Bracket Pair Colorizer 插件提供了括号的高亮和匹配标记功能，帮助咱们快速定位匹配的括号。react

Auto Complete Tag

编写 HTML 或者 JSX 代码过程当中，若是咱们有这样的需求：输入<div> 时自动补全为<div></div>；将<div>修改成<section>，与之匹配的标签名称也随之更改,最终成为<section></section>。虽然 H5 中对未闭合的标签在有些时候能够显示，但仍是鼓励全部标签都能主动闭合。Auto Complete Tag能帮咱们在编码过程快速实现这两个诉求。git

相似的插件还有：编程

ESLint

为了更规范的开发前端代码，规避代码中一些容易形成问题的代码，社区沉淀了 lint 的方案，目前最经常使用的是 ESlint。一般 ESLint 是在经过命令行执行命令，根据文件夹下的 .eslintrc 和 .eslintignore 文件进行代码的校验，而后再回到编辑器修改校验出错的代码。这样代码检测与编码过程脱离的，从必定程度会影响效率。ESLint 插件识别项目下的配置，直接在编码过程作出提示，而且能够配置保存文件时自动修复错误。后端

相似的插件有：数组

jslint
sass lint 对 Sass 语法执行 lint

Prettier

ESLint 定义了代码层面上的规范，Prettier 则定义了不一样编辑器的代码格式化规范,确保同一项目通过不一样开发者格式化后是一致的。编辑器对代码格式化的差别，会为代码合带来没必要要的麻烦。Prettier 的详细介绍能够在 Prettier 官网了解，Prettier 插件经过项目下的 .prettier 配置格式化代码，咱们将这个文件提交至项目仓库，支持 prettier 的编辑器打开项目后都会以一样的方式格式化代码。浏览器

相似的插件有：sass

EditorConfig for VS Code

REST Client

先后端应用联调或 Node 接口测试过程当中，咱们会有请求接口验证返回结果的需求。一般使用的工具备 Postman 和 CURL。Postman 提供的功能很完备，但须要在开发时额外安装一个软件，而且开发过程多几回软件的切换也不完美了。CURL 是系统自带的命令行工具，功能也很强大，但我的感受控制台中输入 curl 命令不太友好。REST Client 为咱们提供了在编辑器视窗中快速请求接口的能力，并且咱们能够将请求的 API 列表保存在项目文件中，方便后面的使用。

GitLens

Gitlens 对 VSCode 的 git 功能作了不少扩充，功能十分强大。最吸引人的是其快速跟踪代码变动的能力，从项目、文件、代码行的维度都能快速定位。代码行的 hover 提示容易形成编码的干扰，我的建议代码编写过程当中关闭行变动提示。

Quokka.js

验证 javascript/Typescript 的一些语法或特性时，咱们可能想要一个能快速执行的环境，之前一般会用到浏览器自带的 snippet 功能，在浏览器中编码，代码提示效果天然会弱一点，并且对一些新的特性也不能彻底支持。
Quokka.js为编辑器提供了快速建立 js/ts playground 功能，咱们能够快速在编辑器中编写可执行的代码片断，验证一些特性。Quokka.js 提供了社区版和 Pro 版本（收费，还不便宜），社区版不能将已保存的文件从新加入运行环境，每次须要新建一个文件来执行。我的感受平时作一些特性验证已经够用了。

相似的插件有：

Code Runner

Snippet

Snippet 为咱们提供了提供的代码片快速插入功能。如安装 react snippet 后，输入imrc 就能快速生成 import React, {Component} from 'react。在插件市场，大多数框架和语言都能找到 snippet 实现。由于老是记不全代码片的缩写，我的对代码片用的很少。

推荐几个不错的代码片插件：

主题

开发过程，有一款能让本身愉快编码的主题也会在必定程度上提高编程效率和灵感。固然，不一样人对于视觉的偏好是不一样的，因此在只在最后分享一下个人主题配置。我如今使用的两个主题插件：Material Icon Theme 文件类型添加对应的图标展现；One Dark Pro 一款看着更柔顺的主题。

期待咱们在 VSCode 的助力下，更高效更高质的完成工做。

文中若有纰漏，也欢迎你们指正：）