作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
如今,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。
- Path IntelliSense:它其实与Node没有关系,但是你肯定需要对本地文件的智能提示,这个插件会自动补全文件名。
- Node exec:允许你用Node执行当前文件或者选中的代码。
- View Node Package:利用此插件可快速查看Node包源码,让你直接在VS Code中打开Node包的代码库或文档。
- Search node_modules:通常
node_modules
文件夹不在默认的搜索范围内,这个插件允许你搜索它。源码:vscode-search-node-modules。
- Import Cost:显示导入的包的大小。源码:import-cost。
5. 代码格式化插件
有时,你发现自己会对以前写过的风格不太理想的代码做格式整理。为了节约时间,你可以安装以下任何的VS Code插件,来快速地格式化和重构现有代码:
- Beatufy:一个jsBeautifier的插件,支持JavaScript、JSON、CSS和HTML。可通过
.jsbeautifyrc
文件自定义。它是最流行的格式化工具,目前有230万的下载量。 - Prettier Code Formatter:利用Prettier的支持JavaScript、TypeScript和CSS的插件,目前有超过150万的下载量。
- JS Refactor:提供许多重构JavaScript代码的实用方法和操作,例如抽取变量和方法,把现有代码转为使用箭头函数和模板字符串的等价形式,导出函数等。
- JavaScript Booster:一款了不起的代码重构工具。拥有需要代码操作,比如把
var
转为const
或者let
,去除多余的else
语句,合并声明和初始化。其灵感大量源于WebStorm的启发。源码:vscode-javascript-booster。
6. 浏览器插件
除非你是在用JavaScript写控制台程序,否则你多半会在浏览器中执行你的JavaScript代码。这意味着,你会频繁地刷新浏览器以观察每次你更新代码的效果。这里有一些工具,能极大地减少你开发时的这种重复流程,而不是每次都手动刷新浏览器:
- Debugger for Chrome:在编辑器中打断点,让你轻松地在Chrome里调试JavaScript。源码:vscode-chrome-debug。
- Live Server:开启本地开发时服务器,为静态和动态页面提供实时刷新功能。源码:vscode-chrome-debugvscode-live-server。
- Preview on Web Server:提供web服务器和实时预览功能。
- PHP Server:对测试只能在客户端运行的JavaScript代码很有用。
- Rest Client:相较于用浏览器或者一个CURL程序来测试你的REST API端点,你可以安装这个工具,直接在编辑器里相互性地发HTTP请求。
7. 框架类插件
对于大多数项目,你会使用合适的框架去构建你的代码,以减少开发时间。VS Code通过插件对大多数主流框架都做了支持。然而,仍有一些特定框架没有得到完全的支持。下面是一些提供了强大功能的VS Code插件。
- Angular 6:提供Angular 6的代码片段,支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。目前有220多万的下载量和172个Angular代码片段。
- Angular v5 snippets:提供针对TypeScript、RxJS、HTML和Docker文件的代码片段。目前有270多万的下载量。
- React Native/React/Redux snippets for es6/es7:提供对这些框架的ES6/ES7语法的代码片段。
- React Native Tools:为React Native框架提供代码智能提示、命令行工具和调试特性。
- Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好的发布在GitBook上的文档。
- Ember:为Ember提供了命令行支持和智能提示。安装完后,所有
ember cli
的命令可直接在VS Code自己的命令行列表中使用。 - Cordava Tools:支持Cordava插件和Ionic框架,提供基于Cordova的项目的智能提示、调试已经其他特性的支持。
- jQuery Code Snippets:提供了超过130个jQuery的代码片段,使用
jq
前缀来激活。
8. 测试类插件
测试是软件开发中的关键环节,对于生产阶段的项目来说更是如此。你可以通过阅读我们的指南-JavaScript测试:单元测试 vs 功能测试 vs 集成测试-来获得对JavaScript测试的一个概观。这里有一些针对测试的VS Code插件:
- Mocha sidebar:利用Mocha库为项目提供单元测试。这个框架帮你直接在代码里跑测试,把错误信息以装饰器形式显示出来。
- ES Mocha Snippets:提供ES6语法的Mocha代码片段。这个插件的重点在于利用箭头函数,尽可能减少花括号的使用,保持代码的紧凑。可通过设置允许使用分号。
- Jasmine Code Snippets:针对Jasmine测试框架的代码片段。
- Protractor Snippets:针对Protractor端到端测试框架的代码片段。支持JavaScript和TypeScript。
- Node TDD:为Node和JavaScript项目提供测试驱动开发的支持。能在源码的更新后,立即触发自动化测试的构建。源码:node-tdd
9. 其他棒棒的插件
我把下一批VS Code的插件归为"厉害的"(awesome)这一类,因为这个描述恰到好处。
- Quokka.js:非常厉害的调试工具,为JavaScript提供了快速构建原型的演练场,并且附带有很好的文档。
- Paste as JSON:快速地将JSON数据转为JavaScript代码。源码:quick-type。
- Code Metrics:这是另一个非常棒的插件,计算JavaScript和TypeScript代码中复杂度。源码:codemetrics。
10. 插件包
现在我们来到了最后一类,我想让你知道,VS Code市场有有一个插件包的分类。本质上,它们是相关联的一些VS Code插件的集合,打成一个包,方便安装。这里有些较好的:
- Nodejs Extension Pack:这个包里有ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense和Path IntelliSense。
- VS Code for Node.js - Development Pack:这个包含NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker和Import Cost。
- Vue.js Extension Pack:一些Vue和JavaScript插件的集合。目前它含有12个VS Code的插件,有一些之前我们没有提到的,比如auto-rename-tag和auto-close-tag。
- Ionic Extesion Pack:这个包里有针对Ionic、Angular、RxJS、Cordova和HTML开发的插件。
- SpreadJS纯前端表格组件:可嵌入你系统的在线Excel,功能布局与 Excel 高度类似,完全兼容 Excel 的 450 种公式和 92 种图表。
总结
VS Code拥有大量的高质量插件,这让它在JavaScript开发者群体中广受欢迎。写JavaScript代码,再没有比现在更容易了。
像ESLint这样的插件,帮助你避免代码中的常见错误;Debugger for Chrome,帮助你更容易地调试代码;带有智能提示的Node.js插件帮助你正确引用模块;像Live Server和REST client这样的可用工具,让你在完成工作时减少了对外部工具的依赖;再比如SpreadJS纯前端表格控件,让在线Excel嵌入您的应用。所有这些工具,都极大地加快了你的迭代流程。
我希望这些列表让你接触到新的VS Code插件,对你的工作流程有帮助。
作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?的更多相关文章
- 2013年JavaScript开发人员调查结果
JavaScript开发人员调查现在已经结束,一如既往社区对结果进行了进一步分析: 总结(汉语) 原始数据(电子表格) 2012年结果 51%的被参与者写客户端代码,而28%的人说他们编写服务器端代码 ...
- JavaScript开发人员必知的10个关键习惯
还在一味没有目的的编写JavaScript代码吗?那么你就OUT了!让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧! 随着新技术的不断发展,JavaScript已 ...
- 每个JavaScript开发人员应该知道的33个概念
每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...
- JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...
- 作为开发人员,这四类Code Review方法你都知道吗?
本文翻译自:https://dzone.com/articles/4-types-of-code-reviews-any-professional-developer 转载请注明出处:葡萄城官网,葡萄 ...
- 10种JavaScript开发者必备的VS Code插件
摘要: 好的代码插件可以让工作效率翻倍,心情也更加舒畅! 原文:10 Must-have VS Code Extensions for JavaScript Developers 作者:Michael ...
- 开发人员的必备工具Git(初级)
Git是什么 Git是目前世界上最先进的分布式版本控制系统. 这个软件用起来就应该像这个样子,能记录每次文件的改动: 举个栗子 : 版本 用户 说明 日期 1 张三 删除了软件服务条款5 ...
- 初中级Web开发人员的福音:《JavaScript启示录》上市了
经历过14个月的等待,本书终于上市了,完全口语化叙述,请参考右边的链接. 本书介绍 本书无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现.本书的写作目的也不是鉴别Jav ...
- MongoDB成为最受开发人员期待的数据库系统
本文翻译之MongoDB官方博客,原文地址:https://www.mongodb.com/blog/post/stack-overflow-research-developers-mongodb-m ...
随机推荐
- [Swift]LeetCode504. 七进制数 | Base 7
Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...
- Java第二次上机随笔
主要是一些原来不懂但是本次上机涉及到的内容... 一.空数组与数组为null的区别 1.空数组: int[] array = new int[0]; array.length == 0; 空数组是一个 ...
- Java面向对象--类的对象之间的几种关系详解
转载: https://www.cnblogs.com/supren/p/7853377.html
- Service Fabric部署笔记
使用 x509 证书时报错 Thumbprint contains invalid characters 原因是在 windows 证书管理器复制指纹的时候,在指纹字符串开头有不显示的字符,粘贴到 j ...
- Android--加载大分辨率图片到内存
前言 在使用ImageView显示图片的时候,直接加载一个图片资源到内存中,经常会出现内存溢出的错误,这是因为有些图片的分辨率比较高,把它直接加载到内存中之后,会导致堆内存溢出的问题.这篇博客就来讲解 ...
- 【c#】RabbitMQ学习文档(四)Routing(路由)
(使用Net客户端) 在上一个教程中,我们构建了一个简单的日志系统,我们能够向许多消息接受者广播发送日志消息. 在本教程中,我们将为其添加一项功能 ,这个功能是我们将只订阅消息的一个子集成为可能. 例 ...
- centos7正确关机重启
linux主要用于服务器领域,而在服务器上执行一项服务是永无止境的,除非遇到特殊情况,否则不会关机.和Windows不同,在linux系统下,很多进程是在后台执行的.在屏幕背后,可能有很多人同时在工作 ...
- [解决方案]SystemError: Parent module '' not loaded, cannot perform relative import的解决方案
缺陷:__mian__不能使用相对导入 PEP 328 Relative Imports and __name__ 中说明: Relative imports use a module's __nam ...
- Thread之九:stop
搞过Java线程的人都知道,stop这个方法是臭名昭著了,早就被弃用了,但是现在任然有很多钟情与他的人,永远都放不下他,因为从他的字面意思上我们可以知道他貌似可以停止一个线程,这个需求是每个搞线程开发 ...
- JS的forEach和map方法的区别
一.前言 forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each() ...