vue-cli3 安装prettier进行代码自动格式化

最新推荐文章于 2025-04-09 15:13:36 发布

脑瓜不疼

最新推荐文章于 2025-04-09 15:13:36 发布

阅读量1.1k

点赞数

分类专栏：大前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/super__code/article/details/118485320

版权

大前端专栏收录该内容

88 篇文章

订阅专栏

本文档介绍了如何安装和配置Prettier，一个代码格式化工具。通过npm安装并设置.prettierrc.js文件，包括代码风格如分号、引号、括号、缩进等的选择。此外，还展示了在package.json中添加lint命令以实现对src目录下代码的自动格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装prettier

npm i --save-dev prettier

2、在文件根目录下新建.prettierrc.js，配置项为：

module.exports = {
  // 代码结尾是否加分号
  semi: false,
  // 是否使用单引号
  singleQuote: true,
  // 对象大括号内两边是否加空格 { a:0 }
  bracketSpacing: true,
  // 单个参数的箭头函数不加括号 x => x
  arrowParens: 'avoid',
  // 超过多少字符强制换行
  printWidth: 80,
  // 文件换行格式 LF/CRLF
  endOfLine: 'auto',
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css'
}

3、在package.json中的scripts加入命令：

"lint:prettier":"npx prettier --write src/"