[TOC] >[success] # Prettier -- 专注于检查并自动更正代码风格 ~~~ 1.'ESLint' 主要解决了两类问题，代码质量和风格问题这两个问题，但是在代码风格解决上如果每次人为 去控制书写其实是一件痛苦的事，因此希望有一套自动化工具，帮我们检测代码是否规范，如果不规范， 则自动能够帮我们按照既定规范格式化 2.'Prettier' 声称自己是一个有主见的代码格式化工具 (opinionated code formatter)，'Prettier '认为格式很重要， 不需要再思考究竟是用 'single quote'，还是 'double quote'这些乱起的格式问题，'Prettier' 帮处理。最后的结果， 'Prettier '还给予了一部分配置项，可以通过 '.prettierrc' 文件修改 3.'ESLINT' 中： 代码质量规则 (code-quality rules) no-unused-vars no-extra-bind no-implicit-globals prefer-promise-reject-errors ... 代码风格规则 (code-formatting rules) max-len no-mixed-spaces-and-tabs keyword-spacing comma-style ~~~ >[danger] ##### ESLint 是否可替代 Prettier ~~~ 1.'Eslint'码风格检查和 'Prettier'功能重叠，为什么还会出现' Prettier'， 1.1.'ESLint' 中的 'Formatting rules' 并非都提供了'fixer'， 1.2.'ESLint' 着重于 'JS/TS'，无法兼顾 'CSS、Markdown' 的代码风格； 因此整体的代码风格规范化还得交给 Prettier。 ~~~ [前端代码规范化：EditorConfig + Prettier + ESLint ](https://zhuanlan.zhihu.com/p/366141969) >[info] ## Prettier 快速上手 * 安装，`npm i prettier -D` * 检查某个文件并输出检查结果，`npx prettier style.css` * 检查并格式化某个文件，`npx prettier style.css --write` * 检查并格式化项目所有文件，`npx prettier . --write` >[danger] ##### 插件介绍 * [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)\- 和一般的`eslint-config-xxx`不同，它不是用来共享 ESlint 配置的，而是用来关闭 ESLint 的样式规则的，避免 ESLint 的样式规则和 Prettier 冲突。使用该配置后，对代码进行`prettier`和`eslint`就不会冲突了。但要注意一定要把它放在`extends`中最后的位置，避免后续的配置又把相关规则打开了。 * [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)\- 将 Prettier 集成到 ESlint 工作流中，不需要再单独使用`prettier`命令。将 Prettier 发现的代码样式问题当作一条 ESLint 规则，在运行`eslint`检查后显示出来，也同样可以在`--fix`时修复。需要配合`eslint-config-prettier`使用。个人使用了一下基本 OK，但是由于 Prettier 不像 ESLint 那样是单独的一条条规则，因此错误的显示不是很友好。 [# 理解 Prettier 并用它统一你的代码风格](https://www.meteorlxy.cn/posts/2019/08/05/understand-and-use-prettier.html) >[info] ## 忽略检查文件.prettierignore 配置`.prettierignore` 忽略格式化文件 ~~~ /dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/* ~~~ >[info] ## Prettier 和 ESLint 冲突 * 安装这两个插件 ~~~ npm i eslint-plugin-prettier eslint-config-prettier -D ~~~ ~~~ 1.'eslint' 和 'Prettier' 都是对代码风格规则上的约束工具二者必然就会出现冲突解决方法: 1.1.使用 'eslint-config-prettier'来关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置在 .eslintrc 里面将 prettier 设为最后一个 extends // .eslintrc { "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖 } 1.2.使用插件'eslint-plugin-prettier',之前介绍过'plugin' 是扩展的规则，现在扩展'prettier ' // .eslintrc { "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } 1.3.将上面两个步骤和在一起就是下面的配置，也是官方的推荐配置 // .eslintrc { "extends": ["plugin:prettier/recommended"] } ~~~ >[danger] ##### 各个配置项 ~~~ // .prettierrc.js module.exports = { // 最大长度80个字符 printWidth: 80, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) singleQuote: true, // 行末分号, 默认true semi: true, // JSX双引号 jsxSingleQuote: false, // 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all // es5 包括es5中的数组、对象 // all 包括函数对象等所有可选 trailingComma: 'all', // 在对象文字中打印括号之间的空格。 默认true bracketSpacing: true, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 arrowParens: 'avoid', // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。 insertPragma: false, // 行尾换行格式 endOfLine: 'auto', // html空格敏感度 htmlWhitespaceSensitivity: 'ignore', // tab缩进大小,默认为2 tabWidth: 2, // 使用tab缩进还是空格，默认false useTabs: true, // vue缩进脚本和样式 vueIndentScriptAndStyle: false, // > 标签放在最后一行的末尾，而不是单独放在下一行 默认false jsxBracketSameLine: false, }; ~~~ >[danger] ##### Prettier vscode 配置 ~~~ 1.下载'prettier' 插件，然后在vscode 配置文件添加例如此时我只想格式的为'js'配置如下 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, ~~~ >[danger] ##### 注意当eslint 和 prettier 一起搭配的时候 ~~~ 1.此时Prettier不是prettier作为单独的命令eslint-plugin-prettier运行，而是作为 ESLint 规则运行 ，将任何格式不正确的内容报告为 ESLint 错误。 /path/to/locations.ts 31:35 error Replace `·?·toFull(LOCATIONS_LOOKUP[location.parentId])` with `⏎····?·toFull(LOCATIONS_LOOKUP[location.parentId])⏎···` prettier/prettier ✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option. 因此运行eslint --fix不仅可以自动修复常规 ESLint 规则，还可以格式化我们的代码（Prettier 风格）。不用单独执行'npx prettier' 一些指令 ~~~ >[danger] ##### 推荐阅读这个 [参考链接](https://www.cnblogs.com/ssaylo/p/12806757.html) [# 搞懂 ESLint 和 Prettier](https://zhuanlan.zhihu.com/p/80574300) [Prettier看这一篇就行了 ](https://zhuanlan.zhihu.com/p/81764012?from_voters_page=true) [vscode 中 eslint prettier 和 eslint -loader 配置关系 ](https://www.cnblogs.com/guangzan/p/14057876.html)