orangeyyy
4/6/2018 - 12:38 PM

prettier

.md
content_copyfile_download
  • Rendered
  • Source

概述

一致的代码风格对于大型项目或者多人协作的项目意义重大，通过规范统一的代码风格可以有效保障代码的健壮性，有效降低项目成员之间的沟通成本。但是统一规范是一项耗时耗力的工作，而且大家的代码风格往往会有所差别，尤其对于团队新人，要想然大家按照统一的代码风格书写代码成本太高。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"]
}

参考