prettier-setup
prettier-setup copied to clipboard
Basic configuration for Prettier, ESLint and Husky.
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