Prettier -- 格式化代码工具 · 前端工程化学习笔记

[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)