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"
},
"vetur.validation.template": false,//vue中的v-for提示 加上v-bind:key
"extensions.autoUpdate": true,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"workbench.welcome.enabled": true,
//設(shè)置es6允許有分號(hào)
'semi': ['error', 'always'],
//設(shè)置Tab幾個(gè)空格
"editor.tabSize": 2,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
}
}
以下為stylus配置
"stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分號(hào)
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個(gè)選擇器中是否換行
"editor.formatOnType": true,// 控制編輯器是否應(yīng)在鍵入后自動(dòng)設(shè)置行的格式
"clang-format.formatOnSave": true,//保存時(shí)自動(dòng)格式化
"vetur.format.defaultFormatter.js":"vscode-typescript",
eslint配置加上:
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// disallow unnecessary parentheses
'no-extra-parens': ['error', 'all', {'nestedBinaryExpressions': false}],
'eol-last': 0,
'space-before-function-paren': 0矢否,
'space-before-function-paren': 'off'
插件列表
Prettier - Code formatter
"prettier.singleQuote": true,
"prettier.semi": false,
Auto Close Tag自動(dòng)閉合HTML標(biāo)簽
Auto Rename Tag修改HTML標(biāo)簽時(shí)而晒,自動(dòng)修改匹配的標(biāo)簽
Bookmarks添加行書(shū)簽
Can I UseHTML5篷牌、CSS3倒得、SVG的瀏覽器兼容性檢查
Code Runner運(yùn)行選中代碼段(支持大量語(yǔ)言,包括Node)
CodeBing 在VSCode中彈出瀏覽器并搜索莽鸭,可編輯搜索引擎
Color Highlight 顏色值在代碼中高亮顯示
Color Picker 拾色器
Document This注釋文檔生成
EditorConfig for VS CodeEditorConfig插件
Emoj在代碼中輸入emoji
ESLintESLint插件块差,高亮提示
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 SnippetsGulp代碼段
HTML CSS Class CompletionCSS class提示
HTML CSS Supportcss提示(支持vue)
HTMLHint HTML格式提示
Indenticator縮進(jìn)高亮
JavaScript (ES6) code snippets ES6語(yǔ)法代碼段
language-stylusStylus語(yǔ)法高亮和提示
Lodash Lodash代碼段
markdownlintMarkdown格式提示
MochaSnippetsMocha代碼段
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 ParserTodo管理
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)拓展
VueHelperVue2代碼段(包括Vue2 api椿肩、vue-router2瞻颂、vuex2)