VS code常用插件推薦（總結(jié)整理篇）

簡介

vscode是微軟開發(fā)的的一款代碼編輯器，就如官網(wǎng)上說的一樣，vscode重新定義（redefined）了代碼編輯器。當(dāng)前市面上常用的輕型代碼編輯器主要是：sublime，notepad++，editplus，atom這幾種。比起notepad++、editplus，vscode集成了許多IDE才具有的功能，比起它們更像一個代碼編輯器；比起sublime，vscode顏值更高，安裝配置插件更為方便；比起atom，vscode啟動速度更快，打開各種大文件不卡。可以說，vscode既擁有高自由度、又擁有高性能和高顏值，最關(guān)鍵的是，vscode還是一款免費并且有團(tuán)隊持續(xù)快速更新的代碼編輯器?？梢哉f，vscode是代碼編輯器的首選。個人推薦編寫前端代碼時，代碼編輯器選擇vscode，IDE選擇WebStorm。vscode安裝插件只需要點擊圖片所示按鈕，即可進(jìn)入拓展，在搜索框中輸入插件名點擊安裝后，等待安裝好即可點擊重新加載重啟vscode使得插件生效。

1、Chinese (Simplified) Language Pack for Visual Studio Code.

此中文（簡體）語言包為 VS Code 提供本地化界面。安裝后，在 locale.json 中添加 “l(fā)ocale”: “zh-cn”，即可載入中文（簡體）語言包。要修改 locale.json，你可以同時按下 Ctrl+Shift+P 打開命令面板，之后輸入 “config” 篩選可用命令列表，最后選擇配置語言命令。

可以將編譯器漢化。非常適合英文不好的同學(xué)。

2.Code Debugger

無需配置launch.json即可進(jìn)行單文件調(diào)試，點擊右上角蟲子圖標(biāo)或者右鍵菜單都可以。

支持JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua。

3.Debugger for Chrome

支持谷歌瀏覽器調(diào)試bug

4.ES7 React/Redux/GraphQL/React-Native snippets  

在 VS Code 中支持 React Native，React，Redux 常見代碼片段的插件.

5.ESLint 

ESLint 是一個代碼規(guī)范和錯誤檢查工具，所有東西都是可以插拔的。你可以調(diào)用任意的rule api或者formatter api 去打包或者定義rule or formatter。任意的rule 都是獨立的。沒有特定的coding style，你可以自己配置。

6.GitLens — Git supercharged

GitLens一個很厲害的vscode的git插件，支持在編譯器終端git各種操作。

7.HTML CSS Support 

在編寫樣式表的時候，自動補(bǔ)全功能大大縮減了編寫時間。

8.JavaScript (ES6) code snippets 

支持ES6語法提示。

9.Mithril Emmet 

 

Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發(fā)效率的一個工具. 在前端開發(fā)的過程中，一大部分的工作是寫 HTML、CSS 代碼。特別是手動編寫 HTML 代碼的時候，效率會特別低下，因為需要敲打很多尖括號，而且很多標(biāo)簽都需要閉合標(biāo)簽等。于是，就有了 Emmet，它可以極大的提高代碼編寫的效率，它提供了一種非常簡練的語法規(guī)則，然后立刻生成對應(yīng)的 HTML 結(jié)構(gòu)或者 CSS 代碼，同時還有多種實用的功能幫助進(jìn)行前端開發(fā)。VsCode內(nèi)置了Emmet語法,在后綴為.html/.css中輸入縮寫后按Tab鍵即會自動生成相應(yīng)代碼.

10.Path Intellisense 

路徑提示插件。

11.Prettier - Code formatter 

對代碼進(jìn)行快速格式化。

12.Vue 3 Snippets

這是一款在 Vue 2 或者 Vue 3 開發(fā)中提供代碼片段，語法高亮和格式化的 VS Code 插件，能極大提高你的開發(fā)效率。

13.VueHelper

vscode最好的vue代碼提示插件，不僅包括了vue2所有api，還含有vue-router2和vuex2的代碼提示.(此插件作者已轉(zhuǎn)行做影視，可以使用Vue 3 Snippets，如果不使用本插件)。

VS code快捷鍵

好啦，本期內(nèi)容就分享到這里，我們下期見！