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

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

作者 | 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为结对的括号提供了颜色高亮功能，便于我们直观的看出对应的左括号和右括号。

npm

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

npm Intellisense

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

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" ]}
};

Code Spell Checker

我不知道大家的情况怎么样，但当我发现我在代码中拼错了函数名、变量、注释或其他任何东西时，我真的很恼火。如果通篇都是拼写错误的，那是可以正常运行的，但是拼写错误仍然会让人沮丧或尴尬。

Code Spell Checker组件的出现终结了拼写错误时代！该组件很好的一个特性是可以区分camelCase、PascalCase、snake_case等。另一个很棒的特性是它有西班牙语、法语、德语、俄语和其他一些语言的词典。

Auto Close Tag（自动关闭标签）

VS Code最新版本会对HTML或XML文件自动创建结束标签。对于其他文件类型，如JavaScript、Vue和JSX，Auto Close Tag将为我们缩短某些输入。

DotENV

用环境变量来配置Node.js应用程序是很常见的。管理环境变量最流行的一个模块是dotenv。VS Code的DotENV扩展组件在编辑.env文件时添加了便捷的语法高亮显示功能。

Path Intellisense

Path Intellisense组件增加了对文件路径和名称的自动补全功能，以此来降低手工输入从而减少引入与路径相关的bug。

MarkDownLint

优秀的代码和文档是相辅相成的。我更喜欢用markdown格式编写README文件或其他文档。Markdownlint组件可以帮助我们确保markdown语法的正确性。

Material Icon Theme

Material Icon Theme组件为VS Code的不同文件类型添加了多种图标。˙这样能快速区分项目中不同的文件以便很大限度的节省时间！

其他权威的VSCode扩展组件（Node.js适用）

以下扩展组件没有排进前10名，但是对于Node.js开发人员来说，它们在某些场景中很有用！

Encode Decode——通过添加命令来快速切换文本与其他各种格式，比如Base64、HTML和JSON数组。
Rest Client——直接从编辑器发出HTTP请求，并在一个独立窗口中查看响应数据。非常适合测试和原型化API。
Better Comments——在不同类型的注释中添加高亮显示，助于创建更“人性化”的注释。

原文：https://developer.okta.com/blog/2019/05/08/top-vs-code-extensions-for-nodejs-developers

本文为 CSDN 翻译，转载请注明来源出处。

牛了，这几个案例让你迅速掌握AI技术！

https://edu.csdn.net/topic/ai30?utm_source=csdn_bw

【END】

作为码一代，想教码二代却无从下手：

听说少儿编程很火，可它有哪些好处呢？

孩子多大开始学习比较好呢？又该如何学习呢？

最新的编程教育政策又有哪些呢？

下面给大家介绍CSDN新成员：极客宝宝（ID：geek_baby）

戳他了解更多↓↓↓

热文 推荐

阿里云的物联网之路

极客头条

技术头条

☞如何向 6 岁的孩子解释编程？这个解释厉害了

☞“踏实工作 7 年，辞职时老板头都不抬”

☞技术头条

☞赌5毛钱，你解不出这道Google面试题

☞补偿100万？Oracle裁900+程序员，新方案已出！

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。

你点的每个“在看”，我都认真当成了喜欢

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

直接上手！不容错过的Visual Studio Code十大扩展组件
作者 | David Neal 译者 | 谭开朗,责编 | 屠敏转载自CSDN(ID:CSDNnews) 各大平台与各种语言的开发人员都在使用Visual Studio Code,我对此感到惊讶.S ...
不得不爱，Visual Studio Code十大超酷特性
这大半夜的,是不是有很多码农的在熬夜奋战? 如果你最近关注了Microsoft Developer的空间,你可能会想"这是一个新的微软".如果你参加了最近的 BUILD 开发者大会 ...
Visual Studio Code 十大效率（摸鱼）插件
Visual Studio Code 202008 Python 扩展更新
微软发布了 8 月的 Visual Studio Code Python 扩展更新,此版本总共修复了总共 38 个问题. 主要更新内容包括: 支持多个 Python 交互式窗口这是用户呼声最高的功能 ...
Visual Studio 2008 十大新功能
VS2005还没有最终稳定的版本,但是我想在微软的某个办公室,一个项目组正在研究发展Visual Studio 2008这个版本.我看了一下表,现在的时间是公元2006-3-9日,离微软发布V ...
Visual Studio Code 如何编写运行 C、C++ 程序？
本文面向初学者,但是不适合还在学写Hello World级别的初学者.阅读本文能在一定程度上了解程序编译的知识,以及使用VS Code的知识. 本文大部分内容都可从VS Code官方文档:C++ pr ...
Visual Studio Code 如何编写运行 C、C++ 程序
转载自https://www.zhihu.com/question/30315894/answer/154979413 侵删作者:谭九鼎链接:https://www.zhihu.com/quest ...
Visual Studio Code 配置 gcc
作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
【环境配置】Visual Studio Code 如何编写运行 C、C++ 程序？
作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

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

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

最新文章

热门文章