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

Install with npm

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

Install with npm

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"
  }
},

---

Prettier rules

This project defines the following settings in the .prettierrc.json file. You can adjust these values according to your own preferences.

Rule	Value*
arrowParens	avoid
bracketSpacing	false
endOfLine	lf
htmlWhitespaceSensitivity	css
jsxBracketSameLine	false
printWidth	80
proseWrap	preserve
requirePragma	false
semi	true
singleQuote	true
tabWidth	2
trailingComma	all
useTabs	false
vueIndentScriptAndStyle	true

* Values in bold differ from the Prettier defaults.

ESLint rules

Adjust your own rules by updating the .eslintrc.json.

• curly
• dot-notation
• id-length
• no-const-assign
• no-dupe-class-members
• no-else-return
• no-inner-declarations
• no-lonely-if
• no-magic-numbers
• no-shadow
• no-unneeded-ternary
• no-unused-expressions
• no-unused-vars
• no-useless-return
• no-var
• one-var
• prefer-arrow-callback
• prefer-const
• prefer-promise-reject-errors
• sort-imports
• sort-keys
• sort-vars
• strict

Dependencies

• eslint-config-prettier
• eslint-plugin-prettier
• eslint
• husky
• lint-staged
• prettier