VSCode 是一款跨平臺(tái)的輕量級(jí)編輯器，憑借著優(yōu)秀的編輯體驗(yàn)，良好的可擴(kuò)展性、可配置性，已經(jīng)成為了前端開發(fā)使用最多的工具。

VSCode 擁有龐大的插件市場(chǎng)，開始使用 VSCode 完成前端開發(fā)時(shí)，眾多的插件選擇可能會(huì)讓我們難以抉擇。結(jié)合前端社區(qū)和插件市場(chǎng)推薦的以及自己使用后的感受，將開發(fā)有明顯效益的插件分享一波，供大家參考。

Bracket Pair Colorizer

圓括號(hào) () 、中括號(hào) [] 和花括號(hào) {} 是大多數(shù)語言常用的操作符，javascript 中，函數(shù)定義、條件判斷、數(shù)組、解構(gòu)...括號(hào)的使用更是無處不在，當(dāng)我們?cè)诰帉懟蛘唛喿x代碼時(shí)，很難一眼看出兩個(gè)匹配的括號(hào)。這樣可能會(huì)導(dǎo)致兩個(gè)負(fù)面影響：1、閱讀效率降低，閱讀代碼需要仔細(xì)確認(rèn)代碼是否在兩個(gè)括號(hào)之間；2、缺乏 lint 功能完成較長代碼片段時(shí)，漏寫括號(hào)會(huì)導(dǎo)致代碼執(zhí)行錯(cuò)誤，需要花一定時(shí)間去梳理。

Bracket Pair Colorizer 插件提供了括號(hào)的高亮和匹配輔助功能，我們可以一眼看出匹配的兩個(gè)括號(hào)。

Auto Complete Tag

在編寫 HTML 或者 JSX 代碼過程中，如果我們有這樣的需求：在輸入 <div> 時(shí)自動(dòng)補(bǔ)全為 <div></div> ；將 <div> 修改為 <section> ，與之匹配的標(biāo)簽名稱也隨之更改,最終成為 <section></section> 。雖然 H5 中對(duì)未閉合的標(biāo)簽是可以顯示的，但還是鼓勵(lì)標(biāo)簽都能閉合。 Auto Complete Tag 為我們實(shí)現(xiàn)了這樣的訴求。

類似的插件還有：

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

ESLint

為了更規(guī)范的開發(fā)前端代碼，規(guī)避代碼中一些容易造成問題的代碼，社區(qū)沉淀了 lint 的方案，目前最常用的是 ESlint。通常 ESLint 是在通過命令行執(zhí)行命令，根據(jù)文件夾下的 .eslintrc 和 .eslintignore 文件進(jìn)行代碼的校驗(yàn)，這樣的流程是與編碼過程脫離的。 ESLint 插件識(shí)別項(xiàng)目下的配置，直接在編碼過程做出提示，并且可以配置保存文件是自動(dòng)修復(fù)錯(cuò)誤。

類似的插件有：

• jslint
• sass lint 對(duì) Sass 語法執(zhí)行 lint

Prettier

ESLint 定義了代碼層面上的規(guī)范，Prettier 則定義了不同編輯器的代碼格式化規(guī)范。確保同一個(gè)項(xiàng)目的開發(fā)者代碼格式化后是一致的，這樣可以避免不同編輯器格式化導(dǎo)致的代碼差異，特別是在代碼合并時(shí)能深深認(rèn)識(shí)到代碼格式化一致的重要性。更多 Prettier 介紹可以在 Prettier 官網(wǎng) 了解， Prettier 插件 通過項(xiàng)目下的 .prettier 文件格式化代碼，我們需要將這個(gè)文件提交至 git 倉庫。

類似的插件有：

• EditorConfig for VS Code

REST Client

前后端應(yīng)用聯(lián)調(diào)或 Node 接口測(cè)試過程中，我們會(huì)有測(cè)試接口的需求。通常使用的工具有 Postman 和 curl。Postman 提供的功能很完備，但需要在開發(fā)時(shí)額外安裝一個(gè)軟件，并且開發(fā)過程多幾次軟件的切換也不***了。curl 是系統(tǒng)自帶的命令行工具，功能也很強(qiáng)大，但個(gè)人感覺控制臺(tái)中輸入 curl 命令不太友好。 REST Client 為我們提供了編輯器視窗中快速請(qǐng)求接口的能力，而且我們可以將請(qǐng)求的 API 列表保存在項(xiàng)目中，方便后面的使用。

GitLens

Gitlens 對(duì) VSCode 的 git 功能做了很多擴(kuò)充，功能十分強(qiáng)大。能快速跟蹤到代碼的變更，從項(xiàng)目、文件、代碼行的維度都能快速定位。個(gè)人建議代碼編寫過程中關(guān)閉行變更提示。

Quokka.js

學(xué)習(xí) javascript/Typescript 的一些語法或特性時(shí)，我們可能想要一個(gè)能快速執(zhí)行的環(huán)境，以前通常會(huì)用到瀏覽器自帶的 snippet 功能，瀏覽器中編碼，代碼提示效果自然會(huì)弱一點(diǎn)，而且對(duì)一些新的特性也會(huì)不支持。

Quokka.js 為編輯器提供了快速創(chuàng)建 js/ts playground 功能，我們可以快速在編輯器中編寫可執(zhí)行的代碼片段，驗(yàn)證一些特性。Quokka.js 提供了社區(qū)版和 Pro 版本（收費(fèi)，還不便宜），社區(qū)版不能將已保存的文件重新加入運(yùn)行環(huán)境，每次需要新建一個(gè)文件來執(zhí)行。個(gè)人感覺平時(shí)做一些特性驗(yàn)證已經(jīng)夠用了。

類似的插件有：

• Code Runner

Snippet

Snippet 是 VSCode 未插件提供的代碼片快速插入功能。如安裝 react snippet 后，輸入 imrc就能快速生成 import React, {Component} from 'react 。各類框架、語言都有 snippet 實(shí)現(xiàn)。因?yàn)榭偸沁z忘代碼片的縮寫，個(gè)人對(duì)代碼片用的不多。

推薦幾個(gè)不錯(cuò)的代碼片插件：

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

主題

開發(fā)過程，一套自己喜歡的主題也會(huì)在一定程度上影響編程效率和靈感。當(dāng)然，不同人對(duì)于視覺的喜好是不同的，所以在***分享一下我的主題配置。我的選擇的兩個(gè)主題配置插件： Material Icon Theme 不同文件類型對(duì)應(yīng)的圖標(biāo)展示； One Dark Pro 一款看著比較鮮亮與柔順的皮膚。

期待我們?cè)?VSCode 的助力下，更高效更高質(zhì)的完成工作。文中如有紕漏，也歡迎大家指正。