vue 工程化配置-prettier

634 阅读1分钟

prettier配置

官网 www.prettier.cn/docs/index.…

解释

  • prettier 插件会优先使用项目根目录下的 editorconfig 配置文件,如果没有 editorConfig 文件,会在根目录下找 .prettierrc 文件,并使用该文件中的配置。
  • 找不到 editorConfig 和 .prettierrc 文件,才会使用 setting.json 中的配置。
  • setting.json又区分工作区和用户区优先使用工作区的,之后再使用用户区
  • 如果有 setting.json 中配置不生效的情况,看看是否有前面两个文件。可在 setting 中配置不使用 editorConfig 的配置。settings -> 搜索 editorConfig -> Prettier: Use Edit Config,置为 false。

.prettierrc文件json配置

{
  semi: true, // 末尾分号 true|false
  singleQuote: true, // 字符串 单双引号 true|false
  tabWidth: 2, // 缩进单位 number|
  trailingComma: 'es5', // 末尾逗号 es5|none|all
  bracketSpacing: true, // 对象文字中括号之间的空格。 true|false
  bracketSameLine: true, // dom标签关闭符 > 是否要放在一行的末尾 true|false
  arrowParens: 'always', // 箭头函数参数是否需要使用括号 always|avoid
  requirePragma: false, //可以将其自身限制为仅格式化在文件顶部包含特殊注释(称为杂注)的文件。 <!-- @format --> | <!-- @prettier -->
  insertPragma: true, // 可以在文件顶部插入一个特殊的@format标记,指定该文件已使用Pretter格式化,当与--require pragma选项结合使用时,该选项效果良好。如果文件顶部已经有docblock,则此选项将使用@format标记向其添加新行
  printWidth: 10000, // 设置一行的长度
}

一键保存格式化流程

  1. 在settings.json里配置 保存自动格式化 配置
  2. npm 安装prettier插件 vscode安装 prettier插件
  3. 右键点击选择 使用...格式化文档 配置默认格式化程序 选择prettier
  4. 根目录配置 .prettierrc文件 与 .prettierignore文件