Vue3框架搭建3：配置说明-prettier配置

最新推荐文章于 2025-11-21 22:55:22 发布

原创

最新推荐文章于 2025-11-21 22:55:22 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue #架构

1、配置说明：

.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

“$schema” 用来告诉编辑器这个json指定为Prettier的模式，可以提供Prettier的语法提示。

由于json文件不能做注释，下面使用js文件进行编写。

.prettierrc.cjs

module.exports = {
  semi: false, //行尾需要有分号
  tabWidth: 2, //使用2个空格缩进
  singleQuote: true, //使用单引号
  printWidth: 100, //一行最多100字符
  trailingComma: 'none', //末尾需要有逗号

  useTabs: false, //不使用缩进符，而使用空格
  quoteProps: 'as-needed', //对象的key仅在必要时用引号
  singleProps: true, //使用单引号
  jsxSingleQuote: false, //jsx不使用单引号，而使用双引号
  bracketSpacing: true, //大括号内的首尾需要空格
  bracketSameLine: false, //jsx标签的反尖括号需要换行
  arrowParents: 'always', //箭头函数，只有一个参数的时候，也需要括号
  rangeStart: 0, //每个文件格式化的范围是文件的全部内容
  rangeEnd: Infinity,
  requirePragma: false, //不需要写文件头的@prettier
  insertPragma: false, //不需要自动在文件开头插入@prettier
  proseW