vite集成eslint

1.yarn create vite 创建vite项目

2.yarn add -D eslint vite-plugin-eslint vue-eslint-parser 安装eslint

3.npx eslint --init 初始化eslint
✔ 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, node
✔ 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:
eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

4.安装 vite-plugin-eslint （eslint结合vite使用 该包是用于vite自动检测eslint规范，不符合的会报错）
安装vue解析器 vue-eslint-parser 不装有些地方会报错

5.在vite.config.js中添加
import eslintPlugin from 'vite-plugin-eslint'
plugins: [ vue(), eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] }) ]

修改.eslintrc.cjs 文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "prettier"],
  rules: {
    "prettier/prettier": "error",
    //随便加几条规则测试
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "no-eq-null": 2, //禁止对null使用==或!=运算符
    "no-else-return": 2, //如果if语句里面有return,后面不能跟else语句
    "no-new-object": 2, //禁止使用new Object()
  },
};

6.安装prettier yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier这个是解决和prettier冲突的，自己去看一下官网
eslint-plugin-prettier 让eslint使用prettier规则进行检查
新建.prettierrc.cjs格式化文件

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true, //是否加分号
  singleQuote: false, // true双引号false单引号
  printWidth: 200,
}

新建 .eslintignore #忽略格式化文件（根据项目需求添加）
.eslintrc.cjs