eslint-config-team v1.0.6

eslint-config-team

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
"error" or 2 - turn the rule on as an error (exit code will be 1)

安装

npm i -D eslint-config-team

接入

node + ts项目

1. node + ts，接入eslint时，需要安装这三个包, 包版本用如下 或者 最新的即可

"@typescript-eslint/eslint-plugin": "^5.21.0",
"@typescript-eslint/parser": "^5.21.0",
"eslint": "^8.14.0"

2. 而使用此项目时，只需创建.eslintrc.js即可

module.exports = {
  'extends': 'eslint-config-team/lib/typescript/node'
}

ts + vu3 项目

1. ts + vue3接入eslint时，需要安装这三个包, 包版本用如下 或者 最新的即可

"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"eslint": "^8.14.0",
"eslint-plugin-vue": "^8.7.1",

2. 而使用此项目时，只需创建.eslintrc.js

module.exports = {
  'extends': 'eslint-config-team/lib/typescript/vue3'
}

js + vu2 项目

1. ts + vue2接入eslint时，需要安装这三个包, 包版本用如下 或者 最新的即可

"eslint": "^8.14.0",
"eslint-plugin-vue": "^8.7.1",

2. 而使用此项目时，只需创建.eslintrc.js

module.exports = {
  'extends': 'eslint-config-team/lib/javascript/vue2'
}

三种方案

1、node + ts使用规则

'extends': [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    '../../rules/base'
],

2、ts + vue使用规则

'extends': [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended',
    '../../rules/base',
    '../../rules/typescript',
    '../../rules/vue2'
]

3、js + vue使用规则

'extends': [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended',
    '../../rules/base',
    '../../rules/vue2'
],

基础规则

// base rule
module.exports = {
  'rules': {
    // 缩进风格
    'indent': ['error', 2, { 'SwitchCase': 1 }],
    'linebreak-style': [
      'error',
      'windows'
    ],
    // 引号类型
    'quotes': [
      'error',
      'single'
    ],
    // 语句强制没有分号结尾
    'semi': [
      'error',
      'never'
    ],
    // 分号后强制使用空格, 仅当分号不在行尾时才会应用该选项
    'semi-spacing': ['error', {
      'before': false,
      'after': true
    }],
    // 允许必要的转义字符
    'no-useless-escape': 'off',
    // 块必须始终至少有一个前面的空格
    'space-before-blocks': [
      'error',
      'always'
    ],
    // 命名函数在function关键字和函数名之间也需要一个空格，但匿名函数不需要空格
    'space-before-function-paren': [
      'error',
      'never'
    ],
    // 箭头函数的箭头之前/之后需要空格
    'arrow-spacing': ['error', {
      'before': true,
      'after': true
    }],
    // 小括号内不允许空格：disallowing or requiring one or more spaces to the right of ( and to the left of )
    'space-in-parens': ['error', 'never'],
    // 中缀运算符周围需要间距 1 + 1，而不是 1+1
    'space-infix-ops': 'error',
    // 一元运算符的前/后要不要加空格
    'space-unary-ops': ['error', {
      'words': true, // words- 适用于一元单词运算符，例如：new, delete, typeof, void,yield
      'nonwords': false // nonwords- 适用于一元运算符，例如：-, +, --, , ++, !,!!
    }],
    // 注释 // or /* 必须后跟至少一个空格
    'spaced-comment': ['error', 'always'],
    // 不允许模版字符串 括号内有空格，`hello, ${people.name}!` 而不是 `hello, ${ people.name }!`
    'template-curly-spacing': ['error', 'never'],
    // 立即执行函数  (function() { return { y: 1 }})() 而不是 function() { return { y: 1 }}()
    'wrap-iife': ['error', 'inside'],
    // 如果颜色等于红色 if (color === "red") {}；而不是 如果红色等于颜色 if ("red" === color) {}
    'yoda': ['error', 'never'],
    // 变量未分配，优先使用const
    'prefer-const': 'error',
    // 禁止debugger
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 大括号{}内是否允许必要的空格。eg: { name: 'zcl', arr: [1,2,3], ob: { age: 23 } }
    'object-curly-spacing': ['error', 'always'],
    // 不允许在数组括号内使用空格. [1, 2, 3] 也可以 [1,2,3]，但不能 [1, 2, 3 ]
    'array-bracket-spacing': ['error', 'never'],
    // 当变量在定义它们的块之外使用时，该规则会生成警告
    'block-scoped-var': 'error',
    // 使用let or const而不是var
    'no-var': 'error',
    // 类中不要无用的constructor
    'no-useless-constructor': 'error',
    // 允许Promise.reject()不带参数的调用
    'prefer-promise-reject-errors': ['error', { 'allowEmptyReject': true }]
  }
}

typescript规则

module.exports = {
  'rules': {
    // 禁止使用该any类型。用于指定来自 rest 运算符的数组是否被认为是可以的。eg: function foo1(...args: any[]): void {}
    '@typescript-eslint/no-explicit-any': ['error', { 'ignoreRestArgs': true }]
  }
}

vue2 && vue3 规则

// vue2 rule
module.exports = {
  'rules': {
    // 组件 一行可以有多个属性
    'vue/max-attributes-per-line': 'off',
    // 单个标签内容换行 <div>xxx</div> 无需换行
    'vue/singleline-html-element-content-newline': 'off',
    // 组件命名 帕斯卡命名法. MyComponent 而不是 my-component
    'vue/component-definition-name-casing': ['error', 'PascalCase'],
    // 组件命名，可以是一个单词 TodoItem，也可以 Todo
    'vue/multi-word-component-names': 'off',
    // 可以使用v-html
    'vue/no-v-html': 'off',
    // prop参数名建议使用驼峰式，不使用hyphenation边字符 <MyComponent my-prop="prop" />
    'vue/attribute-hyphenation': 'off',
    // 不使用 <MyComponent v-on:custom-event="handleEvent"/> https://eslint.vuejs.org/rules/v-on-event-hyphenation.html
    'vue/v-on-event-hyphenation': 'off'
  }
}

• ts lint
• vue lint
• vue-eslint-parser解析.vue文件：

https://stackoverflow.com/questions/66597732/eslint-vue-3-parsing-error-expected-eslint

https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser