为 Vue3 + TypeScript + Vite 项目配置 Prettier代码格式化

下面是为 Vue3 + TypeScript + Vite 项目单独配置 Prettier 的详细步骤(不包含 ESLint 配置):

1. 安装 Prettier

bash 复制代码
npm install --save-dev prettier

2. 创建 Prettier 配置文件

在项目根目录下创建 .prettierrc.js(或 .prettierrc.json):

javascript 复制代码
module.exports = {
  // 单引号
  singleQuote: true,
  // 句尾不使用分号
  semi: false,
  // 每行代码最大长度
  printWidth: 100,
  // 对象属性末尾加逗号(尽可能)
  trailingComma: 'all',
  // 箭头函数单参数时不加括号
  arrowParens: 'avoid',
  // HTML 文件空格敏感性
  htmlWhitespaceSensitivity: 'ignore',
  // Vue 文件中 script 和 style 标签缩进
  vueIndentScriptAndStyle: true,
  // 换行符自动检测
  endOfLine: 'auto'
}

或者使用 JSON 格式(.prettierrc.json):

json 复制代码
{
  "singleQuote": true,
  "semi": false,
  "printWidth": 100,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto"
}

3. 创建忽略文件

创建 .prettierignore 文件,指定不需要格式化的文件/目录:

复制代码
node_modules
dist
*.md
*.json
*.yaml
*.yml

4. 添加格式化脚本

package.jsonscripts 部分添加:

json 复制代码
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

5. 配置 VS Code(可选)

如果你使用 VS Code,可以安装 Prettier 扩展,然后创建 .vscode/settings.json

json 复制代码
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

6. 使用 Prettier

  • 手动格式化整个项目:

    bash 复制代码
    npm run format
  • 检查格式问题(不修改文件):

    bash 复制代码
    npm run format:check

7. 与 Vite 集成(可选)

虽然 Prettier 通常不需要与 Vite 直接集成,但如果你想在开发过程中自动格式化,可以安装:

bash 复制代码
npm install --save-dev vite-plugin-prettier

然后在 vite.config.ts 中添加:

typescript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import prettier from 'vite-plugin-prettier'

export default defineConfig({
  plugins: [
    vue(),
    prettier({
      // 配置选项,与.prettierrc.js一致
      singleQuote: true,
      semi: false,
      // 其他配置...
    })
  ]
})

这样配置后,你的 Vue3 + TypeScript + Vite 项目就拥有了完整的 Prettier 格式化支持,可以保持代码风格一致。

相关推荐
上单带刀不带妹16 分钟前
前端安全问题怎么解决
前端·安全
Fly-ping19 分钟前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
SunTecTec42 分钟前
IDEA 类上方注释 签名
服务器·前端·intellij-idea
在逃的吗喽1 小时前
黑马头条项目详解
前端·javascript·ajax
袁煦丞1 小时前
有Nextcloud家庭共享不求人:cpolar内网穿透实验室第471个成功挑战
前端·程序员·远程工作
小磊哥er2 小时前
【前端工程化】前端项目开发过程中如何做好通知管理?
前端
拾光拾趣录2 小时前
一次“秒开”变成“转菊花”的线上事故
前端
你我约定有三2 小时前
前端笔记:同源策略、跨域问题
前端·笔记
JHCan3332 小时前
一个没有手动加分号引发的bug
前端·javascript·bug
pe7er2 小时前
懒人的代码片段
前端