装置 eslint
cnpm install eslint –save-dev
初始化
npm eslint –init
// 抉择配置
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you’ve selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes
rules 配置
解决了下面的问题之后，就能够依据官网文档增加 rules 配置了，次要是依据公司或者集体开发习惯定制规定。
// eslint-disable-next-line no-undef
module.exports = {
‘env’: {
'browser': true,
'es2021': true,
'vue/setup-compiler-macros': true},
‘parser’: ‘vue-eslint-parser’,
‘extends’: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended'],
‘parserOptions’: {
'ecmaVersion': 'latest',
'parser': '@typescript-eslint/parser',
'sourceType': 'module'},
‘plugins’: [
'vue',
'@typescript-eslint'],
// rules 配置文档 http://eslint.cn/docs/rules/
‘rules’: {
// -- 以下是 Possible Errors JS 代码中的逻辑谬误相干
'no-extra-parens': 'error', // 禁止不必要的括号
// "no-console": "error" // 不容许打印 console.log
'no-template-curly-in-string': 'error', // 禁止在惯例字符串中呈现模板字符串语法 ${xxx}
// -- 以下是 Best Practices 最佳实际
'default-case': 'error', // 强制 switch 要有 default 分支
'dot-location': ['error', 'property'], // 要求对象的点要跟属性同一行
'eqeqeq': 'error', // 要求应用 === 和 !==
'no-else-return': 'error', // 禁止在 else 前有 return，return 和 else 不能同时存在
'no-empty-function': 'error', // 禁止呈现空函数，无意而为之的能够在函数外部加条正文
'no-multi-spaces': 'error', // 禁止呈现多个空格，如 === 前后能够有一个空格，然而不能有多个空格
'no-multi-str': 'error', // 禁止呈现多行字符串，能够应用模板字符串换行
'no-self-compare': 'error', // 禁止本身比拟
'no-unmodified-loop-condition': 'error', // 禁止变化无穷的循环条件，如 while 条件，避免死循环
'no-useless-concat': 'error', // 禁止没有必要的字符串拼接，如 'a'+'b' 应该写成 'ab'
'require-await': 'error', // 禁止应用不带 await 的 async 表达式
// -- 以下是 Stylistic Issues 主观的代码格调
'array-element-newline': ['error', 'consistent'], // 数组元素要统一的换行或者不换行
'block-spacing': 'error', // 强制函数 / 循环等块级作用域中的花括号内前后有一个空格（对象除外）'brace-style': ['error', '1tbs', { 'allowSingleLine': true}], // if/elseif/else 左花括号要跟 if.. 同行，右花括号要换行；或者全副同一行
'comma-dangle': ['error', 'only-multiline'], // 容许在对象或数组的最初一项（不与完结括号同行）加个逗号
'comma-spacing': 'error', // 要求在逗号前面加个空格，禁止在逗号后面加一个空格
'comma-style': 'error', // 要求逗号放在数组元素、对象属性或变量申明之后，且在同一行
'computed-property-spacing': 'error', // 禁止在计算属性中呈现空格，如 obj['a']是错的，obj['a']是对的
'eol-last': 'error', // 强制文件的开端有一个空行
'func-call-spacing': 'error', // 禁止函数名和括号之间有个空格
'function-paren-newline': 'error', // 强制函数括号内的参数统一换行或统一不换行
'implicit-arrow-linebreak': 'error', // 禁止箭头函数的隐式返回 在箭头函数体之前呈现换行
'indent': ['error', 2], // 应用统一的缩进，2 个空格
'jsx-quotes': 'error', // 强制在 jsx 中应用双引号
'key-spacing': 'error', // 强制对象键值冒号前面有一个空格
'lines-around-comment': 'error', // 要求在块级正文 /**/ 之前有一个空行
'multiline-comment-style': 'error', // 多行正文同一个格调，每一行后面都要有 *
'new-cap': 'error', // 要求构造函数首字母大写
'newline-per-chained-call': ['error', { 'ignoreChainWithDepth': 2}], // 链式调用长度超过 2 时，强制要求换行
'no-lonely-if': 'error', // 禁止 else 中呈现独自的 if
'no-multiple-empty-lines': 'error', // 限度最多呈现两个空行
'no-trailing-spaces': 'error', // 禁止在空行应用空白字符
'no-unneeded-ternary': 'error', // 禁止多余的三元表达式，如 a === 1 ? true : false 应缩写为 a === 1
'no-whitespace-before-property': 'error', // 禁止属性前有空白，如 console. log(obj['a'])，log 后面的空白有问题
'nonblock-statement-body-position': 'error', // 强制单行语句不换行
'object-curly-newline': ['error', { 'multiline': true}], // 对象数属性要有统一的换行，都换行或都不换行
'object-curly-spacing': ['error', 'always'], // 强制对象 / 解构赋值 /import 等花括号前后有空格
'object-property-newline': ['error', { 'allowAllPropertiesOnSameLine': true}], // 强制对象的属性在同一行或全换行
'one-var-declaration-per-line': 'error', // 强制变量初始化语句换行
'operator-assignment': 'error', // 尽可能的简化赋值操作，如 x =x+1 应简化为 x +=1
'quotes': ['error', 'single'], // 要求字符串尽可能的应用单引号
'semi': ['error', 'never'], // 不要分号
'semi-spacing': 'error', // 强制分号前面有空格，如 for (let i=0; i<20; i++)
'semi-style': 'error', // 强制分号呈现在句末
'space-before-blocks': 'error', // 强制块（for 循环 /if/ 函数等）后面有一个空格，如 for(...){}是错的，花括号后面要空格：for(...) {}
'space-infix-ops': 'error', // 强制操作符（+-/*）前后有一个空格
'spaced-comment': 'error', // 强制正文（// 或 /*）前面要有一个空格
// -- 以下是 ECMAScript 6 ES6 相干的
'arrow-body-style': 'error', // 以后头函数体的花括号能够省略时，不容许呈现花括号
'arrow-parens': ['error', 'as-needed'], // 箭头函数参数只有一个时，不容许写圆括号
'arrow-spacing': 'error', // 要求箭头函数的 => 前后有空格
'no-confusing-arrow': 'error', // 禁止在可能与比拟操作符混同的中央应用箭头函数
'no-duplicate-imports': 'error', // 禁止反复导入
'no-useless-computed-key': 'error', // 禁止不必要的计算属性，如 obj3={['a']: 1}, 其中 ['a'] 是不必要的，间接写 'a'
'no-var': 'error', // 要求应用 let 或 const，而不是 var
'object-shorthand': 'error', // 要求对象字面量应用简写
'prefer-const': 'error', // 要求应用 const 申明不会被批改的变量
'prefer-destructuring': ['error', {
'array': false,
'object': true
}, {'enforceForRenamedProperties': true}], // 要求优先应用构造赋值,enforceForRenamedProperties 为 true 将规定利用于重命名的变量
'prefer-template': 'error', // 应用模板字符串，而不是字符串拼接
'rest-spread-spacing': 'error', // 扩大运算符... 和表达式之间不容许有空格，如... re1 谬误，应该是...re1
'template-curly-spacing': 'error', // 禁止模板字符串 ${}内前后有空格}
}
webstorm 配置 ESLint
将下载 eslint 的地位复制到这个“ESLint 软件包”处