Vue3 + Vite + ESlint + Prettier 配置流程

1. 创建 Vue 项目

npm create vite@latest

# 输入项目名称（例如：my_project）
? Project name: › vite-project

# 选择安装的脚手架（这里选择 vue）
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Others

# 选择一个变体
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗

# 项目创建完成
Done. Now run:

  cd vite-project
  npm install
  npm run dev

2. 安装 ESlint

npm install -D eslint

2.1 初始化 ESlint 配置

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

2.2 选择模式

? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

2.3 选择项目使用什么类型的模块

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

2.4 选择项目框架

? Which framework does your project use? … 
  React
❯ Vue.js
  None of these

2.5 是否使用 TypeScript（由于上方创建项目没有使用 TS，所以这里选择 No）

? Does your project use TypeScript? › No / Yes

2.6 项目会运行到什么地方（根据实际情况自行选择）

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

2.7 选择配置文件格式

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

2.8 是否要安装 eslint-plugin-vue@latest（可以选择 Yes，后面就可以不单独安装了）

作用：在浏览器中可以显示错误提示，如果不需要可以不安装

eslint-plugin-vue@latest
? Would you like to install them now? › No / Yes

2.9 选择包管理器

? Which package manager do you want to use? … 
❯ npm
  yarn
  pnpm

2.10 完成（在项目根目录会生成 .eslintrc.js/.eslintrc.cjs 文件）

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

eslint 详细配置：Documentation - ESLint - Pluggable JavaScript Linter

3. 安装 vite-plugin-eslint（如果在步骤 3.7 中选择的 Yes，可以忽略此步）

vite-plugin-eslint 插件可以让不符合 eslint 规范的错误显示在浏览器中，如不需要，可以忽略此步骤

npm install -D vite-plugin-eslint

4. 配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

export default {
  plugins: [
    vue(),
    eslintPlugin(),
  ]
}

vite-plugin-eslint 详细配置：

vite-plugin-eslint

GitHub - gxmari007/vite-plugin-eslint: 🚨 ESLint plugin for vite

5. 安装 prettier

npm i -D prettier
# eslint prettier 配置
npm i -D eslint-config-prettier
# eslint 兼容插件
npm i -D eslint-plugin-prettier

5.1 配置 prettier

根目录下创建 .prettierrc 文件

{
  tabWidth: 4,               // 使用4个空格缩进
  semi: false,               // 代码结尾是否加分号
  trailingComma: 'none',     // 代码末尾不需要逗号
  singleQuote: true,         // 是否使用单引号
  printWidth: 120,           // 超过多少字符强制换行
  arrowParens: 'avoid',      // 单个参数的箭头函数不加括号 x => x
  bracketSpacing: true,      // 对象大括号内两边是否加空格 { a:0 }
}

prettier 详细配置：Options · Prettier

5.2 配置 .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:prettier/recommented", // eslint prettier 兼容插件
      	"eslint-config-prettier" // eslint 使用 prettier 配置
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "prettier" // 引入规范插件  prettier <==>  eslint-plugin-prettier
    ],
    "rules": {
        "vue/multi-word-component-names": "off" // 关闭必须使用多个单词作为组件名称的检测
    }
}

6. 配置 VScode

6.1 安装“ESlint”插件【作者：Microsoft】

6.2 安装“Prettier - Code formatter”插件【作者：Prettier】

6.3 格式化代码选择 prettier

仅以此篇文章献给不想面对💩山的程序员