如今, 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 纯前端表格组件 https://www.grapecity.com.cn/developer/spreadjs : 可嵌入你系统的在线 Excel, 功能布局与 Excel 高度类似, 完全兼容 Excel 的 450 种公式和 92 种图表.
总结
VS Code 拥有大量的高质量插件, 这让它在 JavaScript 开发者群体中广受欢迎. 写 JavaScript 代码, 再没有比现在更容易了.
像 ESLint 这样的插件, 帮助你避免代码中的常见错误; Debugger for Chrome, 帮助你更容易地调试代码; 带有智能提示的 Node.js 插件帮助你正确引用模块; 像 Live Server 和 REST client 这样的可用工具, 让你在完成工作时减少了对外部工具的依赖; 再比如 SpreadJS 纯前端表格控件, 让在线 Excel https://www.grapecity.com.cn/developer/spreadjs 嵌入您的应用. 所有这些工具, 都极大地加快了你的迭代流程.
我希望这些列表让你接触到新的 VS Code 插件, 对你的工作流程有帮助.
来源: https://www.cnblogs.com/powertoolsteam/p/vs-code-extensions-javascript-developers.html