eslint prettier in reactjs

gistfile1.md

1. npx eslint --init

Choose your options

2. Install prettier

• Install VSCode prettier extension
• touch .prettierrc
• Basic .prettierrc setting

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

• setting.json

// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,

3. Config Prettier to work with ESLint

• Install packages:

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

• Config in .eslintrc

 "plugins": [
    "prettier"
  ],

"extends": [
    "prettier"
  ],

"rules": {
    "prettier/prettier": 2, // Means error
    "react/react-in-jsx-scope": 0,
    "react/jsx-filename-extension": [
			1,
			{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
		],
  }