電子發(fā)燒友App
vscode是一個(gè)不錯(cuò)的開(kāi)源IDE，可以完全替代sublime，又是跨平臺(tái)，使用起來(lái)還比較方便。使用一段時(shí)間后，我覺(jué)得有些插件，值得推薦一下。我這里的開(kāi)發(fā)環(huán)境是win10下vscode+node.
用了一陣子vscode，是越來(lái)越喜歡了。在這里再補(bǔ)充一些插件。
在vscode的主UI的左邊工具欄的最下邊，就是插件管理了，如下圖
beautify
這是一個(gè)代碼美化插件，一定要有
ESLint
這是一個(gè)代碼檢查的插件，一定要有，很不錯(cuò)。下面是我的配置使用.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， //禁止在條件表達(dá)式中使用賦值語(yǔ)句
“no-dupe-args”： 2， //函數(shù)參數(shù)禁止重名
“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
}
}］，
“l(fā)inebreak-style”： 0
}
};1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
JavaScript （ES6） code snippets
從node 6.x后，就支持javascript ES6很多語(yǔ)法了， 6.9.x開(kāi)始，已經(jīng)支持99%的ES6了，所以這個(gè)插件很必要。
不能理解，node 6.x為什么不支持import
Numbered Bookmarks
一個(gè)書(shū)簽工具，還是很有必要的，但是感覺(jué)功能還比較弱
tortoise-svn
SVN的集成插件，雖然都用git了，但svn還是很不錯(cuò)的
VSCode Great Icons
這個(gè)是非常必要的，這個(gè)為每個(gè)文件類型增加了一個(gè)圖標(biāo)，例得項(xiàng)目的目錄樹(shù)很直觀，這個(gè)一定要用。
補(bǔ)充
Path Intellisense
在使用import的時(shí)候，可以增加已經(jīng)路徑或文件的提示。很不錯(cuò)
Better Align
對(duì)齊插件
vscode使用Better Align插件以及快捷鍵配置實(shí)例
Babel ES6/ES7
這個(gè)是ES6，ES7語(yǔ)法加亮檢查插件。
插件列表
Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽
Auto Rename Tag 修改HTML標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽
Bookmarks 添加行書(shū)簽
Can I Use HTML5、CSS3、SVG的瀏覽器兼容性檢查
Code Runner 運(yùn)行選中代碼段（支持大量語(yǔ)言，包括Node）
CodeBing 在VSCode中彈出瀏覽器并搜索，可編輯搜索引擎
Color Highlight 顏色值在代碼中高亮顯示
Color Picker 拾色器
Document This 注釋文檔生成
EditorConfig for VS Code EditorConfig 插件
Emoji 在代碼中輸入emoji
ESLint ESLint插件，高亮提示
File Peek 根據(jù)路徑字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代碼段
ftp-sync 同步文件到ftp
Git Blame 在狀態(tài)欄顯示當(dāng)前行的Git信息
Git History（git log） 查看git log
GitLens 顯示文件最近的commit和作者，顯示當(dāng)前行commit信息
Guides 高亮縮進(jìn)基準(zhǔn)線
Gulp Snippets Gulp代碼段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
Indenticator 縮進(jìn)高亮
JavaScript （ES6） code snippets ES6語(yǔ)法代碼段
language-stylus Stylus語(yǔ)法高亮和提示
Lodash Lodash代碼段
markdownlint Markdown格式提示
MochaSnippets Mocha代碼段
Node modules resolve 快速導(dǎo)航到Node模塊
npm 運(yùn)行npm命令
npm Intellisense 導(dǎo)入模塊時(shí)，提示已安裝模塊名稱
Output Colorizer 彩色輸出信息
Partial Diff 對(duì)比兩段代碼或文件
Path Autocomplete 路徑完成提示
Path Intellisense 另一個(gè)路徑完成提示
Prettify JSON 格式化JSON
Project Manager 快速切換項(xiàng)目
REST Client 發(fā)送REST風(fēng)格的HTTP請(qǐng)求
Settings Sync VSCode設(shè)置同步到Gist
String Manipulation 字符串轉(zhuǎn)換處理（駝峰、大寫(xiě)開(kāi)頭、下劃線等等）
Test Spec Generator 測(cè)試用例生成（支持chai、should、jasmine）
TODO Parser Todo管理
Version Lens package.json文件顯示模塊當(dāng)前版本和最新版本
vetur 目前比較好的Vue語(yǔ)法高亮
View Node Package 快速打開(kāi)選中模塊的主頁(yè)和代碼倉(cāng)庫(kù)
vscode-icons 文件圖標(biāo)，方便定位文件
VSCode Great Icons 文件圖標(biāo)拓展
VueHelper Vue2代碼段（包括Vue2 api、vue-router2、vuex2）
附錄：VSCode首選項(xiàng)配置
{
“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
}
工商網(wǎng)監(jiān)
評(píng)論