Take you through the Prettier+ configuration guide in one minute

What is Prettier

prettier is a code formatting tool that supports JS/JSX/TS/Flow/JSON/CSS/LESS and other file formats.

Install dependencies into the development environment

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

Create .prettierrc.js in the root directory

Click to view the complete configuration of the official website.
Example 1: The rules here are for reference only and can be rewritten according to personal habits.

module.exports = {
  printWidth: 100, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

Give an example 2

module.exports = {
  printWidth: 200, //行宽
  semi: true, //分号
  singleQuote: true, // 使用单引号
  useTabs: false, //使用 tab 缩进
  tabWidth: 2, //缩进
  trailingComma: 'es5', //后置逗号，多行对象、数组在最后一行增加逗号
  arrowParens: 'avoid', //箭头函数只有一个参数的时候可以忽略括号
  bracketSpacing: true, //括号内部不要出现空格
  proseWrap: 'preserve', //换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  parser: 'babylon', //格式化的解析器，默认是babylon
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  jsxBracketSameLine: false, //在jsx中把'>' 是否单独放一行
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: 'ignore',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  requireConfig: false, // Require a 'prettierconfig' to format prettier
}

Create .prettierignore in the root directory to ignore files that you do not want to format.

node_modules is ignored by default. To ignore other files can be written in .prettierignore

build
.cache

# Ignore all HTML files:
*.html
*.yml
*.yaml

Command line formatting

Format all documents

npx prettier --write .
//或
yarn prettier --write .

Git executes Prettier before committing code Commit

Install husky and lint-staged

husky is a tool that helps us add git hooks
lint-staged filters out those staged git files and executes lint

npm install husky --save-dev --save-exact
npm install lint-staged --save-dev --save-exact

Configure package.json

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

Other supplements

Resolve conflicts with eslint

Install the eslint-config-prettier plug-in

npm i -D eslint-config-prettier

Write the following content in the eslint configuration file

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

To be further added

That’s all for today~
Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝSee you tomorrow~~
Everyone, please be happy every day

Everyone is welcome to point out what needs to be corrected in the article ~
there is no end to learning and win-win cooperation

Insert image description here