Visual Studio Code - ESLint, Prettier, JSConfig & Airbnb Setup For JS / React Projects

---

This document outlines a setup for React projects in VS Code.

Implements the following:

• Linting rules using Airbnb style guide & ESLint
• Formatting code with the Prettier Extension
• Using absolute paths/imports with jsconfig.json

Notes & Info

The following installation & setup guide is for the create-react-app and are only tested using it and not on other React app configurations.

• More advanced configurations of webpack & babel are possible but are not included in this guide.

• These guide uses npm as installation, although you can use YARN but commands are not provided.

---

📝 Table of Contents

• Quick Start
• ESLint
• Airbnb Styles
• Prettier
• Absolute Paths For Imports
• Tutorials & Resources

---

Dependencies & Installation Instructions

Quickstart

Install all devDependencies in one line

npm install eslint eslint-config-airbnb eslint-config-node eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier --save-dev

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Installation

Local Install

npm install eslint --save-dev

Global Install (Not Recommended)

• It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

npm install eslint --global

See Docs

• Getting Started Guide: ESLint

---

Airbnb Styles Guide & ESLint

Airbnb Styles Guide ESLint NPM

NPM Package Link: eslint-config-airbnb

Airbnb-ESLint Installation For React

Run For React Projects

npm info "eslint-config-airbnb@latest" peerDependencies

OR Shortcut For React Projects

npx install-peerdeps --dev eslint-config-airbnb

Troubleshooting Tip

If npm errors out and you receive a message like ERR undefined in your terminal try :

npm install eslint-config-airbnb@18.2.1 eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^1.7.0 --save-dev

Run Eslint Init (create .eslintrc.json)

This will walk you through a config setup. Skip if you wish and just go to create a .eslintrc.json file yourself.

If you make a mistake in the setup it doesn't matter. You can change anything in the .eslintrc.json file whenever you wish.

npx eslint --init

OR to create an empty config file

echo {}> .eslintrc.json

Example ESlint & Airbnb & Prettier

Add to the .eslintrc.json config file for example:

• Note if you don't want to use Prettier mentions of it in this file

// .eslintrc.json
{
  "extends": ["airbnb", "airbnb/hooks", "plugin:prettier/recommended"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "warn",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

You can also create an ESLint ignore file .eslintignore to ignore folders or files

// .eslintignore
public/**
node_modules/**
coverage/**
src/registerServiceWorker.js

See the Docs

• ESLint Rules

• ESLint Config

• ESLint User Guide

• Note For Usage Without React Use eslint-config-airbnb-base

---

Prettier

Prettier VS CODE

Get the Prettier Extension & Install for VS Code

• Prettier Extension in VS Code

Installation

Install Prettier locally

npm install --save-dev --save-exact prettier

Create an empty config file with Git

touch .prettierrc

Example Prettier

Add to .prettierrc your configuration settings for example:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70
}

See the docs

• Prettier Configuration Docs

---

Absolute Paths React

What Are Absolute Paths?

Instead of...

import Icon from './../../components/icon';

Absolute paths allow imports like so:

import Icon from components/icon';

To use absolute paths in React

• Create jsconfig.json file with Git

touch jsconfig.json

• & add something like...

Example

{
  "compilerOptions": {
    "baseUrl": "src",
    "module": "commonjs",
    "target": "es2016",
    "jsx": "react"
  },
  "exclude": ["node_modules", "**/node_modules/*"],
  "include": ["src"]
}

In the above example we assume that the src folder is the directory where all the code lives for the React project.

Therefore src will be your base path for the imports. Otherwise you can modify the configuration above to fit your project's needs.

Another Simple Example:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Note About JavaScript projects (jsconfig.json)

"exclude": ["node_modules", "**/node_modules/*"], or the include line allows refers to including or excluding node modules from these from type checking & and Intellisense stuff in VS Code. See more details about setuping up a jsconfig in the VS Code docs: Working with JavaScript

---

Additional Configurations Examples & Tutorials

Paulo Ramos Examples

• Paulo Ramos Github: eslint-prettier-airbnb-react

Colt Steele Tutorial

• Improve Your Code With ESLint + VsCode + Airbnb Styleguide

Wes Bos Tutorial

• ESLint + Prettier + VS Code — The Perfect Setup

Traversy Media Tutorial

• VSCode ESLint, Prettier & Airbnb Style Guide Setup
• Github Setup Tutorial

THOMAS LOMBART

• THOMAS LOMBART Tutorial