前端开发值得拥有的 VSCode 插件

VSCode 是一款跨平台的轻量级编辑器，依附着优越的编辑体验，精采的可扩展性、可设置性，已经成为了前端开拓行使最多的器材。

VSCode 拥有复杂的插件市场，开始行使 VSCode 完成前端开拓时，浩瀚的插件选择也许会让我们难以决议。团结前端社区和插件市场保举的以及本身行使后的感觉，将开拓有明明效益的插件分享一波，供各人参考。

圆括号 () 、中括号 [] 和花括号 {} 是大大都说话常用的操纵符，javascript 中，函数界说、前提判定、数组、解构...括号的行使更是无处不在，当我们在编写可能阅读代码时，很难一眼看出两个匹配的括号。这样也许会导致两个负面影响：1、阅读服从低落，阅读代码必要细心确认代码是否在两个括号之间；2、缺乏 lint 成果完成较长代码片断时，漏写括号会导致代码执行错误，必要花一按时刻去梳理。

Bracket Pair Colorizer 插件提供了括号的高亮和匹配帮助成果，我们可以一眼看出匹配的两个括号。

在编写 HTML 可能 JSX 代码进程中，假如我们有这样的需求：在输入 <div> 时自动补全为 <div></div> ；将 <div> 修改为 <section> ，与之匹配的标署名称也随之变动,最终成为 <section></section> 。固然 H5 中对未闭合的标签是可以表现的，但照旧勉励标签都能闭合。 Auto Complete Tag 为我们实现了这样的诉求。

相同的插件尚有：

• Auto Close Tag
• Auto Rename Tag
• Close HTML/XML tag

为了更类型的开拓前端代码，规避代码中一些轻易造成题目的代码，社区沉淀了 lint 的方案，今朝最常用的是 ESlint。凡是 ESLint 是在通过呼吁行执行呼吁，按照文件夹下的 .eslintrc 和 .eslintignore 文件举办代码的校验，这样的流程是与编码进程离开的。 ESLint 插件辨认项目下的设置，直接在编码进程做出提醒，而且可以设置生涯文件是自动修复错误。

相同的插件有：

• jslint
• sass lint 对 Sass 语法执行 lint

ESLint 界说了代码层面上的类型，Prettier 则界说了差异编辑器的代码名目化类型。确保统一个项目标开拓者代码名目化后是同等的，这样可以停止差异编辑器名目化导致的代码差别，出格是在代码归并时能深深熟悉到代码名目化同等的重要性。更多 Prettier 先容可以在 Prettier 官网 相识， Prettier 插件 通过项目下的 .prettier 文件名目化代码，我们必要将这个文件提交至 git 客栈。

相同的插件有：

• EditorConfig for VS Code

前后端应用联调或 Node 接口测试进程中，我们会有测试接口的需求。凡是行使的器材有 Postman 和 curl。Postman 提供的成果很完整，但必要在开拓时特殊安装一个软件，而且开拓进程多屡次软件的切换也不美满了。curl 是体系自带的呼吁行器材，成果也很强盛，但小我私人感受节制台中输入 curl 呼吁不太友爱。 REST Client 为我们提供了编辑器视窗中快速哀求接口的手段，并且我们可以将哀求的 API 列表生涯在项目中，利便后头的行使。

Gitlens 对 VSCode 的 git 成果做了许多扩充，成果异常强盛。能快速跟踪到代码的改观，从项目、文件、代码行的维度都能快速定位。小我私人提议代码编写进程中封锁行改观提醒。

进修 javascript/Typescript 的一些语法或特征时，我们也许想要一个能快速执行的情形，，早年凡是会用到赏识器自带的 snippet 成果，赏识器中编码，代码提醒结果天然会弱一点，并且对一些新的特征也会不支持。

Quokka.js 为编辑器提供了快速建设 js/ts playground 成果，我们可以快速在编辑器中编写可执行的代码片断，验证一些特征。Quokka.js 提供了社区版和 Pro 版本（收费，还不自制），社区版不能将已生涯的文件从头插手运行情形，每次必要新建一个文件来执行。小我私人感受平常做一些特征验证已经够用了。

相同的插件有：

• Code Runner

Snippet 是 VSCode 未插件提供的代码片快速插入成果。如安装 react snippet 后，输入 imrc就能快速天生 import React, {Component} from 'react 。种种框架、说话都有 snippet 实现。由于老是忘记代码片的缩写，小我私人对代码片用的不多。

保举几个不错的代码片插件：

• ES7 React/Redux/GraphQL/React-Native snippets
• JavaScript (ES6) code snippets
• Vetur

开拓进程，一套本身喜好的主题也会在必然水平上影响编程服从和灵感。虽然，差异人对付视觉的兴趣是差异的，以是在最后分享一下我的主题设置。我的选择的两个主题设置插件： Material Icon Theme 差异文件范例对应的图标展示； One Dark Pro 一款看着较量鲜亮与柔顺的皮肤。

等候我们在 VSCode 的助力下，更高效更高质的完成事变。文中若有马虎，也接待各人指正。

【编辑保举】

1. 李笑来登GitHub趋势榜第一：币圈大佬的鸡汤编程指南
2. 快应用筑将来，TEF·2019快应用开拓者大会在京召开
3. 谷歌开拓团队招募Node.js移植工程师 Fuchsia有望支持JavaScript应用
4. 苹果调解开拓者支持条款，Mac开拓者可选择7天禀阶段推送应用更新
5. 微软越来越靠近开拓一个适用的DNA数据存储体系

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!