This package implements the rules of the opinionated, yet universally applicable JavaScript code style guide as an extensible shared ESLint configuration with plugin support for TypeScript through the official TypeScript ESLint project as well as compatibility integrations for other projects like Prettier.

Getting Started

To enable support for React and JSX A11Y plugin rules as well as compatibility integrations for Prettier, use the shareable rule configuration package @svengreb/eslint-config.

To only use the ESLint core and eslint-plugin-import rules, please use the base configurations of the @svengreb/eslint-config-base package.

Note that this package uses npm version 7.7.0 or higher as the main package manager, but the documentations also include instructions to work with Yarn (classic / v1).

Installation

Add the package as development dependency to your project:

# With npm...
npm install --save-dev @svengreb/eslint-config-typescript

# or Yarn.
yarn add --dev @svengreb/eslint-config-typescript

Note that peer dependencies, like the remark-lint package itself, are only installed automatically when using a npm version equal or higher than 7.0.0, otherwise they must be installed separately like described in the peer dependencies section below. See the Node distribution index for more information about which npm version is bundled with which Node version.

Peer Dependencies

This package depends on the @typescript-eslint/parser, @typescript-eslint/eslint-plugin and typescript packages defined as peer dependencies. Since this configuration provides an integration entry point for Prettier , the additional eslint-plugin-prettier, `eslint-config-prettier peer dependencies are also required.

npm versions >=7.0.0

As of npm version 7.0.0, peer dependencies are installed automatically and does not require any additional steps.

npm versions >=5.0.0 <7.0.0

For npm version equal to or higher than 5.0.0 (pre-bundled with Node.js 8) but less than 7.0.0, all peer dependencies can be auto-installed using the pre-bundled npx package:

npx install-peerdeps --dev @svengreb/eslint-config-typescript

npm versions <5.0.0

If you’re using a npm version less than 5.0.0, the npx package is not pre-bundled, but users can either simply install the npx package globally to run the above command or use the install-peerdeps helper package locally/globally to let it handle the installation of all peer dependencies:

# Install and use the "install-peerdeps" helper package locally...
npm install install-peerdeps
./node_modules/.bin/install-peerdeps --dev @svengreb/eslint-config-typescript

# ...or globally.
npm install --global install-peerdeps
install-peerdeps --dev @svengreb/eslint-config-typescript

To install all peer dependencies manually without npx or any helper package, the npm info command can be used to get a list of all packages and their versions:

# List the names and versions of all peer dependencies...
npm info "@svengreb/eslint-config-typescript" peerDependencies

# ...and install each listed package manually.
npm install PACKAGE@VERSION

Usage

This provides a shareable configuration preset that can be used by extending the ESLint configuration file. Add @svengreb/eslint-config-typescript and/or any of the additional entry points to the extends array in your .eslintrc configuration file:

module.exports = {
  extends: [
    /* Provides and configures specific rules for TypeScript. */
    "@svengreb/eslint-config-typescript"
    /*
     * Optional entry point to enable support for projects using Prettier.
     * Note that this must always be placed after the `@svengreb/eslint-config-typescript` preset to take
     * precedence, otherwise it won't prevent errors due to useless and possibly conflicting rules!
     */
    "@svengreb/eslint-config-typescript/prettier"
  ]
};

As of @typescript-eslint/parser version 2.0.0 (also see typescript-eslint/typescript-eslint#890), the parser will panic when parsing files that are not included within the provided tsconfig(s). The project field passed to ESLint's parserOptions object is required and must point to a valid tsconfig file where the include field is correctly set up to contain pattern for all files that should be linted.

Set the project field in your eslintrc to the path of your tsconfig and optionally also set the tsconfigRootDir when working with multiple tsconfigs:

module.exports = {
  // ...
  parserOptions: {
    project: "./tsconfig.json",
  },
  // ...
};

Ensure your tsconfig is correctly configured to provide all file pattern for files that should be linted in the include array and optionally define pattern that should be excluded:

{
  // ...
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "test/**/*.ts",
    "test/**/*.tsx",
    "typings/**/*.ts"
    // ...
  ]
  // ...
}

The extends feature for tsconfigs can be used to prevent code duplication by extending the root tsconfig and only overriding the include file or any other fields.

See the @typescript-eslint/parser configuration documentation for all details about the parserOptions field(s) and the TypScript tsconfig documentation to correctly configure the include file pattern.

Entry Points

This package provides multiple entry points that can be composed especially for the projects they are used in:

• @svengreb/eslint-config-typescript — The default entry point that includes the specific rules for TypeScript by extending the lightweight and recommended shared configurations of the @typescript-eslint/eslint-plugin and eslint-config-prettier packages as well as overriding and adjusting various plugin and core rules to ensure the best compatibility with TypeScript:
  • @typescript-eslint/eslint-recommended — Disables ESLint core rules that are already handled by TypeScript.
  • @typescript-eslint/recommended — Slim and recommended set of rules for TypeScript that does not require type information.
  • @typescript-eslint/recommended-requiring-type-checking — Additionally enable the slightly expanded set of rules that require type information. It also disables some ESLint core rules for compatibility since they are already handled by TypeScript.
• @svengreb/eslint-config-typescript/prettier — Entry point to enable support for Prettier through eslint-plugin-prettier and the officially recommended Prettier ESLint configuration using the eslint-config-prettier package. It disables possibly conflicting rules and rules that definitely not needed when using Prettier for code formatting. There is also additional support when Prettier is used for TypeScript based projects by extending the special prettier/@typescript-eslint configuration that also disables specific react/* and JSX rules. Note that this configuration should always be placed after @svengreb/eslint-config-typescript in order to override conflicting rules, otherwise the @svengreb/eslint-config-typescript preset will take precedence leaving conflicting rules untouched!

Contributing

Please read the contribution guidelines of the JavaScript style guide project for detailed information.