June 03, 2020

ESLint & Prettier for VS Code: Quick Setup

Requirement: Install Node.js

In your Github repo, be sure in your ".gitignore" file to add node_modules. This will prevent git from pushing this giant file full of dependencies to your master.

In your repo also add a new file called "package.json", I use the command npm init -y

ESLint Getting Started

cd into your repo and type this command npm i eslint --save-dev. This installs eslint in your repo. You could install this globally if you wish, but for now we'll keep it simple.

Next we want to create a new file called ".eslintrc.json", and in that we want to paste in the following code.

{
    "env": {
        "browser": true,
        "es6": true,
        "jquery": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "globals": {
        "$": true,
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 11
    },
    "rules": {
        "indent": ["error", "tab"],
        "linebreak-style": 0,
        "quotes": ["error", "single"],
        "semi": ["error", "always"]
    },
    "plugins": ["prettier"]
}

Prettier Getting Started

To install prettier, use this command npm install --save-dev --save-exact prettier

In your "package.json" file add this. This will allow prettier to actively watch and format as you type.

  "scripts": {
    //...
    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
  }

In VS Code editor

In "settings.json" for VS Code, be sure this is added.

    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },

Once this is saved, you should be set. Adjust as needed.

Copyright © 2020. Jake Birkes