Prettier -- 专注于检查并自动更正代码风格
1.'ESLint' 主要解决了两类问题，代码质量和风格问题这两个问题，但是在代码风格解决上如果每次人为
去控制书写其实是一件痛苦的事，因此希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，
则自动能够帮我们按照既定规范格式化2.'Prettier' 声称自己是一个有主见的代码格式化工具 (opinionated code formatter)，'Prettier '认为格式很重要，
不需要再思考究竟是用 'single quote'，还是 'double quote'这些乱起的格式问题，'Prettier' 帮处理。最后的结果，
'Prettier '还给予了一部分配置项，可以通过 '.prettierrc' 文件修改3.'ESLINT' 中：代码质量规则 (code-quality rules)no-unused-varsno-extra-bindno-implicit-globalsprefer-promise-reject-errors...代码风格规则 (code-formatting rules)max-lenno-mixed-spaces-and-tabskeyword-spacingcomma-style
ESLint 是否可替代 Prettier
1.'Eslint'码风格检查和 'Prettier'功能重叠，为什么还会出现' Prettier'，1.1.'ESLint' 中的 'Formatting rules' 并非都提供了'fixer'，1.2.'ESLint' 着重于 'JS/TS'，无法兼顾 'CSS、Markdown' 的代码风格；因此整体的代码风格规范化还得交给 Prettier。
前端代码规范化：EditorConfig + Prettier + ESLint
Prettier 快速上手
- 安装，
npm i prettier -D - 检查某个文件并输出检查结果，
npx prettier style.css - 检查并格式化某个文件，
npx prettier style.css --write - 检查并格式化项目所有文件，
npx prettier . --write
插件介绍
- eslint-config-prettier- 和一般的
eslint-config-xxx不同，它不是用来共享 ESlint 配置的，而是用来关闭 ESLint 的样式规则的，避免 ESLint 的样式规则和 Prettier 冲突。使用该配置后，对代码进行prettier和eslint就不会冲突了。但要注意一定要把它放在extends中最后的位置，避免后续的配置又把相关规则打开了。 - eslint-plugin-prettier- 将 Prettier 集成到 ESlint 工作流中，不需要再单独使用
prettier命令。将 Prettier 发现的代码样式问题当作一条 ESLint 规则，在运行eslint检查后显示出来，也同样可以在--fix时修复。需要配合eslint-config-prettier使用。个人使用了一下基本 OK，但是由于 Prettier 不像 ESLint 那样是单独的一条条规则，因此错误的显示不是很友好。
# 理解 Prettier 并用它统一你的代码风格
Prettier 和 ESLint 冲突
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"]}
各个配置项
// .prettierrc.js
module.exports = {// 最大长度80个字符printWidth: 80,// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)singleQuote: true,// 行末分号, 默认truesemi: true,// JSX双引号jsxSingleQuote: false,// 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all// es5 包括es5中的数组、对象// all 包括函数对象等所有可选trailingComma: 'all',// 在对象文字中打印括号之间的空格。 默认truebracketSpacing: true,// 箭头函数参数括号 默认avoid 可选 avoid| always// avoid 能省略括号的时候就省略 例如x => x// always 总是有括号arrowParens: 'avoid',// 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。insertPragma: false,// 行尾换行格式endOfLine: 'auto',// html空格敏感度htmlWhitespaceSensitivity: 'ignore',// tab缩进大小,默认为2tabWidth: 2,// 使用tab缩进还是空格，默认falseuseTabs: true,// vue缩进脚本和样式vueIndentScriptAndStyle: false,// > 标签放在最后一行的末尾，而不是单独放在下一行 默认falsejsxBracketSameLine: false,
};
Prettier vscode 配置
1.下载'prettier' 插件，然后在vscode 配置文件添加例如此时我只想格式的为'js'配置如下
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"
},