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

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

Bracket Pair Colorizer

圓括號 () 、中括號 [] 和花括號 {} 是大多數語言常用的操作符，javascript 中，函數定義、條件判斷、數組、解構...括號的使用更是無處不在，當我們在編寫或者閱讀代碼時，很難一眼看出兩個匹配的括號。這樣可能會導致兩個負面影響：1、閱讀效率降低，閱讀代碼需要仔細確認代碼是否在兩個括號之間；2、缺乏 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 文件格式化代碼，我們需要將這個文件提交至 git 倉庫。

類似的插件有：

• EditorConfig for VS Code

REST Client

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

GitLens

Gitlens 對 VSCode 的 git 功能做了很多擴充，功能十分強大。能快速跟蹤到代碼的變更，從項目、文件、代碼行的維度都能快速定位。個人建議代碼編寫過程中關閉行變更提示。

Quokka.js

學習 javascript/Typescript 的一些語法或特性時，我們可能想要一個能快速執行的環境，以前通常會用到瀏覽器自帶的 snippet 功能，瀏覽器中編碼，代碼提示效果自然會弱一點，而且對一些新的特性也會不支持。

Quokka.js 為編輯器提供了快速創建 js/ts playground 功能，我們可以快速在編輯器中編寫可執行的代碼片段，驗證一些特性。Quokka.js 提供了社區版和 Pro 版本（收費，還不便宜），社區版不能將已保存的文件重新加入運行環境，每次需要新建一個文件來執行。個人感覺平時做一些特性驗證已經夠用了。

類似的插件有：

• Code Runner

Snippet

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 的助力下，更高效更高質的完成工作。文中如有紕漏，也歡迎大家指正。