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
- You have typescript installed
- You have a
tsconfig.json
in your project root - You have installed a version of Node greater than 8
- 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
npm install --save-dev eslint-config-typescript-airbnb-prettier
Setup
Create a .eslintrc.js file in your project root
touch .eslintrc.js
Paste the following into .eslintrc.js
module.exports = {
extends: "typescript-airbnb-prettier",
};
Add the following commands into the scripts object in your package.json
"lint": "prettier --write . && eslint src/**",
"lint-fix": "prettier --write . && eslint src/** --fix"
An example scripts object might look like this
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"lint": "prettier --write . && eslint src/**",
"lint-fix": "prettier --write . && eslint src/** --fix"
},
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
npm run lint
or to make eslint auto fix any issues it's capable of fixing
npm 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