装置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软件包”处