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.

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 */
const foo = 123;

Tip: Press cmd + . or click the lightbulb in VSCode

Installation

Install the configuration and the base peer dependencies.

npm i -D eslint concurrently @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-filenames eslint-plugin-import eslint-plugin-no-secrets eslint-plugin-simple-import-sort globals typescript typescript-eslint eslint-import-resolver-typescript eslint-config-triple

Additionally for the React projects

npm i -D eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Additionally for the React Native projects

npm i -D eslint-plugin-react eslint-plugin-react-hooks

Additionally for the Svelte projects

npm i -D eslint-plugin-svelte

Configuration

Create an ESLint configuration file eslint.config.js by running in the root of the project:

npm init @eslint/config@latest

Or if you already have one, try to migrate using:

npx @eslint/migrate-config .eslintrc

Then configure it to extend from this Triple config:

// eslint.config.js
import tripleConfig from "eslint-config-triple/react";
// or
// import tripleConfig from "eslint-config-triple/react-native";
// or
// import tripleConfig from "eslint-config-triple/svelte";

export default [
  ...tripleConfig,

  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.json",
      },
    },
  },

  /* ... */
];

Visual Studio Code

To be able to immediately see linting/formatting issues while your write code and automatically fix them where possible, it is recommended to create or update the following workspace settings and extensions within your project. It is adviced to push these setting to your repository as well. By doing this all developers using VSCode have a consistent experience within the project.

Workspace extensions

In the root of the project create or edit a file .vscode/extensions.json and add the following code.

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint", // eslint extension
    "esbenp.prettier-vscode" // prettier extension
  ]
}

Workspace settings

In the root of the project create or edit a file .vscode/settings.json and add the following code.

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

Automation

package.json scripts

Add the following scripts to your project package.json file. This adds npm run lint and npm run format to validate and npm run fix to auto fix where possible.

// package.json
"scripts": {
  "format": "prettier --check .",
  "format:fix": "prettier --write .",
  "lint": "concurrently -c \"auto\" --kill-others-on-fail \"npm run lint:*(!fix)\"",
  "lint:fix": "concurrently -c \"auto\" \"npm run lint:*(!fix|tsc) -- --fix\"",
  "lint:eslint": "eslint src --color --max-warnings=0",
  "lint:tsc": "tsc --noEmit --pretty",
  "fix": "concurrently -c \"auto\" \"npm run lint:fix\" \"npm run format:fix\"",
}

If your project using Svelte or StyleLint also add and edit the following code in the script section.

// package.json
"scripts": {
  "lint:fix": "concurrently -c \"auto\" \"npm run lint:*(!fix|tsc|svelte-check) -- --fix\"",
  "lint:css": "stylelint \"**/*.{css,scss}\" --color",
  "lint:svelte-check": "svelte-check --fail-on-warnings",
}

It is advised to add the npm run lint and npm run format validation scripts to a pull request pipeline in order to prevent code that contains formatting and/or linting issues is being merged to the main branch.

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 and formatting issues before the are pushed to the repository.

npm install --save-dev husky lint-staged
npx husky init
echo "npx lint-staged" >.husky/pre-commit

Create a configuration file lint-staged.config.js in the root of your project and add the following code.

// lint-staged.config.js
export default {
  "*": "prettier --write --ignore-unknown",
  "*.(js|cjs|mjs|jsx|ts|tsx|svelte)": "eslint --max-warnings 0",
  "*.(ts|tsx)": () => "tsc -p tsconfig.json --noEmit",
  "*.svelte": "svelte-check --fail-on-warnings",
};

If your project uses StyleLint to lint (s)css files also add the following line to the configuration file.

// lint-staged.config.js
export default {
  "*.(css|scss|svelte)": "stylelint --fix",
};