Setting up eslint, prettier, airbnb-base and typescript

Updated February 2023

Set up your app for success with consistent style guide enforcement.

Example: nielse63/eslint-airbnb-base-prettier-typescript-example

Install Dependencies

# eslint-config-airbnb-base and all peerDependencies
npx install-peerdeps --dev eslint-config-airbnb-base

# install all other devDependencies
npm install eslint-config-airbnb-typescript \
    @typescript-eslint/eslint-plugin@^5.13.0 \
    @typescript-eslint/parser@^5.0.0 \
    typescript \
    prettier \
    eslint-plugin-prettier \
    eslint-config-prettier \
    --save-dev

Create Config Files

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "*": ["./src/*"]
    },
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": ["./**/*.ts", "./**/*.js", "./.*.js"]
}

.eslintrc.js

module.exports = {
  root: true,
  plugins: ['@typescript-eslint', 'import', 'prettier'],
  extends: [
    'airbnb-typescript/base',
    'prettier',
    'plugin:@typescript-eslint/recommended'…