How To Configure ESLint & Prettier in React PJ

I had chance to introduce and set up ESLint & prettier in project while working. So, the purpose of writing this post is simply memorandum and output for my sake. Please be aware that this post has inaccurate information. I will fix it As I realize

Introduce ESLint

Install ESLint

npm install eslint --save-dev

If the project is created by "create-react-up", Eslint has been installed already. You should not install again because it may cause some error later.

Set up ESLint

npm init @eslint/config

.eslintrc.json will be generated after You answer interactive questions on terminal.

Add .eslintignore

Write one line below into .eslintignore to prevent ESLint from linting files in node_modules.

node_modules/

Introduce Prettier

Install Prettier

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

Edit .eslintrc

*Exsample below is JSON format.

"extends":[
   "xxxxx",
   "prettier" // make sure to add om the last line.
]

Check your settings has no confliction

npx eslint-config-prettier ./src/**

Execute the command above

If you see response like below, you can confirm the setting has no confliction

No rules that are unnecessary or conflict with Prettier were found.

Add .prettierignore

Write one line below into .prettierignore to prevent prettier from formatting files in node_modules.

node_modules

Add .prettierrc

You can setup your own formatting rule in this file.
If you do not create this file and configure, those setting below are applied as default

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}