How to setup ESLint and Prettier for your project

setting_up_eslint_prettier.md

Setting Up ESLint and Prettier

ESLint checks for syntax and formatting errors. Prettier will automatically format your code to those stands.

Note upon Prettier placing trailing commas : It is an ES5 standard to place a trailing comma after the last property of an object to ease workflow and reduce chances of a comma being overlooked when new properties are added. This is not an error.

1. Download Prettier and ESLint extension from marketplace to install into VS Code.
2. Download ESLint and Prettier into your project

   $ npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
   

3. Create .eslintrc, .eslintignore, .prettierrc, and .prettierignore files.

   $ touch .eslintrc && touch .eslintignore && touch .prettierrc && touch .prettierignore
   

4. Setup these files.

.eslintrc

• Guide for configuring ESLint to your or your team's needs can be found here.

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "linebreak-style": ["error", "unix"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

.eslintignore

• Will not lint these files/folders.

config/
test/
node_modules
.next

.prettierrc

• Setup to your or your team's liking. Config options found here.

{
  "singleQuote": true,
  "trailingComma": "es5",
  "useTabs":true,
  "semi":true,
  "tabWidth": 5,
  "bracketSpacing": true,
  "arrowParens":"avoid"
}

.prettierignore

• Will not format

package-lock.json
.next
node_modules/

package.json

• Place this inside your package.json as another property

"lint": "eslint --fix . && echo 'Lint complete.'"

---

Right click on your open code window and click Format Document to allow Prettier to perform it's magic, or use the hotkey (easiest way). You can also specify only portions of code you want formatted.

Prettier/ESLint in action

---