代码规范工具（二）ESLint配置ESLint8 .eslintrc 基于vue3 typescript uni-app

ESLint

用于查找并修复代码中的问题

官网地址：eslint.org/

本文章基于Vue3、TypeScript配置ESLint

由于@typescript-eslint正式版不支持ESLint9，所以本文章使用ESLint8

安装

# 如果是@latest将会生成eslint.config.js
# eslint8使用的是.eslintrc.js
npm init @eslint/config@0.4.6

执行命令后根据需求选择安装选项：

√ 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   
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · yarn

由于安装的eslint版本是最新版，所以要手动重新安装：

#npm
npm i -D eslint@8.57.0
#yarn
yarn add -D eslint@8.57.0
#pnpm
pnpm add -D eslint@8.57.0
#bun
bun add -D eslint@8.57.0

生成的 .eslintrc.js如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "vue"],
  rules: {},
};

其他插件说明

vue-eslint-parser .vue文件解析器，此解析器允许我们对<template>文件进行 lint。
eslint-config-prettier 关闭所有不必要的或可能与Prettier冲突的规则。
eslint-plugin-prettier Prettier作为ESLint规则运行，并将差异报告为单独的ESLint问题。
eslint-config-standard JavaScript标准样式的ESLint可共享配置。
eslint-plugin-promise 配置promise规则。
eslint-plugin-import 支持ES2015+(ES6+)导入/导出语法的linting，并防止文件路径和导入名称拼写错误的问题。
eslint-plugin-n 配置Node规则。

配置

安装插件:

#npm
npm i -D vue-eslint-parser eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise
#yarn
yarn add -D vue-eslint-parser eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise
#pnpm
pnpm add -D vue-eslint-parser eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise
#bun
bun add -D vue-eslint-parser eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise

修改 .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  globals: { // uni-app请添加这段
    uni: true,
    wx: true
  },
  extends: [
    'standard',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    ...
  },
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ]
};

在项目根目录下创建忽略文件 .eslintignore，并写入需要忽略的文件：
```
dist
node_modules
public
.husky
.bin
docs
html
.vscode
.idea
*.sh
*.md
```

VSCode

安装ESLint

在setting.json中编辑

{
 	...
    "editor.codeActionsOnSave": {
    	"source.fixAll.eslint": "explicit"
  	}
  	"eslint.experimental.useFlatConfig": false
}

配合Prettier使用

安装插件，关闭所有不必要的或可能与Prettier冲突的规则，配置Prettier规则

#npm
npm install -D eslint-config-prettier eslint-plugin-prettier
#yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier
#pnpm
pnpm add -D eslint-config-prettier eslint-plugin-prettier
#bun
bun add -D eslint-config-prettier eslint-plugin-prettier

修改 .eslintrc.js:

module.exports = {
  ...
  extends: [
     ...
    'plugin:prettier/recommended'
  ],
  rules: {
	...
    'prettier/prettier': ['error', { endOfLine: 'auto' }] // 关闭行结尾报错
  }
};

配合unplugin-auto-import使用

配置插件生成 .eslintrc-auto-import.json全局变量配置：

AutoImport({
  eslintrc: {
    enabled: true
  }
})

修改 .eslintrc.js:

module.exports = {
  ...
  extends: [
     ...
    './.eslintrc-auto-import.json'
  ]
};