直接上手！不容错过的 Visual Studio Code 十大扩展组件

盘点最常用的十大Visual Studio Code 扩展组件。作者 | David Neal译者 | 谭开朗，责编 | 屠敏出品 | CSDN（ID：CSDNnews）各大平台与各种语言的开发人员都在使用Visual Studio Code，我对此感到惊讶。Stack Overflow发布的2019年开发者调查结果显示，VS Code占主导地位。我使用VS Code的主...

CSDN资讯

10033人浏览 · 2019-05-14 12:00:00

CSDN资讯 · 2019-05-14 12:00:00 发布

640?wx_fmt=gif

盘点最常用的十大 Visual Studio Code 扩展组件。

640?wx_fmt=jpeg

作者 | David Neal

译者 | 谭开朗，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

各大平台与各种语言的开发人员都在使用Visual Studio Code，我对此感到惊讶。Stack Overflow发布的2019年开发者调查结果显示，VS Code占主导地位。我使用VS Code的主要原因是它能很好的支持JavaScript和Node.js的代码调试，并且能免费使用Visual Studio Marketplace中提供的定制化扩展组件。

然而，这里面有成千上万个扩展组件！我们怎么知道哪些是好用的呢？

一种方法是通过查看扩展组件的平均评级和下载数量来衡量其受欢迎程度。另一种方法是阅读像本文这种包含个人观点的文章。一起来看看吧！

下面是我为Node.js开发人员推荐的Visual Studio Code扩展组件。

Bracket Pair Colorizer2

我写代码是尽可能的简洁明了，并且不嵌套太多的东西。然而事与愿违，有些时候这是不可避免的。Bracket Pair Colorizer2为结对的括号提供了颜色高亮功能，便于我们直观的看出对应的左括号和右括号。

640?wx_fmt=gif

npm

npm扩展组件有两个功能：运行编辑器中webpack.json定义的npm脚本，并验证package.json中列出的文件包。

640?wx_fmt=gif

npm Intellisense

使用require()导入模块代码时，npm Intellisense组件会自发进行包提示。

640?wx_fmt=gif

ESLint

在初始化一个新的Node.js项目文件时，我要做的第一件事就是在终端安装ESLint。

npm init -ynpm install --save-dev eslint
npm install --save-dev eslint

ESLint组件会使用本地ESLint和配置规则来查找JavaScript代码中的常见模式问题，以便减少bug而编写出更好的代码。ESLint还可以重新格式化代码使其一致性更好，这取决于我们启用的规则。请确保VS Code设置了自动保存修复功能（”eslint.autoFixOnSave”: true）。

要初始化ESLint配置文件，我们可以在项目中运行此命令：

npx eslint --init

当前的.eslintr .js内容如下：

module.exports = { env: {   commonjs: true,   es6: true,   node: true }, extends: "eslint:recommended", globals: {}, parserOptions: {   ecmaVersion: 2018 }, rules: {   indent: [ "error", "tab" ],   "linebreak-style": [ "error", "unix" ],   quotes: [ "error", "double" ],   semi: [ "error", "always" ],   "array-bracket-spacing": [ "error", "always" ],   "object-curly-spacing": [ "error", "always" ],   "space-in-parens": [ "error", "always" ] }};exports = {
 env: {
   commonjs: true,
   es6: true,
   node: true
 },
 extends: "eslint:recommended",
 globals: {},
 parserOptions: {
   ecmaVersion: 2018
 },
 rules: {
   indent: [ "error", "tab" ],
   "linebreak-style": [ "error", "unix" ],
   quotes: [ "error", "double" ],
   semi: [ "error", "always" ],
   "array-bracket-spacing": [ "error", "always" ],
   "object-curly-spacing": [ "error", "always" ],
   "space-in-parens": [ "error", "always" ]
 }
};