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

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扩展组件。

 

640?wx_fmt=png

Bracket Pair Colorizer2

 

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

640?wx_fmt=gif

 

640?wx_fmt=png

npm

 

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

640?wx_fmt=gif

640?wx_fmt=gif

 

640?wx_fmt=png

npm Intellisense

 

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

640?wx_fmt=gif

 

640?wx_fmt=png

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

640?wx_fmt=gif

 

640?wx_fmt=png

Code Spell Checker

 

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

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

640?wx_fmt=gif

 

640?wx_fmt=png

Auto Close Tag(自动关闭标签)

 

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

640?wx_fmt=gif

 

640?wx_fmt=png

DotENV

 

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

640?wx_fmt=png

 

640?wx_fmt=png

Path Intellisense

 

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

640?wx_fmt=gif

 

640?wx_fmt=png

MarkDownLint

 

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

640?wx_fmt=gif

 

640?wx_fmt=png

Material Icon Theme

 

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

640?wx_fmt=png

 

640?wx_fmt=png

其他权威的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】

640?wx_fmt=jpeg

作为码一代,想教码二代却无从下手:

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

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

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

下面给大家介绍CSDN新成员:极客宝宝(ID:geek_baby)

戳他了解更多↓↓↓

640?wx_fmt=jpeg

 热 文 推 荐 

阿里云的物联网之路

极客头条

技术头条

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

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

技术头条

技术头条

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

☞补偿100万?Oracle裁900+程序员,新方案已出!

640?wx_fmt=gif点击阅读原文,输入关键词,即可搜索您想要的 CSDN 文章。

640?wx_fmt=png你点的每个“在看”,我都认真当成了喜欢640?wx_fmt=png

展开阅读全文

Visual Studio Code工具

02-25

<p style="font-size:16px;">rn XML是所有软件开发人员都应该熟悉的技术,如果你还不熟悉就选择这门课程。rn</p>rn<p style="font-size:16px;">rn <strong><br />rn</strong> rn</p>rn<p style="font-size:16px;">rn <strong>第1章 XML概述</strong> rn</p>rn<p style="font-size:16px;">rn 什么是XML、XML和HTML之间的区别rn</p>rn<p style="font-size:16px;">rn <strong>第2章 XML编辑工具</strong> rn</p>rn<p style="font-size:16px;">rn 跨平台文本编辑工具、Windows平台文本编辑工具、Visual Studio Code工具和Altova XMLSpy工具rn</p>rn<p style="font-size:16px;">rn <strong>第3章 XML文档结构</strong> rn</p>rn<p style="font-size:16px;">rn 声明、元素、属性、实体、CDATA节、注释和名字空间rn</p>rn<p style="font-size:16px;">rn <strong>第4章 文档类型定义</strong> rn</p>rn<p style="font-size:16px;">rn 有效的文档、编写DTD、DTD元素定义、DTD属性定义rn</p>rn<p style="font-size:16px;">rn <strong>第5章 XML Schema</strong> rn</p>rn<p style="font-size:16px;">rn 什么是Schema?、Schema与DTD比较、Schema文档结构、Schema数据类型、元素数量、Schema属性定义rn</p>rn<p style="font-size:16px;">rn <strong>第6章 XPath技术</strong> rn</p>rn<p style="font-size:16px;">rn 什么是XPath?、XPath节点和XPath语法rn</p>rn<p style="font-size:16px;">rn <strong>第7章 解析XML文档</strong> rn</p>rn<p style="font-size:16px;">rn 解析XML文档概述、DOM解析XML、SAX解析XMLrn</p>rn<p style="font-size:16px;">rn <strong>第8章 Java语言解析XML</strong> rn</p>rn<p style="font-size:16px;">rn DOM4J概述、示例:遍历节点、示例:插入节点、示例:删除节点rn</p>rn<p style="font-size:16px;">rn <strong>第9章 Python语言解析XML</strong> rn</p>rn<p style="font-size:16px;">rn ElementTree模块概述、示例:遍历节点、示例:插入节点、示例:删除节点rn</p>rn<p style="font-size:16px;">rn <strong>第10章 C#语言解析XML</strong> rn</p>rn<p style="font-size:16px;">rn .NET Framework解析XML概述、Visual Studio Code开发C#环境搭建、示例:遍历节点、示例:插入节点、示例:删除节点rn</p>rn<div>rn <br />rn</div>

没有更多推荐了,返回首页