Setup ESLint and Prettier in VSCode

---

Step 1

Install two extentions, ESLint and Prettier

ESLint

Prettier

Step 2

Install the following npm packages that is required to make all of this work.

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
npx install-peerdeps --dev eslint-config-airbnb

Step 3

Create a new file in the root of your project called .prettierrc, this is where prettier configs can be set. I only have one setting in this file and that is my preference for single quotes instead of double quotes.

{
    "singleQuote": true
}

Step 4

Create a new file in the root of your project called .eslintrc.json, this is where eslint configs can be set.

This is an example of my config that applies to both the browser and Node.

{
    "env": {
        "browser": true,
        "node": true
    },
    "extends": ["airbnb", "prettier", "plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "no-unused-vars": "warn",
        "no-console": "off",
        "func-names": "off",
        "class-methods-use-this":"warn",
        "node/no-unpublished-require": "off"
    }
}

Alternatively, if you don't want to create the eslint file manually you can do it via the cli.

npm i -g eslint
eslint --init

And that should be it...