1、配置 Prettier：风格统一的“美颜滤镜” 🎨

1.1、安装插件

npm install -D prettier

1.2、插件配置

配置文件.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid"
}

忽略文件.prettierignore

dist

*.config.js

配置 npm 脚本

"format": "prettier --write src/**/*.{js,ts,vue,jsx,tsx}"

了解更多，请查看Prettier

2、配置 ESLint：智能代码医生 🩺

2.1、安装插件

npm i -D eslint globals @eslint/js typescript-eslint eslint-plugin-vue

2.2、插件配置

配置文件eslint.config.js

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  globalIgnores(["**/*.config.{js,mjs,cjs,ts,mts,cts}"]),
  {
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: {
      globals: globals.browser,
    }
  },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser
      }
    }
  },
  {
    plugins: {},
    rules: {
      // 禁止使用 var 声明变量，使用 var 会触发错误
      'no-var': 'error',
      // 要求类型定义统一使用 interface，违反此规则会触发错误
      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
      // 关闭禁止使用显式 any 类型的规则
      '@typescript-eslint/no-explicit-any': 'off',
      // 关闭 Vue 组件名必须为多单词的规则
      'vue/multi-word-component-names': 'off',
      // 关闭禁止使用异步 Promise 执行器的规则
      'no-async-promise-executor': 'off',
      // 关闭禁止使用未定义变量的规则
      'no-undef': 'off',
    }
  }
]);

配置 npm 脚本

"lint": "eslint src --fix"

了解更多，请查看ESLint

3、解决 ESLint 与 Prettier 冲突 🤝

3.1、安装插件

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

3.2、调整 ESLint 配置

import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  // ...
  eslintConfigPrettier,
  eslintPluginPrettierRecommended
  // ...
])

✅ 关键作用：

• eslint-config-prettier：关闭所有与 Prettier 风格冲突的 ESLint 规则
• eslint-plugin-prettier：让 ESLint 在检查时调用 Prettier，统一输出

4、集成 Vite：开发时实时校验 🚀

4.1、安装插件

npm i -D @nabla/vite-plugin-eslint

4.2、调整 Vite 配置

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

// https://vite.dev/config/
export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      eslintPlugin({
        eslintOptions: {
          cache: false,
          fix: true,
        },
      }),
    ],
  }
})

💡 效果：
开发时在终端实时输出 ESLint 警告/错误，保存即修复，无需手动执行命令！

5、对比：ESLint vs Prettier ✅

维度	ESLint	Prettier
核心目标	代码质量、错误预防、最佳实践	代码风格统一、格式美化
处理范围	逻辑错误、变量使用、类型安全、设计模式	空格、换行、引号、分号、缩进
是否可配置	极高（数千条规则）	中等（约 70 项选项）
是否可自动修复	✅ 大部分规则	✅ 全部规则
是否推荐并用	✅ 必须	✅ 必须
冲突风险	高（需配合 eslint-config-prettier）	低（专为风格设计）
性能影响	中等（静态分析）	极低（纯格式化）

🎯 最佳实践：Prettier 管风格，ESLint 管逻辑，二者互补，缺一不可！