项目初始化

官方推荐使用 create vue

create-vue 是一个官方的 Vue 项目脚手架工具，用来快速创建 Vue 3 项目。默认情况下，它使用 Vite 作为构建工具：

pnpm create vue@latest

上述操作中，基于 vite 内置了 ts 依赖，快速创建项目可以说非常方便！

rem 适配 && 路径别名

rem 适配

# /src/utils/rem.ts
// 基准大小
const baseSize = 37.5
function setRem() {
  const scale = document.documentElement.clientWidth / 750
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'
}

// 初始化
setRem()
window.onresize = function () {
  setRem()
}
// 这个到处看起来没什么用，然而却是没什么用
export default baseSize

// 然后在 main.ts 中：
import '@/utils/rem' // 引入 rem 适配方案
// ✅ 会触发 rem 适配逻辑并绑定监听事件，全局自动生效

路径别名

tsconfig.app.json 文件中需要配置别名路径

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","src/**/*.ts","src/**/*.d.ts","src/**/*.tsx",],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    // 这里配置了路径别名
    "paths": {
      "@/*": ["./src/*"],
      "@": ["./src"]
    },
    "noImplicitAny": false,
    "allowJs": true,
    "skipLibCheck": true
  }
}

eslint + prettier

系统梳理 eslint

一句话：在运行代码前，发现语法错误和潜在bug

ESlint 扩展会优先去查找项目根目录中的 eslint.config.js 配置文件，并且包括配置文件所提到的 ESlint 插件，也就是 npm 依赖包，是的没错，ESlint 扩展本身所需的 ESlint 版本和 ESlint 插件，都是来自于 node_modules，你可以试着把这个目录删了，vscode 中的 ESlint 扩展就会报错，无法运行。

但你启用 vscode 中的 ESlint 扩展之后，并不会对所有文件生效，你还需要配置 ESlint 扩展的设置来对所需的文件启用校验。

**粗暴提示：**从 ESLint v9 开始（也包括 v8 的 flat config 实验特性），配置文件正式采用了「扁平化（Flat Config）」格式，并且：

🚨 ESLint 9 完全移除了旧版 .eslintrc 系列配置支持。

新版的配置文件，直接在代码块中进行说明：

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import stylistic from '@stylistic/eslint-plugin'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
    plugins: {
      // '@stylistic': stylistic,
    },
    rules: {
      // semi: ['error', 'never'], // 不允许分号结尾
      // '@stylistic/indent': ['error', 2],
      // '@stylistic/no-multiple-empty-lines': "error",
      // '@stylistic/semi': ['error', 'never'],
    },
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
  // ✅ ✨ 插入推荐风格规则（官方建议的方式）
  stylistic.configs.recommended,
)

ps：看再多的大佬对eslint+prettier的使用进行吹牛，也不如去看半小时官方文档！

prettier再回顾

一句话：Prettier 更侧重于统一项目的代码风格。

因此，两者配合一起使用，比较好。

📦 @stylistic 插件本来的目的是什么？

它的目标是把 ESLint v9 中移除的格式规则（如 semi、indent 等）重新实现为插件。

但：

❗这套规则并不是为了和 Prettier 并用，而是：

• 给不使用 Prettier 的项目提供 ESLint 的格式检查能力；
• 或者你希望用 ESLint 的 autofix + CI 而不用 Prettier。

---

✅ 官方推荐的两种做法（你只能选一个）

方案	工具	格式规则由谁管	推荐人群
✅ 方案 A（主流）	ESLint + Prettier	Prettier	大多数团队、Vue 官方、Vite 官方
✅ 方案 B（少数）	ESLint + @stylistic	@stylistic	不想用 Prettier，只想 ESLint 统一管

---

💥 如果你强行混用会怎样？

比如你配置：

stylistic.configs.recommended,
skipFormatting,
Prettier 插件,

就会出现这些问题：

• ESLint 提示你：缺少分号；
• Prettier 保存时自动移除分号；
• 你保存一次 VSCode 又被 Prettier 格式化；
• Git 上永远显示文件被格式化但有规则错误；
• 你的 CI 永远在红绿交替中崩溃。

---

✅ 推荐方案：Vue 项目最佳实践

🔧 配置推荐如下：

ts复制编辑// eslint.config.js
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
  {
    name: 'linting',
    files: ['**/*.{ts,vue}'],
    rules: {
      // 这里不要启用 @stylistic 格式类规则
    }
  },
  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting, // 👈 禁用所有格式检查
)

然后：

• 用 .prettierrc 管格式（semi、quotes、printWidth）
• 用 ESLint 管逻辑错误（如 no-unused-vars、no-undef、vue/no-mutating-props）

---

✅ 最终建议

场景	是否推荐使用 @stylistic
✅ 不使用 Prettier，全部交给 ESLint	推荐
✅ 使用 Prettier 管格式	❌ 不要使用 @stylistic 推荐配置
✅ 想自定义格式化规则（不用 Prettier）	可用 @stylistic 替代传统 ESLint 格式规则

---

如果你已经在用 Prettier，就 不要用 stylistic.configs.recommended，你只需要：

import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

即可。

硬菜

如果使用 ESLint，需要安装 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。它会关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。Stylelint 有一个类似的配置：stylelint-config-prettier

（请参阅 Prettier 与 Linter 了解有关格式化与 linting 的更多信息，与 Linters 集成 了解有关配置 linters 的更多深入信息，如果需要，请参阅 相关项目 了解更多集成可能性。）

而， eslint-config-prettier 的任务是：关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。

而，我们迫切需要的，是 eslint-plugin-prettier ！！将 Prettier 的格式化规则作为 ESLint 规则运行的插件，让 ESLint 报告并修复代码格式问题。

先安排上再说：

pnpm install --save-dev eslint-plugin-prettier eslint-config-prettier
pnpm install --save-dev --save-exact prettier

Configuration (new: eslint.config.js)

For flat configuration, this plugin ships with an eslint-plugin-prettier/recommended config that sets up both eslint-plugin-prettier and eslint-config-prettier in one go.

Import eslint-plugin-prettier/recommended and add it as the last item in the configuration array in your eslint.config.js file so that eslint-config-prettier has the opportunity to override other configs:

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

module.exports = [
  // Any other config imports go at the top
  eslintPluginPrettierRecommended,
];

This will:

• Enable the prettier/prettier rule.
• Disable the arrow-body-style and prefer-arrow-callback rules which are problematic with this plugin - see the below for why.
• Enable the eslint-config-prettier config which will turn off ESLint rules that conflict with Prettier.

说人话就是：eslint-plugin-prettier 并不内置多个格式规则，它只提供一条 prettier/prettier 规则，用来让 ESLint 调用 Prettier 并把格式问题当成 ESLint 错误报告出来。

它的生效原理为：已经为项目安装并注册了 prettier 插件，并告诉 ESLint：

「我知道有一个插件叫 prettier，它定义了一条规则叫 prettier。」

eslintPluginPrettierRecommended 是 eslint-plugin-prettier 插件提供的一套推荐配置，它等价于：

// ✅ 手动写规则
{
  rules: {
    'prettier/prettier': 'error'
  }
}

总结一句话：

eslint-plugin-prettier 使用的规则，最终来源就是你的 .prettierrc 或 prettier.config.js 配置文件中的设置，比如 semi、singleQuote、printWidth 等。

ps：Prettier 官方支持多种配置文件格式，可以任选一种来写你的配置，.prettierrc.json 只是其中一种。

---

🗂️ Prettier 支持的配置文件格式（官方支持）：

文件名	格式	说明
.prettierrc	JSON 或 YAML	没有后缀，自动按 JSON 或 YAML 解析
.prettierrc.json	JSON	✅ 最常见格式之一（也是你用的）
.prettierrc.yaml / .prettierrc.yml	YAML	比较少用
.prettierrc.js	JavaScript	需要逻辑时使用（如条件判断）
prettier.config.js	JavaScript	同 .prettierrc.js，但命名更明确
package.json 中的 "prettier" 字段	JSON	小型项目可用，但容易混乱