VS Code提升前端開發效率插件

Auto Close Tag

自動添加HTML/XML關閉標記，與Visual Studio IDE或Sublime文本相同

鍵入開始標籤的結束括號後，將自動插入結束標籤。

Auto Rename Tag

自動重命名配對的HTML/XML標記

Beautify

爲VS代碼美化代碼

選中須要美化的代碼，右鍵Format Document

GitLens

加強Visual Studio代碼中內置的Git功能-經過Git責怪註釋和代碼鏡頭一目瞭然地可視化代碼做者，無縫導航和瀏覽Git存儲庫，經過強大的比較命令得到有價值的看法，等等

JavaScript (ES6) code snippets

ES6語法中JavaScript的代碼段

Path Autocomplete

提供visual studio代碼的路徑完成。

Path Intellisense

自動完成文件名的Visual Studio代碼插件

React-Native/React/Redux snippets for es6/es7

在JS/TS中使用ES7語法對React、Redux和Graphql進行簡單擴展

StandardJS - JavaScript Standard Style

將JavaScript標準樣式集成到VS代碼中。

1. 安裝"JavaScript標準樣式"擴展

   若是您不知道如何在VSCode中安裝擴展，請查看文檔。

   您將須要從新加載VSCode才能使用新的擴展。

2. 安裝standard或semistandard

   這能夠在全局或本地完成。咱們建議您在本地安裝它們（即保存在項目的中devDependencies），以確保在開發項目時其餘開發人員也已安裝它們。

3. 禁用內置的VSCode驗證器

   爲此，請"javascript.validate.enable": false在VSCode中進行設置settings.json。

Vetur

VS代碼的Vue工具

vscode wxml

微信wxml支持/vscode片斷

vscode-fileheader

插入標題註釋，並自動更新時間。

在「settings.json」中，設置並修改建立者的名稱。

"fileheader.Author": "Jiang",
"fileheader.LastModifiedBy": "Jiang",

熱鍵

ctrl+alt+i

vscode-icons

Visual Studio代碼的圖標

wxml

微信小程序wxml格式化以及高亮組件(高度自定義)

ESLint

將ESLint JavaScript集成到VS代碼中。

如下設置爲包括ESLint在內的全部提供程序都啓用了自動修復：

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

相反，此配置僅在ESLint上將其打開：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

您還能夠經過如下方式有選擇地禁用ESLint：

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": false
}

Import Cost

在編輯器中顯示導入/要求包大小

Beautify css/sass/scss/less

美化css、sass和更少的代碼（Visual Studio代碼的擴展）

選中須要美化的代碼，右鍵Format Document

TSLint

對Visual Studio代碼的TSLint支持

Settings Sync

使用GitHub Gist跨多臺計算機同步設置、代碼段、主題、文件圖標、啓動、鍵綁定、工做區和擴展名。

CSS Peek

容許查看css ID和類字符串做爲從html文件到相應css的定義。容許查看和轉到定義。

Stylelint

使用stylelint對lint CSS/SCSS/Less的Visual Studio代碼擴展，進行格式校驗。

結語

感謝你的閱讀。若你有所收穫，歡迎點贊與分享。