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"
]