@vanwei/eslint-config

该规范由四套规则组成:

• javascript -> JavaScript规范
• vue2 -> 针对vue2的规范
• typescript -> typescript规范
• vue3 -> 针对vue3的规范 以上四套规则，可根据业务需求自由组合，下面是常见使用场景的相关使用方法

配置分为三步：

• 配置package.json, 配置devDependencies相关依赖和lint指令
• 安装@vanwei/eslint-config, 安装最新版本的规范
• 配置.eslintrc.js

在涉及到ts中涉及到

• 配置tsconfig

1、javascript规范使用方法

1.1 package.json

{
  // ...other config
  "scripts": {
    // ...other config
    "lint": "eslint *.js"
  },
  "devDependencies": {
    // ...other config
    "@babel/eslint-parser": "^7.12.16",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0"
  }
}

1.2 安装eslint-config

yarn add -D @vanwei/eslint-config

1.3 .eslintrc.js配置

module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'module',
    parser: 'babel-eslint',
    ecmaVersion: 2015
  },
  plugins: ['html'],
  extends: [
    '@vanwei/eslint-config/javascript'
  ]
};

2、js + vue2规范使用方法

2.1 pagege.json

{
  // ...other config
  "scripts": {
    // ...other config
    "lint": "vue-cli-service lint"
  },
  "devDependencies": {
    // ...other config
    "@babel/eslint-parser": "^7.12.16",
    // "@vue/eslint-config-standard": "^6.1.0",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^9.4.0",
  }
}

2.2 安装eslint-config

yarn add -D @vanwei/eslint-config

2.3 .eslintrc.js配置

// config for vue2
module.exports = {
  root: true,
  // env: { node: true },
  parserOptions: {
    sourceType: 'module',
    parser: 'babel-eslint'
  },
  parser: 'vue-eslint-parser',
  plugins: ['html'],
  extends: [
    '@vanwei/eslint-config/vue2'
  ]
};

3 typescript规范使用

package.json

{
  "scripts": {
    // ...other config
    "lint": "eslint *.ts"
  },
  "devDependencies": {
    // ...other config
    "@typescript-eslint/eslint-plugin": "^5.19.0",
    "@typescript-eslint/parser": "^5.19.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.13.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "typescript": "^4.6.3"
    // ...other config
  },
  "dependencies": {
    // ...other config
    "@vanwei/eslint-config": "^0.0.5"
  }
}

3.2 安装eslint-config

yarn add -D @vanwei/eslint-config

3.3 tsconfig.json最简配置

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "strict": true,
    "sourceMap": true,
    "baseUrl": ".",
  },
  "include": [
    "src/**/*.ts",
    ".eslintrc.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

3.4 .eslintrc.js

module.exports = {
  root: true,
  env: { node: true },
  extends: [
    '@vanwei/eslint-config/typescript'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    tsconfigRootDir: __dirname,
    project: 'tsconfig.json'
  },
  plugins: ['@typescript-eslint', 'html']
};

4、vue3+ts规范使用

4.1 package.json

{
  // ...other config
  "devDependencies": {
    // ...other config
    "@typescript-eslint/eslint-plugin": "^5.19.0",
    "@typescript-eslint/parser": "^5.19.0",
    // "@vue/cli-plugin-eslint": "~5.0.0",
    // "@vue/cli-plugin-typescript": "~5.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.13.0",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^9.4.0",
    "typescript": "^4.6.3"
  }
}

4.2 安装eslint-config

yarn add -D @vanwei/eslint-config

4.3 .eslintrc.js

module.exports = {
  root: true,
  env: { node: true },
  extends: [
    '@vanwei/eslint-config/typescript',
    '@vanwei/eslint-config/vue3'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    tsconfigRootDir: __dirname,
    project: 'tsconfig.json'
  },
  parser: 'vue-eslint-parser',
  plugins: ['@typescript-eslint', 'html']
};

4.4 配置tsconfig.json

根目录下面有些可能是js文件，为避免报错，请将他们的地址写入到tsconfig.json的include中

如根目录下面有jest.config.js文件，若没有配置会导致一下错误：

  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.

  The file does not match your project config: jest.config.js.

  The file must be included in at least one of the projects provided.

同理配置.eslintrc.js文件

// tsconfig.json
{
  // ...other config
  "include": [
    // ...other config
    "jest.config.js",
    ".eslintrc.js"
  ]
  // ...other config
}