Unified ESlint config for Triple projects
> 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:
``js`
/ eslint-disable-next-line rulename /
const foo = 123;
> Tip: Press cmd + . or click the lightbulb in VSCode
Install the configuration and the base peer dependencies.
`sh`
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
`sh`
npm i -D eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
`sh`
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-triple-rn-a11y
`sh`
npm i -D eslint-plugin-svelte
Create an ESLint configuration file eslint.config.js by running in the root of the project:
`sh`
npm init @eslint/config@latest
Or if you already have one, try to migrate using:
`sh`
npx @eslint/migrate-config .eslintrc
Then configure it to extend from this Triple config:
`js
// 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",
},
},
},
/ ... /
];
`
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.
In the root of the project create or edit a file .vscode/extensions.json and add the following code.
`jsonc`
// .vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint", // eslint extension
"esbenp.prettier-vscode", // prettier extension
],
}
In the root of the project create or edit a file .vscode/settings.json and add the following code.
`jsonc`
//.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" },
}
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.
`jsonc`
// 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.
`jsonc`
// 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.
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.
`sh`
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.
`js`
// 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.
`js``
// lint-staged.config.js
export default {
"*.(css|scss|svelte)": "stylelint --fix",
};