A strict ESLint configuration
This is a strict shareable ESLint configuration. All ESLint core rules and a variety of ESLint plugins have been carefully considered. Overrides are used to apply rules based on context.
Install eslint-config-remcohaszing
using npm
.
npm install --save-dev \
eslint \
eslint-config-remcohaszing \
prettier
First configure Prettier. For example, create a
.editorconfig
with the following content:
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 100
trim_trailing_whitespace = true
And create a .prettierrc.yaml
with the following content:
proseWrap: always
singleQuote: true
trailingComma: all
The configuration may be tweaked to your liking. Beware eslint-config-remcohaszing
bases some rule
configurations on the Prettier configuration, but doesn’t support
overrides.
Next, create .eslintrc.yaml
with the following content:
root: true
extends:
- remcohaszing
Most ESLint settings are tweaked to have a proper default. There is one setting that needs to be
configured if your project uses a build process and provides an executable command:
node.convertPath
. See
n/no-unpublished-import
for details.
settings:
node:
convertPath:
'src/**':
- 'src/(.+?)\.tsx?$'
- dist/$1.js
This configuration enabled ESLint for TypeScript automatically.
Some rules from @typescript-eslint/eslint-plugin
require TypeScript type checking features to be
enabled. Unfortunately, this makes ESLint slow. Enabling these rules is recommended for small
projects only. To enable this, add the following to .eslintrc.yaml
:
root: true
extends:
- remcohaszing
- remcohaszing/typechecking
This sets the project configuration to tsconfig.json
. To change it, see
@typescript-eslint/parser
JSX syntax is supported by default in .jsx
and .tsx
files. This requires some additional
dependencies to be installed:
npm install --save-dev \
eslint-plugin-jsx-a11y \
eslint-plugin-react
The pragma is set to h
by default.
For React and Preact some special configurations are recommended.
An additional dependency is required:
npm install --save-dev eslint-plugin-react-hooks
The configurations can be applied by extending remcohaszing/react
or remcohaszing/preact
respectively. The extends
may be on the top level of the ESLint configuration or in an override.
React example:
root: true
extends:
- remcohaszing
overrides:
- files:
- 'src/**'
extends:
- remcohaszing/react
Preact example:
root: true
extends:
- remcohaszing
overrides:
- files:
- 'src/**'
extends:
- remcohaszing/preact
Code blocks in Markdown are linted by default using
eslint-plugin-markdown
.
prettier/prettier
is disabled, because it doesn’t play nice with eslint-plugin-markdown
.
The type checking rules from @typescript-eslint/eslint-plugin
don’t work with
eslint-plugin-markdown
. To work around this, tag TypeScript code blocks with typescript
, not
ts
or tsx
.
Other rules have been turned off, because these rules may conflict with the purpose of the documentation.
To not lint Markdown files, ignore them.
ignorePatterns:
- '*.md'
By default ESLint ignores node_modules/
and all dotfiles. This ESLint configuration unignores
dotfiles and passes the patterns from .gitignore
to ESLint in addition to those in
.eslintignore
. Typically this means you won’t need a .eslintignore
file.
All ESLint that are turned on will trigger error, not warnings. The notable exceptions are the following rules:
import-x/no-deprecated
react/no-deprecated
This is to allow a smooth migration if a dependency decides to deprecate an API. To turn make warnings cause ESLint to exit with exit code 1, run:
eslint --max-warnings 0 .