garthendrich / eslint_prettier_lint-staged

ESLint, Prettier, Lint-Staged setup

1. Make sure to have a package.json and have initialized git in your project directory.

2. Install needed dev dependencies.

npm install -D eslint-config-prettier husky lint-staged
npm install -D -E prettier

3. (If your project doesn't yet have an .eslintrc.* file) Install and set up ESLint.

npm init @eslint/config

Recommended options:

• How would you like to use ESLint?: To check syntax, find problems, and enforce code style
• What type of modules does your project use?: JavaScript modules (import/export)
• How would you like to define a style for your project?: Use a popular style guide
• Would you like to install them (dependencies) now?: Yes

4. Add prettier to the extends array in the .eslintrc.* file.

Make sure to put it last, so it overrides other configs.

"extends": [
   /* other configs */,
   "prettier"
]

5. Set up husky.

npx husky init

6. Set up lint-staged by adding the following to package.json.

{
  // ...
  "scripts": {
    // ...
    "test": "npx lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "**/*": "prettier --write --ignore-unknown"
  },
  // ...
}

Additional:

• To set up a Prettier configuration, create a .prettierrc file.
• To exclude files from being formatted by Prettier, create a .prettierignore file.
• The lint-staged object in package.json can be moved into a .lintstagedrc.json file.

// .lintstagedrc.json
{
  "*.{js,jsx,ts,tsx}": "eslint --fix",
  "**/*": "prettier --write --ignore-unknown"
}