Prettier Setting - codeewander/react-starter-eslint-prettier GitHub Wiki

Prettier Official Docs

Install Prettier

yarn add -D prettier

Integrating with Linters

yarn add -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier disables rules that conflict with Prettier while eslint-plugin-prettier adds the rule that format content using Prettier. You can enable this configuration by using the recommended one:

{
  "extends": ["plugin:prettier/recommended"]
}

Configure Prettier

Use configuration file following the priority belows:

1. A "prettier" key in package.json
2. .prettierrc
3. .prettierrc.json、.prettierrc.yml、.prettierrc.yaml、 .prettierrc.json5
4. .prettierrc.js、.prettierrc.cjs、prettier.config.js、 prettier.config.cjs 5..prettierrc.toml

Common Usage

{
    "semi": true, //add semicolons at the ends of statements
    "tabWidth": 4, //Specify the number of spaces per indentation-level
    "printWidth": 85, //Specify the line length that the printer will wrap on
    "trailingComma": "none" //No trailing commas
}

Prettier CLI

Formats every .js or .jsx file located in a src folder:

prettier --write src/*.(js|jsx)

You can use this CLI option to include a format script in your package.json file:

{
  "scripts": {
    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\""
  }
}