关于prettier
-
版本:prettier@1.18.1
-
Prettier 是什么?
官方: Prettier is an opinionated code formatter
-
一个代码格式工具,支持基本主流前端的语言(js, ts, Es6, Es7,markdown等等);
-
会根据书写的代码,重新解析和构建显示格式(即,它清除原来的格式,按照自己认为美丽的方式重新显示代码格式)
Prettier enforces a consistent code style (i.e. code formatting that won't affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.
-
Prettier 不会像EsLint,TsLint,StyleLint 那样告诉你,语法哪里错了,它只会告诉你代码这么写不美观
-
有兴趣可以探索一下prettier关心的项
-
-
如何使用Prettier?
-
安装
两种方式,两个位置,大家随意,注意官方给出的教程中,都是推荐精确版本安装的
yarn add prettier --dev --exact
yarn global add prettier
npm install --save-dev --save-exact prettier
npm install --global prettier
-
使用方式:
- CLI ----直接命令行 使用cli 调用相关的参数使用
- API ----代码中引入prettier包,调用相关的API使用
- Browser---在浏览器中使用,注意需要再引入其他依赖包
- Plugin----通过插件使用(官方说明为扩展语言支持实现,有些想webpack的loader)
- Pre—commit —— 配合预提交(pre-commit)工具来使用,实现提交代码前的格式化
- Onchange ---通过使用内置的onchange 在package.json中使用,变动时格式化
- Lint ----配合主流的Lint一起使用,比如EsLint,TsLint等等
- Ignore----将文件或者代码,添加到“忽略清单中”,例如.prettierignore或注释
-
配置参数说明
- printWidth 代码行的长度, 默认是80 , 官方建议不要超过120,即80-120之间即可
- tabWidth 缩进长度 ,默认值2 ,2个spaces
- tabs 是否启用tabs代替spaces, 默认值false
- semicolon 分号,是否启用在每个声明后添加 分号,默认值true
- quotes 引号,是否启用单引号代替双引号,默认值false
- quotesProps 对象属性的分号,默认值"as-needed" 即在被要求是添加
- jsxQuotes jsx语法中是否使用单引号代替双引号,默认值 false
- trailingCommas 结尾的逗号,默认值“none”
- BracketSpacing 对象属性和{} 之间的 空格, 默认值 true
- jsxBrackets 是否启用jsx语法中,> 在属性的末尾,而不是移动到单独的一样,默认值为false
- arrowFunctionParentheses 是否启用总是让箭头函数的参数括号 默认值为"aviod"
- range 格式化范围,是否指格式化一部分,默认值start 0 end infinity
- parser 语法解析器 默认值为none,其本身默认推断 【一般用不上】
- filePath 指定用于推断要使用的解析器的文件名。 默认值 none【一般用不上】
- requirePragma 是否启用注解格式化,即配置注解的格式化,不配置的不格式化,默认值:false(类似 @prettier)【当逐步将大型未格式化的代码库转换为prettier的代码库时,这非常有用。】
- insertPragma Prettier可以在文件顶部插入一个特殊的@format标记,指定文件格式更漂亮,默认值false;
- proseWrap 与markdown 有关系 默认值 preserve
- htmlWhitespaseSensitivity 指定HTML文件的全局空白区域敏感度 默认值 css即尊重css
- endOfLine 指定结尾的类型,lf |rc|crlf |auto ,默认值auto
-
配置方式
-
.prettierrc
{ "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true }
-
prettier.config.js | .prettierrc.js
// prettier.config.js or .prettierrc.js module.exports = { trailingComma: "es5", tabWidth: 4, semi: false, singleQuote: true };
-
-
注意实现:
- 注意 配置文件的书写,
- 注意可以配置忽略文件
- 注意在大规模替换时开启注解
- 注意prettier的定位
- 注意和各种XXLint的组合使用
-