概述
一致的代码风格对于大型项目或者多人协作的项目意义重大,通过规范统一的代码风格可以有效保障代码的健壮性,有效降低项目成员之间的沟通成本。但是统一规范是一项耗时耗力的工作,而且大家的代码风格往往会有所差别,尤其对于团队新人,要想然大家按照统一的代码风格书写代码成本太高。prettier是一款可配置的代码格式化工具,并支持现在流行的全部前端语言,例如ES2017、JSX、Flow、TypeScript、CSS/LESS/SCSS、JSON、GraphOL、Markdown等等。他的思路和Linter的思路有所不同,它并不要求大家按照统一的风格书写代码,而是帮助大家将各自代码格式化成为统一的风格。
使用
安装
通过下面的方式来安装prettier:
npm install prettier --save-dev --save-exact
由于prettier官方鼓励在补丁版本中改变代码风格,因此建议在安装时固定package中prettier的版本号。
命令行工具
通常我们通过下面的方式来执行prettier:
prettier [opts] [filename, ...]
通关下面这个具体的例子可能更加有体感:
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
参数列表:
- --write - 这个参数主要用来表明我们需要就地格式化;
- --with-node-modules - prettier默认不格式化node_modules中的代码,可以通过这个参数来消除这种限制;
- --debug-check - 如果用户担心prettier格式化会影响程序的正确性,可以通过这个参数来打印可能会引起格式化正确性的地方,当然这个参数不能和write参数一起使用;
- --find-config-path & --config - 指定配置文件路径或者配置文件;
- --no-config - 如果不希望prettier查找已有配置文件可以使用这个参数;
- --ignore-path - 指定不需要进行format的文件路径,通常prettier会查找./.prettierignore中的配置;
- --require-pragma - 当使用这个参数时,只有只有当文件的第一个块注释表明时才会被prettier格式化,注释为如下格式:
/**
* @prettier
*/
或者
/**
* @format
*/
- --insert-pragma - 在格式化过程中对于没有上一条所示注释的文件中插入@format注释;
- --list-diffrent - 列出与prettier规范不符的文件的文件名称;
- --config-precedence - 设置如何结合配置文件中的配置与命令行工具中的参数:
- cli-override(default)- 命令行参数优先级更高;
- file-override - 配置文件优先级更高;
- prefer-file - 如果有配置文件,忽略所有命令行参数,否则命令行参数正常执行;
- --no-editorconfig - 不使用.editorconfig中的配置;
- --loglevel - 改变prettier日志级别:error、warn、log(default)、debug、silent;
配置
prettier虽然帮我们确定了大部分代码风格,但是依然提供了一些配置选项供用户定制使用:
- printWidth - 每行最大长度,默认为80;
- tabWidth - 缩进占位符个数,默认2;
- useTabs - 使用tab取代空格进行缩进,默认false;
- semi - 在每行后面追加分号,默认true;
- singleQuote - 使用单引号,默认false,JSX语法始终使用双引号;
- trailingComma - 添加末尾逗号
- none - 不添加;
- es5 - 添加满足ES5规范的末尾逗号;
- all - 尽可能的添加末尾逗号,需要node 8 或者 transform;
- bracketSpacing - 在括号中间添加空格,默认true;
- true - example { foo: bar }
- false - example {foo: bar}
- jsxBracketSameLine - 对于多行的JSX组件,最后的">"在最后一行,而不是新起一行,默认false;
- arrowParents - 对于单参数的箭头函数,是否用括号包裹,默认avoid;
- avoid - 省略不必要的括号,例如 x => x;
- always - 总是使用括号包裹, 例如 (x) => x;
- range - 指定格式化的范围,主要包含两个参数:
- rangeStart - 默认为0;
- rangeEnd - 默认为infinity;
- parser - 指定解析器,默认为babylon;
- filePath - 指定输入文件路径;
- requirePragma - 是否需要@prettier|@format注释标识,默认false;
- insertPragma - 是否需要增加@prettier|@format注释标识,默认false;
- proseWrap - markdown关于prose wrap 的配置;
结合ESLint
对于常用的Linter工具,主要包含两类规则:
- 格式化规则 - 例如:max-len、no-mixed-spaces-and-tabs等,prettier可以很好的支持这类规则,可以将不同风格的代码转换成统一风格;
- 代码质量规则 - 例如:no-unused-vars、no-extra-bind等,prettier对这些规则不会产生任何作用,我们仍然需要通过Linter的这些规则来降低发生错误的可能;
我们有3种方式来结合ESLint使用prettier:
- 通过ESLint来运行prettier,我们可以将prettier加入到ESLint的规则中:
安装
npm install premitter eslint-plugin-prettier --save-dev
.eslintrc.js
{
"plugins": ["premitter"],
"rules": {
"premitter/premitter": "error"
}
}
- 关闭ESLint的代码格式化规则,我们不希望同样的规则在不同的工具中重复提示,因此,我们更希望prettier来管理代码格式化相关的工作,而ESLint在负责除了代码格式化以外的工作。我们可以通过eslint-config-premitter来实现这个效果:
安装
npm install eslint-config-prettier --save-dev
.eslintrc.js
{
"extends": ["prettier"]
}
- 同时使用,eslint-plugin-prettier提供一个“recommended”的配置,同时实现以上两种功能:
安装
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
.eslintrc.js
{
"extends": ["plugin:prettier/recommended"]
}
参考