# Eslint代码检查

创建项目时会有添加Eslint代码检查选项，它会自动添加Eslint基于Vue3和TS的基础检查规则，并兼容了Prettier，但是它并不支持我们常见的standard或airbnb样式指南，所以在安装时默认不要选择此选项，我们手动来添加Eslint检查。

如果创建项目添加了eslint代码检查选项，我们可以把相关的文件和插件删除，然后再重新添加初始化就行了。

# 安装Eslint

npm install eslint -D

# 初始化Eslint

npx eslint --init
// 或者
npm init @eslint/config

执行该命令后，进行配置选择。选择模式：

语言模块：

框架：

是否支持ts:

代码在哪运行，空格全选：

选择风格：

选择代码风格指南：

生成配置文件格式：

然后安装这些插件：

创建完成后，会自动创建一个相关配置文件 .eslintrc.cjs 或者 .eslintrc.js，创建.cjs是因为，.package.json文件中设置了"type": "module"，如果直接将后缀名改为.js，会报错，需要将"type": "module"删除。有时候两种情况都支持，为了统一我们使用.cjs后缀即可。

// .eslintrc.cjs
module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

# 配置Eslint

下载Vite的插件，配置需要检查的文件

npm install vite-plugin-eslint -D

在vite.config.ts配置

import path from 'path'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    // 配置vite在运行的时候自动检测eslint规范
    eslintPlugin({
      include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']
    })
  ]
})

# 配置.eslintrc.cjs

配置parserOptions.project时，需要区分一下，如果只有一个tsconfig.json文件，project只配置一个就行了，如果tsconfig.json引入了其他配置文件，那么要把这些文件都配置上才行。

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'standard-with-typescript'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json'],
    extraFileExtensions: ['.vue'], // 新增
    ecmaVersion: 'latest'
  },
  plugins: [
    'vue'
  ],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/strict-boolean-expressions': ['off'],
    '@typescript-eslint/prefer-optional-chain': ['off'], // 首选可选链
    '@typescript-eslint/restrict-plus-operands': ['off'], // 是否限制加操作数
    '@typescript-eslint/no-base-to-string': ['off'], // 是否限制加操作数
    '@typescript-eslint/consistent-type-assertions': ['off'], // 一致类型断言
    '@typescript-eslint/no-floating-promises': ['off'], // promise
    '@typescript-eslint/promise-function-async': ['off'], // promise
    '@typescript-eslint/naming-convention': ['off'], // 变量命名规则
    '@typescript-eslint/dot-notation': ['off'], // 点表示法
    '@typescript-eslint/no-extraneous-class': ['off'], // 点表示法
    '@typescript-eslint/space-before-function-paren': ['off'], // 函数括号前的空格
    '@typescript-eslint/consistent-indexed-object-style': ['index-signature' | 'record'], // 接口定义规则
    '@typescript-eslint/array-type': ['off'], // 数组定义规则
  }
}

并且要在tsconfig.json文件的 include 中添加 .eslintrc.cjs和vite.config.ts

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json", "src/**/*.d.ts", "./.eslintrc.cjs", "./vite.config.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

# 执行脚本命令

在package.json中添加执行命令，进行全局格式化和修复，如果不需要可以不执行。如果不想进行修复可以把--fix去掉。

"scripts": {
  "dev": "vite",
  "build": "run-p type-check build-only",
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
}

# 使用Eslint插件

上面的配置在检查代码时每次都要启动项目才能进行，我们可以借助VScode的Eslint插件直接查看报错地方。在VScode中找到Eslint插件安装，启用后会寻找到项目根目录下的.eslintrc.js配置文件, 根据里边的规则对项目代码进行检查，打开文件就可以查看波浪线报错，如果没有就关闭文件重新打开。并且Eslint会根据报错提供修复方式。

# 代码格式化

Vue2中只需要在项目中创建 .prettierrc 文件右键执行格式化，就会默认执行该文件中的格式化风格，但在Vite中此方式失效，格式化需要借助 Prettier 插件才行。

这里我们推荐使用本地格式化方式，或者直接放弃Prettier格式化，使用Volar插件自带的格式化。

本地格式化：

安装Prettier插件和Eslint插件，然后在根目录创建.prettierrc.json文件，在该文件中添加格式化配置，Prettier插件会自动识别.prettierrc.json文件中的配置，然后右键使用Prettier格式化选项。

全局格式化：

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

在 .eslintrc.cjs中添加配置，并把Eslint插件禁用掉，否则会产生很多冲突。

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential', 
    'standard-with-typescript', 
    'plugin:prettier/recommended' // 新增
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json'],
    extraFileExtensions: ['.vue'], // 新增
    ecmaVersion: 'latest'
  },
  plugins: ['vue'],
  rules: {
  }
}

然后执行命令 eslint --fix (待测试)

← 添加Arco Design 多标签页 →