prettier是一款强势武断的代码格式化工具,它几乎移除了编辑器本身所有的对代码的操作格式,然后重新显示。就是为了让所有用这套规则的人有完全相同的代码。在团队协作开发的时候更是体现出它的优势。与eslint,tslint等各种格式化工具不同的是,prettier只关心代码格式化,而不关心语法问题。
编辑器使用prettier
脚本使用prettier
安装
1 | yarn add prettier -D |
使用
1 | prettier--write <文件路径+文件名> |
自定义配置规则方式
- .prettierrc 文件,支持yaml和json格式;或者加上 .yaml/.yml/.json 后缀名
1
2
3
4
5
6
7
8
9
10
11
12{
"printWidth": 160, //超过160字符换行
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"requirePragma": false,
"useTabs": false,
"htmlWhitespaceSensitivity": "css"//内联标签与块级标签格式化有区别
} - .prettierrc.toml 文件(当为toml格式的时候,后缀是必须的)
- prettier.config.js 或者 .prettierrc.js,需要返回一个对象
- package.json文件中加上”prettier”属性
总结
1、.prettierrc 的优先级高于在vscode全局配置settings.json中格式化配置的优先级
2、 编辑器配置适合个人开发、脚本配置适合团队开发