vue3代码格式化 - 详细可靠（使用脚手架和不使用脚手架）

下面是为 Vue3 项目手动配置 ESLint + Prettier，实现 “保存时自动格式化” 的详细步骤：

说明：

1. 现在Vue3脚手架的package.json默认设置了type:module配置，也是就ES模块语法，因此要注意eslint和prettier配置默认文件名的写法和ignore文件名写法，具体写法可自行搜索
2. 此配置是安装Vue3脚手架实现的，命令是npm create vue@latest，只勾选了Router和Pinia选项，没有勾选eslint和prettier任何东西，另外如果需要ts支持可能还需要一些额外的配置
3. Node版本为23.3.0

1 . 安装依赖

首先在项目根目录打开终端，安装所需的开发依赖：

# 安装 ESLint 9.x 及适配的 Vue 插件和 Prettier 整合包
# 注意现在最先版本已达到 9.0以上，9以上版本和8.x版本配置有不小区别，ESLint 9.0.0 及以上彻底废弃了传统的 .eslintrc.* 配置文件（包括 .eslintrc.cjs），改用全新的 eslint.config.js 配置格式，同时也不再支持 .eslintignore 文件（需要将忽略规则写到配置文件中）
# ESLint 9.x 只认 eslint.config.js（必须用这个文件名），且配置格式为 ES 模块语法（因为你的项目是 ESM）
npm install eslint @eslint/js eslint-plugin-vue @vue/eslint-config-prettier@latest prettier --save-dev

• @eslint/js：ESLint 9.x 分离出的核心规则包（必须安装）
• eslint-plugin-vue@latest：适配 ESLint 9.x 的 Vue 插件
• @vue/eslint-config-prettier@latest：适配 ESLint 9.x 的 Vue + Prettier 整合包

这是安装好后的devDependencies：

2 . 创建配置文件

在项目根目录创建以下 3 个配置文件：

2.1 ESLint 配置文件（eslint.config.js）

import eslint from '@eslint/js';
import vue from 'eslint-plugin-vue';
import vuePrettier from '@vue/eslint-config-prettier';

export default [
  // 1. 基础 ESLint 推荐规则
  eslint.configs.recommended,
  // 2. Vue3 核心规则（flat 格式）
  ...vue.configs['flat/essential'],

  // 3. Vue 文件的解析配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
  },

  // 4. 整合 Prettier（关键修正：直接使用对象，不展开）
  vuePrettier,

  // 5. 自定义规则
  {
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'vue/multi-word-component-names': 'off',
    },
  },

  // 6. 忽略文件配置
  {
    ignores: ['node_modules/', 'dist/', '*.svg', '*.sh', 'public/', '.DS_Store'],
  },
];

2.2 Prettier 配置文件（.prettierrc.cjs）

// .prettierrc.cjs
module.exports = {
  printWidth: 100, // 每行代码的最大长度（超出会自动换行），默认 80，这里设置为 100
  tabWidth: 2, // 缩进空格数，默认 2
  useTabs: false, // 是否使用制表符（Tab）代替空格缩进，false 表示使用空格
  singleQuote: true, // 字符串是否使用单引号（true 单引号，false 双引号）
  semi: true, // 语句末尾是否加分号（true 加分号，false 不加分）
  trailingComma: 'all', // 对象/数组最后一个元素后是否加逗号（all 表示始终添加，none 不添加）
  bracketSpacing: true, // 对象字面量的大括号前后是否加空格（{ foo: bar } 而非 {foo: bar}）
  arrowParens: 'always', // 箭头函数的参数是否始终加括号（(x) => x 而非 x => x）
  vueIndentScriptAndStyle: false, // Vue 单文件组件中，<script> 和 <style> 标签内的代码是否缩进（与 <template> 保持一致）
};

2.3 忽略文件（.prettierignore）

创建 .prettierignore（指定不需要格式化的文件）：

# 依赖目录
node_modules
# 打包输出目录
dist
# 其他文件
*.svg
*.sh
public
.DS_Store

3 . 配置 VS Code 自动格式化

确保 VS Code 安装了以下插件并启用（在扩展面板搜索安装）：

• ESLint（由 Microsoft 提供）
• Prettier - Code formatter（由 Prettier 团队提供）

打开 VS Code 工作区设置

• 项目根目录创建.vscode文件夹
• .vscode文件号下创建 settings.json 文件，添加以下配置：

// 注意：JSON文件里不能有注释，配置的时候记得把注释去掉
{
  "editor.formatOnSave": true, // 启用保存时自动格式化文档
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false // 关闭保存时ESLint自动修复（避免与Prettier冲突）
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 全局默认格式化工具设置为Prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 针对.vue文件，指定Prettier为格式化工具
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 针对.js文件，指定Prettier为格式化工具
  },
  "prettier.resolveGlobalModules": false, // 禁用Prettier插件查找全局安装的版本
  "eslint.useFlatConfig": true, // 启用ESLint 9.x+的flat config配置格式
  "eslint.nodePath": "./node_modules", // 告诉ESLint插件优先使用项目内的依赖
  // 以下两行配置可能不能被识别，当格式化不生效时再添加试试
  // "prettier.path": "./node_modules/prettier", // 强制Prettier插件使用项目内安装的Prettier版本
  // "vue.format.enable": false // 禁用Vue官方扩展的内置格式化功能（避免与Prettier冲突）
}

4 . 验证配置

新建或打开一个 Vue 组件（如 src/components/HelloWorld.vue），故意写一些不符合规则的代码：

<template>
  <div><p>hello world</p></div> // 层级不对
</template>

<script setup>
let name = 'test' // 缺少分号（Prettier 会自动补全）
console.log(name)
</script>

按 Ctrl+S（Windows）或 Cmd+S（Mac）保存文件，观察代码是否自动格式化：

• 单引号是否保留
• 语句末尾是否自动添加分号
• 缩进是否统一为 2 个空格

可以使用以下命令判断eslint和prettier是否正确配置：

1. npx eslint src/components/HelloWorld.vue
2. npx prettier --write src/App.vue

5 . 常见问题解决

5.1 . 保存后未格式化：

ctrl+shift+p，输入prettier:Format Document，选择格式化文档（Format Document）选项，如果弹出提示“vue”文件有多个格式化程序。其中一个应配置为默认格式化程序，那么选择prettier就行，然后ctrl+s保存后就能自动格式化文档了，这个问题一般是与vue(official)这个插件冲突引起的

5.2 . 修改prettier配置文件，不生效

一般是缓存问题，关掉IDE重新打开就好了

6 . 使用脚手架

如果选择使用脚手架，则直接勾选eslint和prettier配置项即可，然后新建settings.json文件，写入上方settings文件内容即可，此时应该会生效

脚手架的eslint.config.js的写法更加完整、专业、可靠，并且如此配置更加简洁方便，新手代码格式化推荐使用脚手架的方式