Eslint-config-remcohaszing NPM

eslint-config-remcohaszing

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.

Installation

Install eslint-config-remcohaszing using npm.

npm install --save-dev \
  eslint \
  eslint-config-remcohaszing \
  prettier

Configuration

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

Settings

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

Web

The default configuration works for Node.js projects. For web based projects it’s recommended to use the remcohaszing/web preset for the source files. This preset requires eslint-plugin-compat to have been installed:

npm install --save-dev eslint-plugin-compat

Example if the source files are in the src directory:

root: true
settings:
  polyfills:
    - fetch
    - Promise
extends:
  - remcohaszing
overrides:
  - files:
      - 'src/**'
    extends:
      - remcohaszing/web

It’s recommended to also create a browserslist file. For example:

last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions

TypeScript

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

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.

React / Preact

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
      - remcohaszing/web

Preact example:

root: true
extends:
  - remcohaszing
overrides:
  - files:
      - 'src/**'
    extends:
      - remcohaszing/preact

Markdown

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'

Ignored files

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.