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, // 设置一行的长度
}
一键保存格式化流程
- 在settings.json里配置 保存自动格式化 配置
- npm 安装prettier插件 vscode安装 prettier插件
- 右键点击选择 使用...格式化文档 配置默认格式化程序 选择prettier
- 根目录配置 .prettierrc文件 与 .prettierignore文件