vscode是一個不錯的開源IDE，可以完全替代sublime，又是跨平臺，使用起來還比較方便。使用一段時間后，我覺得有些插件，值得推薦一下。我這里的開發環境是win10下vscode+node.

用了一陣子vscode，是越來越喜歡了。在這里再補充一些插件。

在vscode的主UI的左邊工具欄的最下邊，就是插件管理了，如下圖

beautify

這是一個代碼美化插件，一定要有

ESLint

這是一個代碼檢查的插件，一定要有，很不錯。下面是我的配置使用.eslintrc

module.exports = {

“env”： {

“commonjs”： true，

“es6”： true，

“node”： true

}，

parser： “babel-eslint”，

“parserOptions”： {

“sourceType”： “module”，

}，

“extends”： “eslint:recommended”，

“rules”： {

“no-console”： 0，

“semi”： ［2， “always”］，

“no-this-before-super”： 2，

“no-var”： 2，

“no-cond-assign”： 2， //禁止在條件表達式中使用賦值語句

“no-dupe-args”： 2， //函數參數禁止重名

“no-dupe-keys”： 2，

“no-duplicate-case”： 2，

“no-extra-semi”： 0，

“no-constant-condition”： 0，

“no-ex-assign”： 2，

“no-func-assign”： 2，

“no-extra-semi”： 2，

“no-irregular-whitespace”： 2，

“no-negated-in-lhs”： 2，

“no-obj-calls”： 2，

“no-unreachable”： 2，

“use-isnan”： 2，

“default-case”： 2，

“no-invalid-this”： 2，

“consistent-return”： 0，

“valid-jsdoc”： 2，

“block-scoped-var”： 0，

“complexity”： ［2， 20］，

“require-yield”： 0，

“no-mixed-spaces-and-tabs”： 2，

//注釋格式要求JSDoc格式

“require-jsdoc”： ［2， {

“require”： {

“FunctionDeclaration”： true，

“MethodDefinition”： false，

“ClassDeclaration”： false

}

}］，

“linebreak-style”： 0

}

};1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

JavaScript （ES6） code snippets

從node 6.x后，就支持javascript ES6很多語法了， 6.9.x開始，已經支持99%的ES6了，所以這個插件很必要。

不能理解，node 6.x為什么不支持import

Numbered Bookmarks

一個書簽工具，還是很有必要的，但是感覺功能還比較弱

tortoise-svn

SVN的集成插件，雖然都用git了，但svn還是很不錯的

VSCode Great Icons

這個是非常必要的，這個為每個文件類型增加了一個圖標，例得項目的目錄樹很直觀，這個一定要用。

補充

Path Intellisense

在使用import的時候，可以增加已經路徑或文件的提示。很不錯

Better Align

對齊插件

vscode使用Better Align插件以及快捷鍵配置實例

Babel ES6/ES7

這個是ES6，ES7語法加亮檢查插件。

插件列表

Auto Close Tag 自動閉合HTML標簽

Auto Rename Tag 修改HTML標簽時，自動修改匹配的標簽

Bookmarks 添加行書簽

Can I Use HTML5、CSS3、SVG的瀏覽器兼容性檢查

Code Runner 運行選中代碼段（支持大量語言，包括Node）

CodeBing 在VSCode中彈出瀏覽器并搜索，可編輯搜索引擎

Color Highlight 顏色值在代碼中高亮顯示

Color Picker 拾色器

Document This 注釋文檔生成

EditorConfig for VS Code EditorConfig 插件

Emoji 在代碼中輸入emoji

ESLint ESLint插件，高亮提示

File Peek 根據路徑字符串，快速定位到文件

Font-awesome codes for html FontAwesome提示代碼段

ftp-sync 同步文件到ftp

Git Blame 在狀態欄顯示當前行的Git信息

Git History（git log） 查看git log

GitLens 顯示文件最近的commit和作者，顯示當前行commit信息

Guides 高亮縮進基準線

Gulp Snippets Gulp代碼段

HTML CSS Class Completion CSS class提示

HTML CSS Support css提示（支持vue）

HTMLHint HTML格式提示

Indenticator 縮進高亮

JavaScript （ES6） code snippets ES6語法代碼段

language-stylus Stylus語法高亮和提示

Lodash Lodash代碼段

markdownlint Markdown格式提示

MochaSnippets Mocha代碼段

Node modules resolve 快速導航到Node模塊

npm 運行npm命令

npm Intellisense 導入模塊時，提示已安裝模塊名稱

Output Colorizer 彩色輸出信息

Partial Diff 對比兩段代碼或文件

Path Autocomplete 路徑完成提示

Path Intellisense 另一個路徑完成提示

Prettify JSON 格式化JSON

Project Manager 快速切換項目

REST Client 發送REST風格的HTTP請求

Settings Sync VSCode設置同步到Gist

String Manipulation 字符串轉換處理（駝峰、大寫開頭、下劃線等等）

Test Spec Generator 測試用例生成（支持chai、should、jasmine）

TODO Parser Todo管理

Version Lens package.json文件顯示模塊當前版本和最新版本

vetur 目前比較好的Vue語法高亮

View Node Package 快速打開選中模塊的主頁和代碼倉庫

vscode-icons 文件圖標，方便定位文件

VSCode Great Icons 文件圖標拓展

VueHelper Vue2代碼段（包括Vue2 api、vue-router2、vuex2）

附錄：VSCode首選項配置

{

“editor.tabSize”： 2，

“files.associations”： {

“*.vue”： “vue”

}，

“eslint.autoFixOnSave”： true，

“eslint.options”： {

“extensions”： ［

“.js”，

“.vue”

］

}，

“eslint.validate”： ［

“javascript”，

“javascriptreact”，

“vue”，

“vue-html”

］，

“search.exclude”： {

“**/node_modules”： true，

“**/bower_components”： true，

“**/dist”： true

}，

“emmet.syntaxProfiles”： {

“javascript”： “jsx”，

“vue”： “html”，

“vue-html”： “html”

}，

“extensions.autoUpdate”： true，

“editor.renderWhitespace”： “boundary”，

“editor.cursorBlinking”： “smooth”，

“workbench.welcome.enabled”： true

}