当前位置:主页 > 网站优化 >

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-16 00:06 阅读量:

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成功关键是源于能提供更好的性能和稳定的表现。另外,它还提供了如代码智能提示等开发者非常需要的功能。而这些功能,曾经只在像Eclipse或者Visual Studio 2017这样的完整集成开发环境(IDEs)中才有。

VS Code的强大无疑来自于它的插件市场。多亏了开源社区,VS Code现在几乎对所有的编程语言、框架和开发技术都有支持。提供这种支持的方式是多样的,主要包括了为特定技术提供代码片段、语法高亮、Emmet以及智能提示功能。

VS Code插件的种类

在本文,我主要介绍专门针对JavaScript开发者的VS Code插件。有很多满足此条件的VS Code插件,当然我不会都作介绍。相反,我会着重介绍那些已经相当流行而且对JavaScript开发者来说必不可少的VS Code插件。为简单起见,我把它们分为10类。

在这之中可能有你已经知道并且正在使用的插件,但也很有可能有一些是你听说过但未曾使用过的,我也希望通过本文能为你简要的介绍一下这些插件。

1. 代码片段插件

当你第一次安装VS Code时,它会附带一些JavaScript和TypeScript的代码片段。在你开始上手现代JavaScript之前,你将需要一些额外的代码片段来帮助你快速地编写ES6/ES7代码:

VS Code JavaScript(ES6) snippets:当前最流行的,已有超过120万的下载量。这个插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持。

JavaScript Snippet Pack:提供了有用的JavaScript代码片段集合。(这个链接打不开了)

Atom JavaScript Snippet:移植自Atom的JavaScript插件。

JavaScript Snippets:提供了ES6代码片段的集合。它包含对Mocha、Jasmine等其他BBD(Behavior-Driven Development)测试框架的支持。

2. 语法高亮插件

VS Code自带很好的JavaScript代码语法高亮。你可以通过安装主题改变这些颜色。然而,如果你想要更高水平的可读性,就得安装语法高亮的插件了。这里有一些:

JavaScript Atom Grammar:它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的。

Babel JavaScript:支持ES201X、React、FlowType以及GraphQL的语法高亮。

DotENV:支持.env文件语法高亮,在你使用Node时会非常有用。

3. 代码检测插件

以最小的烦恼高效编写JavaScript代码,需要一个代码检测(linter)工具。它强制团队所有成员遵循特定的代码规范。ESLint是最受欢迎的,它支持许多代码风格,包括Standard、Google和Airbnb的JavaScript代码规范。这里是最流行的VS Code代码检查插件:

ESLint:这个插件把ESLint集成到VS Code中。它是最流行的代码检测插件,已有超过670万下载量。它的规则在.eslintrc.json里配置。

JSHint:基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。

JavaScript Standard Style:零配置和严格规则的代码检测,强制使用StandardJS规则。

如果你想查看对各种代码检测优缺点的综述,可以来看看我们对代码检测工具的比较。

4. Node插件

每一个JavaScript项目都需要至少一个Node package,除非你是那种喜欢以艰难的方式做事的人。这里有一些VS Code插件,能帮你更容易的处理Node模块。

npm:用package.json来校验安装的npm包,确保安装包的版本正确,对缺少package.json文件的包或者未安装的包给出高亮提示。

Node.js Modules IntelliSense:提供JavaScript和TypeScript导入声明时的自动补全。源码:vscode-node-module-intellisense。

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

Path IntelliSense:它其实与Node没有关系,但是你肯定需要对本地文件的智能提示,这个插件会自动补全文件名。

Node exec:允许你用Node执行当前文件或者选中的代码。

View Node Package:利用此插件可快速查看Node包源码,让你直接在VS Code中打开Node包的代码库或文档。

Search node_modules:通常node_modules文件夹不在默认的搜索范围内,这个插件允许你搜索它。源码:vscode-search-node-modules。

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

Import Cost:显示导入的包的大小。源码:import-cost。

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

5. 代码格式化插件
本文链接地址:http://www.seohuizhou.com/webyouhua/1412.html
上一篇:<<CSS中background的属性和背景图片定位的实例
下一篇:WordPress模板制作流程>>