关于前端:Vue3ts配置Eslint

32次阅读

共计 4625 个字符,预计需要花费 12 分钟才能阅读完成。

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

正文完
 0