eslint-config

These are my personal configurations for ESLint. They are based on Airbnb’s ESLint configurations.

Overview

This repository contains ESLint configurations for the following setups:

• JavaScript
• JavaScript with React
• TypeScript
• TypeScript with React
• Angular
• Vue

They are designed to be used together with Prettier.

Usage

1. Install the required packages:

   • JavaScript:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb-base

   • JavaScript with React:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb

   • TypeScript:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb-base

   • TypeScript with React:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb

   • Angular:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb

   • Vuejs:

     yarn add --dev @websublime/eslint-config \
       eslint-config-prettier \
       eslint-plugin-vue \
       @typescript-eslint/eslint-plugin \
       @typescript-eslint/parser \
       vue-eslint-parser \
       eslint-plugin-simple-import-sort \
       && npx install-peerdeps --dev eslint-config-airbnb

2. Create the following entry in your package.json file:

   • JavaScript:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config"]
       }
     }

   • JavaScript with React:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config/react"]
       }
     }

   • TypeScript:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config/typescript"]
       }
     }

   • TypeScript with React:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config/typescript-react"]
       }
     }

   • Angular:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config/angular"]
       }
     }

   • Vuejs:

     {
       "eslintConfig": {
         "root": true,
         "extends": ["@websublime/eslint-config/vue"]
       }
     }

3. Add a linting script to your package.json file:

   • JavaScript:

     {
       "scripts": {
         "lint": "eslint --fix --max-warnings 0 ."
       }
     }

   • JavaScript with React:

     {
       "scripts": {
         "lint": "eslint --ext .js,.jsx --fix --max-warnings 0 ."
       }
     }

   • TypeScript:

     {
       "scripts": {
         "lint": "eslint --ext .ts --fix --max-warnings 0 ."
       }
     }

   • TypeScript with React:

     {
       "scripts": {
         "lint": "eslint --ext .ts,.tsx --fix --max-warnings 0 ."
       }
     }