前端開發值得擁有的 VSCode 插件

VSCode 是一款跨平臺的輕量級編輯器，憑藉着優秀的編輯體驗，良好的可擴展性、可配置性，已經成爲了前端開發使用最多的工具。

VSCode 擁有龐大的插件市場，開始使用 VSCode 進行前端開發的過程當中，衆多的插件選擇可能會讓咱們難以抉擇。結合社區和插件市場推薦以及本身使用的狀況，將開發過程當中感受有明顯收益的插件分享一波，供你們參考。

Bracket Pair Colorizer

圓括號()、中括號[]和花括號{}是大多數編程語言經常使用的操做符，javascript 中，函數定義、條件語句、數組、解構...括號的使用更是無處不在。在咱們在編寫或者閱讀代碼的時候，很難一眼看出兩個匹配的括號。這樣可能會致使兩個負面影響：一、代碼閱讀效率下降，閱讀時須要確認代碼是否在同一括號間以肯定執行邏輯；二、在缺少 lint 功能完成較長代碼片斷，可能會漏寫括號會致使代碼執行錯誤，須要花廢一點時間去從新梳理。

Bracket Pair Colorizer 插件提供了括號的高亮和匹配標記功能，幫助咱們快速定位匹配的括號。

Auto Complete Tag

編寫 HTML 或者 JSX 代碼過程當中，若是咱們有這樣的需求：輸入<div> 時自動補全爲<div></div>；將<div>修改成<section>，與之匹配的標籤名稱也隨之更改,最終成爲<section></section>。雖然 H5 中對未閉合的標籤在有些時候能夠顯示，但仍是鼓勵全部標籤都能主動閉合。Auto Complete Tag能幫咱們在編碼過程快速實現這兩個訴求。

相似的插件還有：

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

ESLint

爲了更規範的開發前端代碼，規避代碼中一些容易形成問題的代碼，社區沉澱了 lint 的方案，目前最經常使用的是 ESlint。一般 ESLint 是在經過命令行執行命令，根據文件夾下的 .eslintrc 和 .eslintignore 文件進行代碼的校驗，而後再回到編輯器修改校驗出錯的代碼。這樣代碼檢測與編碼過程脫離的，從必定程度會影響效率。ESLint 插件識別項目下的配置，直接在編碼過程作出提示，而且能夠配置保存文件時自動修復錯誤。

相似的插件有：

• jslint
• sass lint 對 Sass 語法執行 lint

Prettier

ESLint 定義了代碼層面上的規範，Prettier 則定義了不一樣編輯器的代碼格式化規範,確保同一項目通過不一樣開發者格式化後是一致的。編輯器對代碼格式化的差別，會爲代碼合帶來沒必要要的麻煩。Prettier 的詳細介紹能夠在 Prettier 官網 瞭解，Prettier 插件 經過項目下的 .prettier 配置格式化代碼，咱們將這個文件提交至項目倉庫，支持 prettier 的編輯器打開項目後都會以一樣的方式格式化代碼。

相似的插件有：

• EditorConfig for VS Code

REST Client

先後端應用聯調或 Node 接口測試過程當中，咱們會有請求接口驗證返回結果的需求。一般使用的工具備 Postman 和 CURL。Postman 提供的功能很完備，但須要在開發時額外安裝一個軟件，而且開發過程多幾回軟件的切換也不完美了。CURL 是系統自帶的命令行工具，功能也很強大，但我的感受控制檯中輸入 curl 命令不太友好。REST Client 爲咱們提供了在編輯器視窗中快速請求接口的能力，並且咱們能夠將請求的 API 列表保存在項目文件中，方便後面的使用。

GitLens

Gitlens 對 VSCode 的 git 功能作了不少擴充，功能十分強大。最吸引人的是其快速跟蹤代碼變動的能力，從項目、文件、代碼行的維度都能快速定位。代碼行的 hover 提示容易形成編碼的干擾，我的建議代碼編寫過程當中關閉行變動提示。

Quokka.js

驗證 javascript/Typescript 的一些語法或特性時，咱們可能想要一個能快速執行的環境，之前一般會用到瀏覽器自帶的 snippet 功能，在瀏覽器中編碼，代碼提示效果天然會弱一點，並且對一些新的特性也不能徹底支持。
Quokka.js爲編輯器提供了快速建立 js/ts playground 功能，咱們能夠快速在編輯器中編寫可執行的代碼片斷，驗證一些特性。Quokka.js 提供了社區版和 Pro 版本（收費，還不便宜），社區版不能將已保存的文件從新加入運行環境，每次須要新建一個文件來執行。我的感受平時作一些特性驗證已經夠用了。

相似的插件有：

• Code Runner

Snippet

Snippet 爲咱們提供了提供的代碼片快速插入功能。如安裝 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 的助力下，更高效更高質的完成工做。

文中若有紕漏，也歡迎你們指正：）