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 the default configuration which can be tweaked to the project needs.

• Prettier (Disable rules that conflict with prettier)
• Airbnb (For remaining formatting + coding practices)
• Typescript recommendations (Typescript coding practices)

The rules where this 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-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-svelte

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 the project and add the following line to the root of the package.json to include:

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

ESLint

Create a .eslintrc with:

{
  "root": true,
  "extends": ["triple"],
  "env": { "browser": true, "node": true }
}

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

For Svelte projects change: "extends": ["triple"] into "extends": ["triple/svelte"]

Trouble with linting js files?

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

Add a "parserOptions": { "project": "./tsconfig.eslint.json" } to your .eslintrc

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",
    "./*.config.ts"
  ]
}

Visual Studio Code

To see warnings and apply formatting while coding, install the extensions:

• ESLint
• Prettier - Code formatter

And in your vscode's settings.json add:

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
},
"eslint.validate": ["svelte", "javascript"],
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

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": "eslint --ext=js,jsx,ts,tsx --fix src && prettier --write src ",

For Svelte projects add:

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

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 can verify the code in a git pre-commit or pre-push hook. This helps fixing linting issues before the npm run lint step runs on CI.

npm install --save-dev husky lint-staged
npm pkg set scripts.prepare="husky install" scripts.precommit="lint-staged"
npm run prepare
npx husky add .husky/pre-commit "npm run precommit"

Add to package.json:

  "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"
    ],
    "*.(ts|tsx|json|scss|md)": [
      "prettier --check --loglevel=warn"
    ]
  }

For Svelte projects also add:

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