prettier, eslint, lint-staged, husky setup

This is a memo for setting up prettier, eslint, husky

1. prettier

1.1 Install

https://prettier.io/docs/en/install.html

yarn add --dev --exact prettier

1.2 Configure

touch .prettierrc.json
touch .prettierignore

.prettierignore

// Prettier's CLI ignores node_modules by default.
build

https://prettier.io/docs/en/configuration.html .prettierrc.json

1.3 Run prettier

yarn prettier --write .

2. eslint

2.1 Install

https://eslint.org/docs/user-guide/getting-started

yarn add eslint --dev
yarn run eslint --init
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
ENTER

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
 ENTER
 
? Which framework does your project use? ... 
  React
  Vue.js
> None of these
ENTER

? Does your project use TypeScript? » No / Yes
ENTER

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
**√ Browser**
√ Node
ENTER

? What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON
 ENTER

2.2 Configure

https://eslint.org/docs/user-guide/configuring/configuration-files

yarn run eslint --init creates .eslintrc.js.

You can change the eslint rules in this file. I'll leave the defaults as they are.

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

2.3 eslint with prettier

https://github.com/prettier/eslint-config-prettier#installation

yarn add --dev eslint-config-prettier

Then,

In .eslintrc.js, add extends prettier.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

2.4 Run eslint

yarn run eslint yourfile.js

yarn run eslint yourfile.js --fix # auto fix

yarn run eslint src/**/*.js # https://github.com/MiguelCastillo/Brackets-InteractiveLinter/issues/183

Error refs

https://stackoverflow.com/questions/49789177/module-is-not-defined-and-process-is-not-defined-in-eslint-in-visual-studio-code

3. lint-staged, husky

https://github.com/okonet/lint-staged#running-multiple-commands-in-a-sequence

=> Run linters against staged git files

3.1 Install

npx mrm@2 lint-staged

This command will install and configure husky and lint-staged depending on the code quality tools from your project's package.json dependencies

3.2 Configure

https://github.com/okonet/lint-staged#configuration

npx mrm@2 lint-staged

This command adds lint-staged object in your package.json.

And this is a configuration.

package.json

"lint-staged": {
  "*.js": "eslint --cache --fix",
  "*.{js,css,md}": "prettier --write"
}

kohheepeace/memo.md