開發(fā)工具對(duì)于我們而言只是為了提升開發(fā)效率而已，沒必要去糾結(jié)到底使用哪一種绣否。之前發(fā)了一篇webStorm的破解教程，許多小伙伴依然會(huì)遇到一些問題，如果短時(shí)間搞不定安裝缘挑，其實(shí)vsCode作為一款開源利器也是個(gè)不錯(cuò)的選擇。
工欲善其事必先利其器桶略，下面就是一些常見的也是自己在用vsCode插件：
Auto Close Tag (自動(dòng)關(guān)閉標(biāo)簽)
Auto Rename Tag (自動(dòng)重命名標(biāo)簽)
ESLint （代碼規(guī)范檢測(cè)）
open in browser (在瀏覽器中打開)
Path Intellisense (自動(dòng)路勁補(bǔ)全)
Prettier - Code formatter （代碼格式化）
Vetur（vue代碼格式化）
vscode-icons (設(shè)置文件圖標(biāo)主題)
GitLens — Git supercharged （查看代碼提交記錄语淘，分鍋利器）
Chinese (Simplified) (簡(jiǎn)體中文)
安裝完成后我們先創(chuàng)建一個(gè)新版vue-cli項(xiàng)目，我的版本是@vue/cli 4.4.3际歼。
- 卸載舊版本
npm uninstall -g vue-cli
- 安裝新版本
npm install -g @vue/cli
- 檢查版本
vue -V
- 創(chuàng)建新項(xiàng)目
vue create hello-world
你會(huì)被提示選取一個(gè) preset惶翻。你可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset，也可以選“手動(dòng)選擇特性”來選取需要的特性鹅心。
cli-new-project.png
我這里選擇了基本版：
cli-select-features.png
下載完成后目錄基本結(jié)構(gòu)：
15920427283025.png
運(yùn)行項(xiàng)目看看能否跑起來：
npm run serve
注意：vue-cli3.0構(gòu)建項(xiàng)目目錄中沒有build和config目錄吕粗，添加自定義配置需要在和package.json同級(jí)的根目錄中添加vue.config.js文件，然后比如要修改端口（注意需要重啟）：
module.exports = {
devServer: {
open: true,
port: 3000
}
}
如果一切就緒旭愧，新建一個(gè).vscode的文件夾并在里面創(chuàng)建名為settings.json的文件：
image.png
settings.json文件：
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"eslint.validate": [
"javascript",
"javascriptreact"
],
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
}
},
"editor.tabSize": 2,
"vetur.validation.template": false,
"files.exclude": {
"node_modules": true
},
"git.ignoreLimitWarning": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"git.confirmSync": false,
"eslint.quiet": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceAfterConstructor": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.preferences.quoteStyle": "single",
"javascript.format.insertSpaceAfterConstructor": true,
"typescript.preferences.quoteStyle": "single",
"html.format.wrapAttributes": "force-expand-multiline",
"editor.formatOnSave": true,
"prettier.vueIndentScriptAndStyle": true,
"prettier.singleQuote": true,
"prettier.useTabs": true
}
編輯.eslintrc.js文件颅筋，將rules的規(guī)則替換成下面的：
rules: {
'no-console': 'off',
'accessor-pairs': [2, { setWithoutGet: true }], // 強(qiáng)制 getter 和 setter 在對(duì)象中成對(duì)出現(xiàn)
'arrow-spacing': [2, { before: true, after: true }], // 強(qiáng)制箭頭函數(shù)的箭頭前后使用一致的空格
'block-spacing': [2, 'always'], // 禁止或強(qiáng)制在代碼塊中開括號(hào)前和閉括號(hào)后有空格
'brace-style': [2, '1tbs', { allowSingleLine: true }], // 強(qiáng)制在代碼塊中使用一致的大括號(hào)風(fēng)格
camelcase: [2, { properties: 'always' }], // 強(qiáng)制使用駱駝拼寫法命名約定
'comma-dangle': [2, 'never'], // 要求或禁止末尾逗號(hào)
'comma-spacing': [2, { before: false, after: true }], // 強(qiáng)制在逗號(hào)周圍使用空格
'comma-style': [2, 'last'], // 要求逗號(hào)放在數(shù)組元素、對(duì)象屬性或變量聲明之后输枯，且在同一行
'constructor-super': 2, // 要求在構(gòu)造函數(shù)中有 super() 的調(diào)用
curly: 2, // 要求遵循大括號(hào)約定
'dot-location': [2, 'property'], // 要求點(diǎn)操作符和屬性放在同一行
'eol-last': 2, // 要求在非空文件末尾至少存在一行空行
eqeqeq: [2, 'always'], // 強(qiáng)制在任何情況下都使用 === 和 !==
'generator-star-spacing': [2, { before: false, after: true }], // 強(qiáng)制 generator 函數(shù)中 * 號(hào)后有空格
'handle-callback-err': [2, '^(err|error)$'], // 強(qiáng)制回調(diào)錯(cuò)誤處理
indent: [2, 2, { SwitchCase: 1 }], // 強(qiáng)制使用一致的縮進(jìn)
'jsx-quotes': [2, 'prefer-single'], // 強(qiáng)制在 JSX 屬性中一致地使用單引號(hào)
'key-spacing': [2, { beforeColon: false, afterColon: true }], // 強(qiáng)制在對(duì)象字面量的屬性中鍵和值之間使用一致的間距
'keyword-spacing': [2, { before: true, after: true }], // 關(guān)鍵字周圍空格的一致性
'new-cap': [2, { newIsCap: true, capIsNew: false }], // 要求構(gòu)造函數(shù)首字母大寫
'new-parens': 2, // 要求調(diào)用無參構(gòu)造函數(shù)時(shí)帶括號(hào)
'no-array-constructor': 2, // 禁止使用 Array 構(gòu)造函數(shù)
'no-caller': 2, // 禁用 caller 或 callee
'no-class-assign': 2, // 不允許修改類聲明的變量
'no-cond-assign': 2, // 禁止條件表達(dá)式中出現(xiàn)賦值操作符
'no-const-assign': 2, // 禁止修改 const 聲明的變量
'no-control-regex': 2, // 禁止在正則表達(dá)式中使用控制字符
'no-delete-var': 2, // 禁止刪除變量
'no-dupe-args': 2, // 禁止 function 定義中出現(xiàn)重名參數(shù)
'no-dupe-class-members': 2, // 禁止類成員中出現(xiàn)重復(fù)的名稱
'no-dupe-keys': 2, // 禁止對(duì)象字面量中出現(xiàn)重復(fù)的 key
'no-duplicate-case': 2, // 禁止出現(xiàn)重復(fù)的 case 標(biāo)簽
'no-empty-character-class': 2, // 禁止在正則表達(dá)式中使用空字符集
'no-empty-pattern': 2, // 禁止使用空解構(gòu)模式
'no-eval': 2, // 禁用 eval()
'no-ex-assign': 2, // 禁止對(duì) catch 子句的參數(shù)重新賦值
'no-extend-native': 2, // 禁止擴(kuò)展原生對(duì)象
'no-extra-bind': 2, // 禁止不必要的 .bind() 調(diào)用
'no-extra-boolean-cast': 2, // 禁止不必要的布爾轉(zhuǎn)換
'no-extra-parens': 2, // 禁止不必要的括號(hào)
'no-fallthrough': 2, // 禁止 case 語句落空
'no-floating-decimal': 2, // 禁止數(shù)字字面量中使用前導(dǎo)和末尾小數(shù)點(diǎn)
'no-func-assign': 2, // 禁止對(duì) function 聲明重新賦值
'no-implied-eval': 2, // 禁止使用類似 eval() 的方法
'no-inner-declarations': [2, 'both'], // 禁止在嵌套的塊中出現(xiàn)變量聲明或 function 聲明
'no-invalid-regexp': 2, // 禁止 RegExp 構(gòu)造函數(shù)中存在無效的正則表達(dá)式字符串
'no-irregular-whitespace': 2, // 禁止在字符串和注釋之外不規(guī)則的空白
'no-iterator': 2, // 禁用 __iterator__ 屬性
'no-label-var': 2, // 不允許標(biāo)簽與變量同名
'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 禁用標(biāo)簽語句
'no-lone-blocks': 2, // 禁用不必要的嵌套塊
'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合縮進(jìn)
'no-multi-spaces': 2, // 禁止使用多個(gè)空格
'no-multi-str': 2, // 禁止使用多行字符串
'no-multiple-empty-lines': [2, { max: 1 }], // 不允許多個(gè)空行
'no-global-assign': 2, // 禁止對(duì)原生對(duì)象或只讀的全局對(duì)象進(jìn)行賦值
'no-unsafe-negation': 2, // 禁止在in表達(dá)式中否定左操作數(shù)
'no-new-object': 2, // 禁用 Object 的構(gòu)造函數(shù)
'no-new-require': 2, // 禁止調(diào)用 require 時(shí)使用 new 操作符
'no-new-symbol': 2, // 禁止 Symbolnew 操作符和 new 一起使用
'no-new-wrappers': 2, // 禁止對(duì) String议泵，Number 和 Boolean 使用 new 操作符
'no-obj-calls': 2, // 禁止把全局對(duì)象作為函數(shù)調(diào)用
'no-octal': 2, // 禁用八進(jìn)制字面量
'no-octal-escape': 2, // 禁止在字符串中使用八進(jìn)制轉(zhuǎn)義序列
'no-path-concat': 2, // 禁止對(duì) __dirname 和 __filename 進(jìn)行字符串連接path.jonin() 和 path.reslove() 非常適合替換字符串拼接來創(chuàng)建文件和目錄路徑。
'no-redeclare': 2, // 禁止多次聲明同一變量
'no-regex-spaces': 2, // 禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格
'no-return-assign': [2, 'except-parens'], // 禁止出現(xiàn)賦值語句用押，除非使用括號(hào)把它們括起來肢簿。
'no-self-assign': 2, // 禁止自我賦值
'no-self-compare': 2, // 禁止自身比較
'no-sequences': 2, // 禁用逗號(hào)操作符
'no-shadow-restricted-names': 2, // 禁止將標(biāo)識(shí)符定義為受限的名字
'func-call-spacing': [2, 'never'], // 要求或禁止在函數(shù)標(biāo)識(shí)符和其調(diào)用之間有空格
'no-sparse-arrays': 2, // 禁用稀疏數(shù)組
'no-this-before-super': 2, // 禁止在構(gòu)造函數(shù)中，在調(diào)用 super() 之前使用 this 或 super
'no-throw-literal': 2, // 禁止拋出異常字面量
'no-trailing-spaces': 2, // 禁用行尾空白
'no-undef': 2, // 禁用未聲明的變量，除非它們?cè)?/*global */ 注釋中被提到
'no-undef-init': 2, // 禁止將變量初始化為 undefined
'no-unexpected-multiline': 2, // 禁止出現(xiàn)令人困惑的多行表達(dá)式
'no-unmodified-loop-condition': 2, // 禁用一成不變的循環(huán)條件
'no-unneeded-ternary': [2, { defaultAssignment: false }], // 禁止可以在有更簡(jiǎn)單的可替代的表達(dá)式時(shí)使用三元操作符
'no-unreachable': 2, // 禁止在return池充、throw桩引、continue 和 break 語句之后出現(xiàn)不可達(dá)代碼
'no-unsafe-finally': 2, // 禁止在 finally 語句塊中出現(xiàn)控制流語句
'no-unused-vars': [2, { vars: 'all', args: 'none' }], // 禁止出現(xiàn)未使用過的變量,不檢查參數(shù)
'no-useless-call': 2, // 禁止不必要的 .call() 和 .apply()
'no-useless-computed-key': 2, // 禁止在對(duì)象中使用不必要的計(jì)算屬性
'no-useless-constructor': 2, // 禁用不必要的構(gòu)造函數(shù)
'no-useless-escape': 2, // 禁用不必要的轉(zhuǎn)義字符
'no-whitespace-before-property': 2, // 禁止屬性前有空白
'no-with': 2, // 禁用 with 語句
'one-var': [2, { initialized: 'never' }], // 要求每個(gè)作用域的初始化的變量有多個(gè)變量聲明
// 'operator-linebreak': [
// 2,
// 'after',
// { overrides: { '?': 'before', ':': 'before' }}
// ], // 強(qiáng)制操作符使用一致的換行符風(fēng)格
'padded-blocks': [2, 'never'], // 禁止塊語句和類的開始或末尾有空行
quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], // 強(qiáng)制使用一致的反勾號(hào)、雙引號(hào)或單引號(hào)
semi: [2, 'never'], // 禁止在語句末尾使用分號(hào)
'semi-spacing': [2, { before: false, after: true }], // 強(qiáng)制分號(hào)之前和之后使用一致的空格
'space-before-blocks': [2, 'always'], // 強(qiáng)制在塊之前使用一致的空格
'space-before-function-paren': ['error', 'always'], // 強(qiáng)制在 function的左括號(hào)之前使用一致的空格
'space-in-parens': [2, 'never'], // 強(qiáng)制在圓括號(hào)內(nèi)使用一致的空格
'space-infix-ops': 2, // 要求操作符周圍有空格
'space-unary-ops': [2, { words: true, nonwords: false }], // 強(qiáng)制在一元操作符前后使用一致的空格
'spaced-comment': [
'error',
'always',
{
markers: []
}
], // 強(qiáng)制在注釋中 // 或 /* 使用一致的空格
'template-curly-spacing': [2, 'never'], // 禁止花括號(hào)內(nèi)出現(xiàn)空格
'use-isnan': 2, // 要求使用 isNaN() 檢查 NaN
'valid-typeof': 2, // 強(qiáng)制 typeof 表達(dá)式與有效的字符串進(jìn)行比較
'wrap-iife': [2, 'any'], // 要求 立即執(zhí)行函數(shù) 使用括號(hào)括起來
'yield-star-spacing': [2, 'both'], // 強(qiáng)制在 yield* 表達(dá)式中 * 周圍使用空格
yoda: [2, 'never'], // 禁止 “Yoda” 條件
'prefer-const': 2, // 要求使用 const 聲明那些聲明后不再被修改的變量
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 要求花括號(hào)內(nèi)有空格 (除了 {})禁止以對(duì)象元素開始或結(jié)尾的對(duì)象的花括號(hào)中有空格
'array-bracket-spacing': [2, 'never'], // 強(qiáng)制數(shù)組方括號(hào)中使用一致的空格
'vue/jsx-uses-vars': 2, // 防止JSX中使用的變量被標(biāo)記為未使用
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
}
至此收夸，你可以去App.vue文件試下效果了坑匠，按下ctrl + s看看代碼規(guī)范檢驗(yàn)和自動(dòng)格式化是不是都加上了，作為一個(gè)輕量級(jí)的開發(fā)工具完美替代了航母webStorm卧惜。
PS：
vsCode的快捷啟動(dòng)方式厘灼，在命令行輸入：
code .
