#
Setup a polyrepo
Execute the following steps to setup ESLint for a polyrepo solution (single project per repository) 👇
#
Install the packages
Open a terminal at the root of the solution and install the following packages:
pnpm add -D @workleap/eslint-plugin eslint @typescript-eslint/parser
yarn add -D @workleap/eslint-plugin eslint @typescript-eslint/parser
npm install -D @workleap/eslint-plugin eslint @typescript-eslint/parser
#
Configure ESLint
First, create a configuration file named .eslintrc.json
at the root of the solution:
root
βββ src
βββββ ...
βββ package.json
βββ .eslintrc.json
Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/eslint-plugin
👇
#
web-application
For an application developed with TypeScript and React, use the following configuration:
{
"$schema": "https://json.schemastore.org/eslintrc",
"root": true,
"extends": "plugin:@workleap/web-application"
}
#
react-library
For a TypeScript library developed with React, use the following configuration:
{
"$schema": "https://json.schemastore.org/eslintrc",
"root": true,
"extends": "plugin:@workleap/react-library"
}
#
typescript-library
For a TypeScript library developed without React, use the following configuration:
{
"$schema": "https://json.schemastore.org/eslintrc",
"root": true,
"extends": "plugin:@workleap/typescript-library"
}
#
.eslintignore
ESLint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.
To do so, first, create an .eslintignore
file at the root of the solution:
root
βββ src
βββββ ...
βββ package.json
βββ .eslintrc.json
βββ .eslintignore
Then, open the newly created file and paste the following ignore rules:
**/dist/*
node_modules
__snapshots__
storybook-static
pnpm-lock.yaml
package-lock.json
*.md
!.storybook
While only the .storybook
dot folder is listed, you should include any other dot folders that need to be linted.
#
Configure the indent style
ESLint offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.
To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.
First, create a .editorconfig
file at the root of the solution:
root
βββ src
βββββ ...
βββ package.json
βββ .eslintrc.json
βββ .eslintignore
βββ .editorconfig
Then, open the newly created file and paste the following configuration:
root = true
[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 4
[*.md]
trim_trailing_whitespace = false
Finally, install the EditorConfig.EditorConfig VS Code extension.
#
Add a CLI script
At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json
file:
{
"lint:eslint:": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint"
}
The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as
--ext .js,.ts,.tsx
.
#
Custom configuration
New projects shouldn't have to customize the default configurations offered by @workleap/eslint-plugin
. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in ❤️✌️.
#
Try it 🚀
To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. var x = 0;
), then save. Open a terminal at the root of the solution and execute the
pnpm lint:eslint
yarn lint:eslint
npm run lint:eslint
The terminal should output a linting error.