Eslint, Airbnb, Typescript & Prettier Configuration

An eslint configuration that integrates the following into one package for easy installation and setup:

• eslint-config-airbnb-base
• eslint-config-airbnb-typescript-base
• @typescript-eslint/eslint-plugin
• prettier
• eslint-config-prettier
• eslint-plugin-import

Assumptions

1. You have typescript installed
2. You have a tsconfig.json in your project root
3. You have installed a version of Node greater than 8
4. You have installed npm version 7 or greater

Installation

If you aren't using npm version greater than 7 you will have to manually install these dependencies:

• eslint
• prettier
• @typescript-eslint/eslint-plugin

Copy everything inside the peer dependencies object here and paste it into your dev dependencies object. This will ensure you have the correct versions installed

Install with npm

1npm install --save-dev eslint-config-typescript-airbnb-prettier

Setup

Create a .eslintrc.js file in your project root

1touch .eslintrc.js

Paste the following into .eslintrc.js

1module.exports = {
2  extends: "typescript-airbnb-prettier",
3};

Add the following commands into the scripts object in your package.json

1"lint": "prettier --write . && eslint src/**",
2"lint-fix": "prettier --write . && eslint src/** --fix"

An example scripts object might look like this

1"scripts": {
2  "dev": "vite",
3  "build": "tsc && vite build",
4  "serve": "vite preview",
5  "lint": "prettier --write . && eslint src/**",
6  "lint-fix": "prettier --write . && eslint src/** --fix"
7},

Create an .eslintignore in your project root

touch .eslintignore

Paste the following into .eslintignore

.eslintrc.js
node_modules/**

Create an .prettierignore in your project root

touch .prettierignore

Paste the following into .prettierignore

node_modules/*

Usage

1npm run lint

or to make eslint auto fix any issues it's capable of fixing

1npm run lint-fix

Customisation

This eslint config can be altered and extended by editing .eslintrc.js

Prettier can be altered and extended by creating and modifying .prettierrc