prettier官方文档解读

prettier的官网

https://prettier.io/docs/en/index.html

Prettier支持以下编程语言的代码美化

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

Linter 有两类规则：

格式化规则：例如：max-len , no-mixed-spaces-and-tabs , keyword-spacing , comma-style ...

Prettier 减轻了对这一整类规则的需求！Prettier 将以一致的方式从头开始重新打印整个程序，因此程序员不可能再在那里犯错误了 

代码质量规则：例如no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors ...

Prettier 对这些规则没有任何帮助。它们也是 linter 提供的最重要的，因为它们可能会在您的代码中捕获真正的错误！

换句话说，使用Prettier 进行格式化，使用 linter来捕捉错误！

1、安装

npm 方式

?

1	npm install --save-dev --save-exact prettier

yarn 方式　　

?

1	yarn add --dev --exact prettier

2、配置文件 　　

 .prettierrc.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

module.exports = {   trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）   printWidth: 100, // 1.一行代码的最大字符数，默认是80(printWidth: <int>)   tabWidth: 2, // 2.tab宽度为2空格(tabWidth: <int>)   useTabs: false, // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)   semi: true, // 4.结尾是否添加分号，false的情况下只会在一些导致ASI错误的情况下在开头加分号，我选择无分号结尾的风格(semi: <bool>)   singleQuote: true, // 5.使用单引号(singleQuote: <bool>)   quoteProps: 'as-needed', // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号   jsxSingleQuote: false, // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）   trailingComma: 'es5', // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）   bracketSpacing: true, // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)   jsxBracketSameLine: false, // 10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)   arrowParens: 'always', // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）   rangeStart: 0, // 12.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）   rangeEnd: Infinity, //无穷   vueIndentScriptAndStyle: false, // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠   endOfLine: 'lf', // 19.    endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,   embeddedLanguageFormatting: 'off', // 20.embeddedLanguageFormatting: "off",默认是auto,控制被引号包裹的代码是否进行格式化 };

常用的配置如上所示，更多细节配置及使用使用方法参见 Prettier 官方文档　 https://prettier.io/docs/en/index.html

3、定义不需要被格式化的文件集合，创建 .prettierignore 文件，具体的配置规则同 .gitignore 文件，因为 .prettierignore 基于 .gitignore 和 .eslintignore 

?

1 2 3 4 5 6

# Ignore artifacts: dist README.md   # Ignore all HTML files: *.html

4、如何解决 ESLint 与 Prettier 冲突的 问题　？

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

比如：字符串单、双引号的配置，eslint fix后把字符串变成单引号，再次编辑文件后，保存（Prettier）自动格式化后却又变成双引号，导致代码校验异常。

解决方式一：要么修改 eslintrc，要么修改 prettierrc 配置，让它们配置保持一致；

解决方式二：禁用 ESLint中和Prettier配置有冲突的规则；再使用 Prettier 来替代 ESLint 的格式化功能；
安装eslint-config-prettier插件配置集，把其配置到eslintrc规则的尾部。执行ESLint命令，会禁用那些和Prettier配置有冲突的规则。
安装eslint-plugin-prettier插件，先使用Prettier对代码进行格式化，再并对不一致的地方进行标记；
这两个包配合使用，可以达到运行 eslint --fix 时，采用Prettier的配置规则 来格式化文件。

5、使用 Prettier 

?

1 2 3 4 5

// 格式化所有文件 npx prettier --write .    // 格式化app目录下的所有文件 prettier --write app/