eslint-config-triple

Unified ESlint config for Triple projects

This config is an effort to reduce duplicated configuration across projects.
The goal is not to prescribe a fixed set of linting rules.
This config should be considered a starting point which can be tweaked to the project needs.

Prettier (Use prettier formatting as base)
Airbnb (For remaining formatting + coding practises)
Typescript recommendations (Typescript coding practises)

The rules where the config deviates from these presets are documented in eslint-config-triple source files.

When you agree with the rule in general but not for a specific scenario use comments like:
/* eslint-disable-next-line rulename */ (Tip: Press cmd + . or click the lightbulb in VSCode)

Installation

npm install --save-dev \
  concurrently \
  eslint \
  typescript \
  prettier \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint-config-airbnb-typescript \
  eslint-config-prettier \
  eslint-plugin-prettier \
  eslint-plugin-only-warn \
  eslint-plugin-import \
  eslint-import-resolver-typescript \
  eslint-config-triple

For the React projects:

npm install --save-dev \
  eslint-config-airbnb \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y

For the Svelte projects:

npm install --save-dev \
  eslint-config-airbnb-base \
  eslint-plugin-svelte3

Other projects:

npm install --save-dev eslint-config-airbnb-base

Usage

The config uses the prettier integration, therefore certain config files heavily impact the formatting:

Important!
Remove existing .prettierrc and .editorconfig files from your project and modify your package.json to include:

"prettier": "eslint-config-triple/.prettierrc"

ESLint

Create a .eslintrc with:

{
  "extends": ["triple"],
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

For React projects change: "extends": ["triple"] into "extends": ["triple/react"]

For Svelte projects change: "extends": ["triple"] into "extends": ["triple/svelte"] and add "extraFileExtensions": [".cjs", ".svelte"] to the parserOptions.

Trouble with linting js files?

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config:

Change "project": "./tsconfig.json" to "project": "./tsconfig.eslint.json"

Create the tsconfig.eslint.json and add additional include paths:

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.svelte",
    ".*.js",
    "**/*.js",
    "**/*.jsx",
    ".*.cjs",
    "**/*.cjs"
  ]
}

Automation

package.json scripts

  "scripts": {
    "lint": "concurrently --kill-others-on-fail \"npm:lint:*\"",
    "lint:prettier": "prettier --check --loglevel=warn src",
    "lint:tsc": "tsc --noEmit",
    "lint:eslint": "eslint --ext=js,jsx,ts,tsx --max-warnings=0 src",
    "format": "prettier --write src && eslint --ext=js,jsx,ts,tsx --fix src",

For Svelte projects add:

  "lint:svelte-check": "svelte-check --fail-on-warnings --fail-on-hints",

This adds npm run lint to validate and npm run format to autofix where possible.

Husky & Lint-staged

It's recommended to add husky and lint-staged which will verify the code in a git pre-commit hook. This helps fixing linting issues before the npm run lint is run on CI.

  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --max-warnings 0 --no-ignore",
      "sh -c 'tsc -p tsconfig.json --noEmit'"
    ],
    "*.(js|cjs|mjs|jsx)": [
      "eslint --max-warnings 0 --no-ignore"
    ],
    "*.(json|scss|md)": [
      "prettier --check --loglevel=warn"
    ]
  }

For Svelte projects add:

  "*.svelte": [
      "svelte-check --fail-on-warnings --fail-on-hints",
      "prettier --check"
    ]

npm