prettier-setup

This project sets up formatting and linting tools to keep your code clean and consistent, so you never have to argue about style again:

• Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules.
• ESLint checks JavaScript code for stylistic or programming errors.
• Husky uses Git hooks to ensure that Prettier and ESLint run on all staged changes to fix files before committing.

The setup described here will format JavaScript, JSON, Sass, Markdown, and YAML files, but you can adjust the settings to your own needs.

Installing ESLint and Prettier

This step adds ESLint and Prettier to your project's dependencies so they're available locally regardless of the system configuration.

Install with yarn

yarn add eslint-{config,plugin}-prettier eslint prettier --dev --exact

npm install eslint-{config,plugin}-prettier eslint prettier --save-dev --save-exact

Set up the scripts

Open the package.json file in your project and add the following scripts* entries:

"scripts": {
  "fix:other": "yarn prettier --write",
  "fix:code": "yarn test:code --fix",
  "fix": "yarn fix:code && yarn fix:other",
  "prettier": "prettier \"**/*.{json,md,scss,yaml,yml}\"",
  "test:other": "yarn prettier --list-different",
  "test:code": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
  "test": "yarn test:other && yarn test:code"
}

* If you are using npm, replace yarn with npm run in the above section.

Installing Husky and commit hooks

Set up Husky and the lint-staged commit hooks to format changed files before each commit.

Install with yarn

yarn add husky lint-staged --dev --exact

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

Set up the rules

Add the lint-staged and husky rules to the package.json file in your project:

"lint-staged": {
  "*.{js,jsx}": ["eslint --fix"],
  "*.{json,md,scss,yaml,yml}": ["prettier --write"]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},