Prettier 上手和配置详情(建议ctrl+f搜索)

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

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,
    // 行末分号, 默认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,
};

Prettier vscode 配置

1.下载'prettier' 插件，然后在vscode 配置文件添加例如此时我只想格式的为'js'配置如下
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},