Prettier

1.为什么用prettier

代码风格是所有程序员都要遇到的问题，Prettier 的opinionated

2.什么是prettier

Prettier 在自己官网首页列出这么几点：

• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options

Prettier 是一个 Opinionated 的代码格式化工具。所以要掌握 Prettier 的精髓就是要理解这个单词。

什么是 Opinionated？很多框架在文档开始就会告诉你它是Opinionated还是Unopinionated。

Angular ，Spring Boot是opinionated

vue react是unopinionated

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

3.和Git整合，使用lint-staged

// 先别运行这两行，下面会有更简单的办法
npm install husky
npm install lint-staged

或者

// 这一行就可以安装husky和lint-stage，并且配置好husky。
npx mrm lint-staged

package.json里

"devDependencies": {
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write",
      "git add"
    ]
  }

"prettier": {

    "singleQuote": true,

    "semi": true,

    "tabWidth": 2,

    "useTabs": false,

    "printWidth": 120,

    "trailingComma": "all",

    "arrowParens": "always"

  }

4.集成在 ESlint 中

ESlint 与 Prettier 可能会冲突，故需做如下设置：

1. 安装 eslint-config-prettier 插件

        npm i -D eslint-config-prettier

2. 在eslint的配置文件中写入以下内容

        extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突