eslint-config-20i

Usage
eslint.config.js
import baseConfig from "@20i/eslint-config"
import reactConfig from "@20i/eslint-config/react"
import pluginQuery from "@tanstack/eslint-plugin-query"
import tsEslint from "typescript-eslint"
export default tsEslint.config(
{
ignores: ["**/generated/**/*"],
},
{
files: ["**/*.{js,jsx,ts,tsx}"],
extends: [
...baseConfig,
...reactConfig,
...pluginQuery.configs["flat/recommended"],
],
languageOptions: {
parserOptions: {
projectService: true,
},
},
rules: {
"react/prop-types": "off",
"no-debugger": "warn",
},
},
{
files: ["./packages/app/src/**/*.{js,jsx,ts,tsx}"],
rules: {
"@typescript-eslint/switch-exhaustiveness-check": "error",
},
}
)
prettier.config.js
We can share prettier configs now! 🎉
import sharedConfig from "@20i/eslint-config/prettier.config"
const config = {
...sharedConfig,
arrowParens: "avoid",
}
export default config
Configure VS Code
-
Make sure these extensions are installed:
code --install-extension dbaeumer.vscode-eslint && \
code --install-extension esbenp.prettier-vscode
-
Add the following to your global ~/.vscode/settings.json
file:
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
// format on save for everything, but what prettier will handle through eslint
"editor.formatOnSave": true,
"[javascriptreact]": {
"editor.formatOnSave": false,
},
"[javascript]": {
"editor.formatOnSave": false,
},
"[typescript]": {
"editor.formatOnSave": false,
},
"[typescriptreact]": {
"editor.formatOnSave": false,
},
}
-
Restart VS Code
References
Inspired heavily by eslint-config-wesbos
Legacy docs (config < 4, eslint < 9)
Auto Install
Use mrm
to install all dependencies and add config files.
npx mrm eslint --preset @20i/mrm-preset
Manual Install
-
Install dev dependencies:
yarn add -D eslint prettier typescript @20i/eslint-config
npm i -D eslint prettier typescript @20i/eslint-config
-
Create a new file, .eslintrc.js
, in the directory of your project.
-
Add the following code to the file.
module.exports = {
extends: ["@20i/eslint-config"],
parserOptions: {
project: ["./tsconfig.eslint.json"],
},
ignorePatterns: [],
}
⚠️ For React projects, set @20i/eslint-config/react
instead.
-
Add a special tsconfig.json
file to your project: tsconfig.eslint.json
{
// extend your base config to share compilerOptions, etc
"extends": "./tsconfig.json",
"compilerOptions": {
// ensure that nobody can accidentally use this config for a build
"noEmit": true,
},
"include": ["**/*", "**/.*"],
}
-
Add the following to your .prettierrc
file:
{
"endOfLine": "auto",
"semi": false,
"trailingComma": "es5",
"plugins": ["prettier-plugin-organize-imports"]
}