Skip to content
/ prettier-setup Public template

Basic configuration for Prettier, ESLint and Husky.

License

Notifications You must be signed in to change notification settings

lipis/prettier-setup

Repository files navigation

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.

Dependencies

About

Basic configuration for Prettier, ESLint and Husky.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published