Skip to content
Basic configuration for Prettier, ESLint and Husky.
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 28 commits behind lipis:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
.editorconfig
.eslintrc.json
.gitignore
.prettierignore
.prettierrc.json
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

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:js": "yarn test:js --fix",
  "fix": "yarn fix:js && yarn fix:other",
  "prettier": "prettier \"**/*.{json,md,scss,yaml,yml}\"",
  "test:other": "yarn prettier --list-different",
  "test:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore \"**/*.{js,jsx}\"",
  "test": "yarn test:other && yarn test:js"
}

* 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", "git add"],
  "*.{json,md,scss,yaml,yml}": ["prettier --write", "git add"]
},
"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

* Values in bold differ from the Prettier defaults.

ESLint rules

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

Dependencies

You can’t perform that action at this time.