在vue-cli中爲了能讓vscode能提示.vue文件中的js代碼,我們引入了eslint-plugin-html這個eslint插件(使用方法參考VSCode環境下配置ESLint 對Vue單文件的檢測)
最近開始使用vue-cli3構建項目,主要目的是爲了簡化項目代碼結構和提高編譯性能。當我們使用以前的方案去實現vscode對.vue文件的eslint檢測時卻發現始終無法識別,而且提示以下內容
提示信息很容易理解,eslint沒有把當前文件當做vue文件處理,而是當做了普通的js文件處理,當然,js文件的外層代碼肯定不能含有html標記。最後,我們找到了eslint-plugin-vue,這個插件能完美處理.vue文件,而且還預置了很多可複用的rules(eslint規則)。使用方法如下:
第一步: npm install --save-dev eslint-plugin-vue 安裝eslint vue支持插件
第二步: .eslintrc.js文件中添加plugin說明
注:vue-cli3默認不會在根目錄創建.eslintrc.js文件,因爲vue-cli3除了這種方法配置eslint以外還可以在package.json中通過eslintConfig屬性去配置,但是這種方式需要嚴格遵守json語法規則,我們建議如果您的eslint配置較爲複雜,還是在根目錄自己創建一個.eslintrc.js文件,這樣就可以按照js語法規則去寫配置項,也方便註釋
module.exports = {
// ...其他配置項
plugins: [
'vue'
]
// ...其他配置項
}
第三步:使用eslint-plugin-vue中預置的eslint規則讓其支持.vue文件的基本結構和通用語法規則
增加一個文件檢測說明配置extends: [
module.exports = {
root: true,
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: [
'plugin:vue/base'
],
}
這裏我們使用的是base裏面的規則,更多的預置規則可以參考文檔(eslint-plugin-vue Available rules)[https://eslint.vuejs.org/rules/]
關於eslint規則複用可以參考文檔https://cn.eslint.org/docs/de...
第四步:如果配置中最外層已經存在解析器說明配置parser: 'babel-eslint',將其移至parserOptions中
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
}
// ...其他配置項
}
第五步:vscode中添加對vue文件支持的設置讓vscode可以高亮vue文件中的js代碼eslint問題代碼
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
]
附完整的.eslintrc.js文件
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: [
'plugin:vue/base'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'indent': [2, 2], // 兩個空格的縮進
'quotes': [2, 'single'], // js必須使用單引號
'linebreak-style': [2, 'unix'], // 換行風格 unix/windows
'semi': [2, 'always'], // 語句強制分號結尾
'no-console': [1], // 不允許console語句
'no-unused-vars': [1], // 聲明瞭變量但是沒有使用檢測
'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元運算符的前/後要不要加空格
'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括號風格
'comma-spacing': [2, { 'before': false, 'after': true }], // 逗號後有空格,前沒有空格
'comma-style': [2, 'last'], // 逗號跟在結尾
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 對象字面量中冒號的前後空格
'lines-around-comment': [ // 行前/行後備注
2, {
'beforeBlockComment': false, // 段註釋的前後
'beforeLineComment': false, // 行註釋的前面
'afterBlockComment': false, // 塊註釋的後面
'afterLineComment': false, // 行註釋的後面
'allowBlockStart': true,
'allowObjectStart': true,
'allowArrayStart': true
}],
'max-depth': [2, 4], // 代碼最多允許4層嵌套
'max-len': [1, 160, 2],
'max-nested-callbacks': [2, 3], // 回調嵌套深度
'max-params': [2, 5], // 函數最多只能有5個參數
'max-statements': [1, 80], // 單個函數最多80條語句
'no-array-constructor': [2], // 禁止使用數組構造器
'no-lonely-if': 2, // // 禁止else語句內只有if語句
'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超過2行
'no-nested-ternary': 2, // 不使用嵌套的三元表達式
'no-spaced-func': 2, // 函數調用時 函數名與()之間不能有空格
'no-trailing-spaces': 2, // 一行結束後面不要有空格
'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;簡單的判斷用三元表達式代替
'object-curly-spacing': [2, 'always', { // 大括號內是否允許不必要的空格 always始終允許;never始終不允許
'objectsInObjects': false,
'arraysInObjects': false
}],
'arrow-spacing': 2, // =>的前/後括號
'block-scoped-var': 2, // 塊語句中使用var
'no-dupe-class-members': 2,
// 'no-var': 1, // 禁用var,用let和const代替
'object-shorthand': [1, 'always'], // 強制對象字面量縮寫語法
'array-bracket-spacing': [2, 'never'], // 是否允許非空數組裏面有多餘的空格
'operator-linebreak': [2, 'after'], // 換行時運算符在行尾還是行首
'semi-spacing': [2, { 'before': false, 'after': true }], // 分號前後空格
'keyword-spacing': ['error'],
'space-before-blocks': 2, // 不以新行開始的塊{前面要不要有空格
'block-spacing': [2, 'always'],
'space-before-function-paren': [2, 'never'], // 函數定義時括號前面要不要有空格
'space-in-parens': [2, 'never'], // 小括號裏面要不要有空格
'spaced-comment': [1, 'always',
{ 'exceptions': ['-', '*', '+']
}], // 註釋風格要不要有空格什麼的
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
},
globals: {
'$': false,
'jquery': false,
'ActiveXObject': false,
'arbor': true,
'layer': false
}
};