1.項目中使用eslint
或者全局安裝eslint 打開終端，運行npm install eslint -g全局安裝ESLint。
2.vscode安裝eslint 插件
3.vscode 擴展設置
點擊 文件 > 首選項 > 設置 setting.json
vscode 自帶保存格式化
"editor.formatOnSave": true //
保存觸發eslint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"html",
"vue",
"javascript",
"jsx"
],
{
"eslint.autoFixOnSave": true, // 啟用保存時自動修復,默認只支持.js文件
"eslint.validate": [
"javascript", // 用eslint的規則檢測js文件
"javascriptreact", // 用eslint的規則檢測js文件
{
"language": "vue", // 檢測vue文件
"autoFix": true // 為vue文件開啟保存自動修復的功能
},
{
"language": "html",
"autoFix": true
},
"vue"
],
}
配置相應的規則.eslitrc.js 或 package.json( "eslintConfig") 保存文件后一般會自動修復
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
'prettier/prettier': 0,
"@typescript-eslint/no-explicit-any": 0,
"vue/attributes-order": 2,
"vue/max-attributes-per-line": [2, { // 強制標簽每行最大屬性數
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/html-self-closing": [2, { // 強制使用閉合標簽
"html": {
"void": "any",
"normal": "any",
"component": "any"
},
"svg": "any",
"math": "any"
}],
"vue/singleline-html-element-content-newline": 0, //單行元素換行符
"vue/multiline-html-element-content-newline": 0, //多行元素換行符
"vue/name-property-casing": [2, "PascalCase"], // vue組件name強制使用駝峰命名
"vue/html-closing-bracket-newline": 0, // 可以在便簽右便簽使用換行符
"vue/no-side-effects-in-computed-properties": 0, // 允許計算屬性中出現副作用
"vue/no-use-v-if-with-v-for": 0, // 允許v-for 和 v-if 作用在同一元素上
'accessor-pairs': 2, // 強制 getter 和 setter 在對象中成對出現
'arrow-spacing': [2, {
'before': true,
'after': true
}], // 強制箭頭函數的箭頭前后使用一致的空格
'block-spacing': [2, 'always'], // 禁止或強制在代碼塊中開括號前和閉括號后有空格 （要求使用一個或多個空格）
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}], // if while function 后面的{必須與if在同一行，java風格。
'camelcase': [2, {
'properties': 'always'
}], //強制駝峰法命名
'comma-spacing': [2, {
'before': false,
'after': true
}], // 控制逗號前后的空格
'comma-style': [2, 'last'], // 控制逗號在行尾出現還是在行首出現
'dot-location': [2, 'property'],
'eol-last': 2, // 文件末尾強制換行
'eqeqeq': [2, 'allow-null'], // 使用 === 替代 ==
'indent': [2, 2, {
'SwitchCase': 1
}], //縮進風格
// JSX 屬性中一致使用雙引號或單引號
'jsx-quotes': [2, 'prefer-single'],
//對象字面量中冒號的前后空格
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}], // 強制在關鍵字前后使用一致的空格
//函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2, //new時必須加小括號
'no-array-constructor': 2, //禁止使用數組構造器
'no-caller': 2, //禁止使用arguments.caller或arguments.callee
'no-console': 0, //可以使用console
'no-debugger': 0, //禁止使用debugger
'no-empty-character-class': 0, //正則表達式中的[]內容不能為空
'no-empty-pattern': 0,
'no-eval': 0, //禁止使用eval
'no-extend-native': 2, //禁止擴展native對象
'no-extra-bind': 2, //禁止不必要的函數綁定
'no-extra-parens': [2, 'functions'], //禁止非必要的括號
'no-floating-decimal': 2, //禁止省略浮點數中的0 .5 3.
'no-implied-eval': 2, //禁止使用隱式eval
'no-label-var': 2, //label名不能與var聲明的變量名相同
'no-lone-blocks': 2, //禁止不必要的嵌套塊
'no-multi-spaces': 2, //不能用多余的空格
'no-multi-str': 2, // 禁止使用多行字符串
'no-multiple-empty-lines': [2, {
'max': 2
}], //空行最多不能超過2行
'no-new-object': 2, //禁止使用new Object()
'no-new-require': 2, //禁止使用new require
'no-new-wrappers': 2, // 禁止對 String，Number 和 Boolean 使用 new 操作符
'no-obj-calls': 0, //不能調用內置的全局對象，比如Math() JSON()
'no-return-assign': [2, 'except-parens'], //return 語句中不能有賦值表達式
'no-sequences': 2, //禁止使用逗號運算符
'no-spaced-func': 2, //函數調用時 函數名與()之間不能有空格
'no-sparse-arrays': 0, //禁止稀疏數組， [1,,2]
'no-trailing-spaces': 2, //一行結束后面不要有空格
'no-unexpected-multiline': 0, //避免多行表達式
'no-unmodified-loop-condition': 0, //檢查引用是否在循環中被修改
'no-unneeded-ternary': 2, //禁止不必要的三元表達式 var isYes = answer === 1 ? true : false;
'no-unsafe-finally': 0, // 禁止在 finally 語句塊中出現控制流語句
'no-useless-call': 2, //禁止不必要的call和apply
'no-useless-computed-key': 0, // 禁止在對象中使用不必要的計算屬性
'no-useless-constructor': 2, //可以在不改變類的工作方式的情況下安全地移除的類構造函數
'no-whitespace-before-property': 0,
'one-var': 0, //禁止連續聲明
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}], //換行時運算符在行尾還是行首
'padded-blocks': 0, //塊語句內行首行尾是否要空行
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}], // 強制使用一致的反勾號、雙引號或單引號
'semi': [2, 'never'], //語句強制分號結尾
'semi-spacing': [2, {
'before': false,
'after': true
}], //分號前后空格
'space-before-blocks': [2, 'always'], //不以新行開始的塊{前面要不要有空格
'space-before-function-paren': [2, 'never'], //函數定義時括號前面要不要有空格
'space-in-parens': [2, 'never'], //小括號里面要不要有空格
'space-infix-ops': 2, //中綴操作符周圍要不要有空格
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}], //一元運算符的前/后要不要加空格
'spaced-comment': [2, 'always'], // 強制在注釋中 // 或 /* 使用一致的空格
'template-curly-spacing': [2, 'never'], // 要求或禁止模板字符串中的嵌入表達式周圍空格的使用
'yoda': [2, 'never'], //禁止尤達條件
'prefer-const': 2, // 要求使用 const 聲明那些聲明后不再被修改的變量
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}], //大括號內是否允許不必要的空格
'array-bracket-spacing': [2, 'never'] //是否允許非空數組里面有多余的空格
}
};
為每個項目設置不同的編輯器配置
在項目根目錄下面創建.vscode文件夾，下面新增settings.json文件，填入以下代碼：
{
// "eslint.validate": [
// "html",
// "vue",
// "javascript",
// "jsx"
// ],
// "eslint.autoFixOnSave": true, // 啟用保存時自動修復,默認只支持.js文件
"editor.formatOnSave": true,
"eslint.validate": [
"javascript", // 用eslint的規則檢測js文件
"javascriptreact", // 用eslint的規則檢測js文件
{
"language": "vue", // 檢測vue文件
"autoFix": true // 為vue文件開啟保存自動修復的功能
},
{
"language": "html",
"autoFix": true
},
"vue"
],
"editor.tabSize": 2,
// "editor.codeActionsOnSave": { //自動修復
// "source.fixAll.eslint": true
// },
}