vite3+vue3项目添加ESLint插件

ESLint 主要用于代码规范、统一代码风格。

安装依赖 第一步：安装 eslint 的命令：

yarn add eslint -D

第二步：初始化 ESLint 配置，命令：

npx eslint --init

执行上述命令后，控制台中会有如下步骤： 1）需要安装 @eslint/create-config，问是否继续： 当然需要继续，直接回车； 2）使用 ESLint 来干嘛：我选最后一个 To check syntax, find problems, and enforce code style（检查语法、寻找问题、强制代码风格） 3）使用哪种模块化的方式：肯定选 JavaScript modules (import/export) （几乎我参与的 vue 项目都是 ESModule） 4）项目使用什么框架：Vue.js* 5）项目是否使用 TypeScript：Yes 6）项目运行在什么环境：Browser 7）如何定义项目的代码风格：Use a popular style guide 使用流行的风格 8）在流行的风格中选择其中一种：Standard 9）ESLint 配置文件的格式：JavaScript 10）根据上面选择的，提示需要安装一大堆依赖，是否安装？Yes 11）选择使用什么包管理工具安装：yarn 接下来耐心等待安装依赖。

依赖安装完毕后，项目的根目录下也会自动生成 .eslintrc.cjs 文件（可以将后缀名重命名为 .js）。为了让eslint更适合于vue3，需要修改 eslint的部分配置，将 extends 中的 ‘plugin:vue/essential’ 修改为 vue3 的 ‘plugin:vue/vue3-essential’ 即可。

修改配置

修改后 .eslintrc.cjs 配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

配置插件

上述步骤已经完成 eslint 的引入和配置了，接下来就是配置 vite 的 eslint 插件，该插件可以让 vite 知道项目的 eslint 配置。 1）安装插件为开发依赖，命令：

yarn add vite-plugin-eslint -D

2）在 vite.config.js 中添加该插件：

//...
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    eslint()
  ],
//...
})

配置 idea