Prettier （代码格式化）配置详解

Prettier （代码格式化）配置详解

**  阅读参考版（带注释，仅查看，不要直接保存使用）**

{
  "$schema": "https://json.schemastore.org/prettierrc",
  // 每行最大字符，超过则触发换行
  "printWidth": 100,
  // 缩进2空格，vue项目通用
  "tabWidth": 2,
  // 不使用tab制表符，全部空格缩进
  "useTabs": false,
  // js代码末尾不加分号，对齐若依风格
  "semi": false,
  // js字符串优先使用单引号
  "singleQuote": true,
  // 对象key只有必要的时候才加引号
  "quoteProps": "as‑needed",
  // 对象、数组最后一项后面不要尾随逗号
  "trailingComma": "none",
  // 对象大括号内部两侧保留空格 { a: 1 }
  "bracketSpacing": true,
  // vue标签闭合>和最后一个属性同一行
  "bracketSameLine": true,
  // ✅核心：html/vue标签每个属性强制单独占一行，解决单行挤一堆属性
  "singleAttributePerLine": true,
  // script、style标签里面代码进行缩进
  "vueIndentScriptAndStyle": true,
  // html空白处理，遵循css渲染规则
  "htmlWhitespaceSensitivity": "css"
}

**  正式使用【直接复制保存为 .prettierrc】（无注释，可直接运行格式化））**

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "singleAttributePerLine": true,
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "css"
}

{
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

逐项解释

1. "$schema": "https://json.schemastore.org/prettierrc"

不是格式化规则，是给 VSCode 用的智能提示。

• 作用：告诉编辑器这是 prettier 配置文件，写配置的时候自动提示、补全、报错。
• 可以删掉，不影响格式化效果，只提升写配置的体验。

---

2. "printWidth": 100

打印宽度：一行最多允许 100 个字符

• 当一行代码字符超过 100，prettier 就会自动换行拆分。
• Vue 模板里标签属性，行太长就拆到多行。

注意：不是硬强制，如果标签很短，即使小于 100 字符也不会强行拆开。

例子：

<!-- 短，保留一行 -->
<el-input v-model="name"></el-input>

<!-- 太长，属性会换行 -->
<el-input
  v-model="loginForm.password"
  type="password"
  placeholder="请输入密码"
></el-input>

---

3. "singleAttributePerLine": true

✅ 每一个标签属性独占一行（就是你想要的效果）

Vue 模板、html 标签生效。

• true：一个属性占一行。

  <el-form
  ref="loginFormRef"
  :model="loginForm"
  label-width="80px"

• false：允许多个属性挤同一行，只要不超过 printWidth。

⚠️ 这个是实现不要单行堆一堆属性的核心开关！

---

4. "bracketSameLine": true

仅针对 JSX / Vue 模板标签闭合尖括号位置

• true：闭合 > 和最后一个属性放在同一行

  
  

• false：闭合 > 单独另起一行

  <el-input
  v-model="password"
  type="password"

若依项目一般习惯用 true。

---

5. "semi": false

语句末尾分号

• false：js 代码结尾不加分号

  const name = 'admin'
  const password = '123456'

• true：每条语句末尾自动加上分号

  const name = 'admin';
  const password = '123456';

---

6. "singleQuote": true

字符串使用单引号

• true：js 字符串优先 '单引号'

  const url = '/api/login'

• false：优先 "双引号"

⚠️注意：HTML/Vue 模板属性不受这个控制，模板永远双引号，只针对 JS 代码字符串。

整套配置格式化出来的 Vue 效果

<el-form
  ref="loginFormRef"
  :model="loginForm"
  label-width="80px"
>
  <el-form-item label="账号">
    <el-input v-model="loginForm.username"></el-input>
  </el-form-item>
</el-form>

小坑提醒

1. singleAttributePerLine: true Prettier 2.6 版本以上才支持，版本太低不生效。
2. 修改完.prettierrc，VSCode 需要重启格式化，Alt+Shift+F才会生效。
3. 如果你同时开了 ESLint 自动修复，避免规则冲突，建议安装 eslint-config-prettier。

和若依风格对比

若依 vue3 项目配置：

• singleQuote: true
• printWidth:100
• semi: false
  和你这份配置风格基本对齐。