eslint-config-standard-with-typescript

What is eslint-config-standard-with-typescript?

The eslint-config-standard-with-typescript package is an ESLint shareable config that extends the popular eslint-config-standard with TypeScript support. It provides a set of rules and configurations to enforce standard JavaScript and TypeScript coding styles, ensuring code quality and consistency across projects.

What are eslint-config-standard-with-typescript's main functionalities?

Standard JavaScript Style

This configuration extends the standard JavaScript style guide with TypeScript support. It ensures that your code adheres to a consistent style, making it easier to read and maintain.

{"extends":["standard-with-typescript"],"parserOptions":{"project":"./tsconfig.json"}}

TypeScript Specific Rules

This configuration includes TypeScript-specific rules, such as enforcing explicit return types for functions and warning about unused variables. These rules help catch common TypeScript issues early in the development process.

{"extends":["standard-with-typescript"],"parserOptions":{"project":"./tsconfig.json"},"rules":{"@typescript-eslint/explicit-function-return-type":"error","@typescript-eslint/no-unused-vars":"warn"}}

Integration with Prettier

This configuration can be extended to integrate with Prettier, a code formatter. This ensures that your code is not only linted but also formatted according to a consistent style, reducing the need for manual formatting.

{"extends":["standard-with-typescript","prettier"],"parserOptions":{"project":"./tsconfig.json"}}

Other packages similar to eslint-config-standard-with-typescript

eslint-config-airbnb-typescript

The eslint-config-airbnb-typescript package extends the popular Airbnb JavaScript style guide with TypeScript support. It provides a comprehensive set of rules for both JavaScript and TypeScript, ensuring high code quality and consistency. Compared to eslint-config-standard-with-typescript, it has a more opinionated set of rules and is often considered stricter.

eslint-config-typescript

The eslint-config-typescript package is a shareable ESLint configuration for TypeScript projects. It focuses solely on TypeScript rules and does not extend any specific JavaScript style guide. This makes it more flexible but requires additional configuration to enforce a consistent coding style. It is less opinionated compared to eslint-config-standard-with-typescript.

typescript-eslint

The typescript-eslint package is a set of tools for using ESLint with TypeScript. It includes a parser and a set of rules specifically designed for TypeScript. While it does not provide a complete configuration out of the box, it allows for highly customizable linting setups. It is more modular compared to eslint-config-standard-with-typescript.

README

An ESLint shareable config for TypeScript that is based on eslint-config-standard and has TypeScript specific rules from @typescript-eslint/eslint-plugin.

Peer dependencies

This package specifies the following peerDependencies:

• TypeScript, which you may already have installed
• ESLint
• 3 Peer dependencies of eslint-config-standard
• @typescript-eslint/eslint-plugin; ESLint rules for TypeScript.

Yes, this is a large number of peerDependencies. This is due to a known limitation in ESLint.

@typescript-eslint dependencies

This package has @typescript-eslint/parser in dependencies.
And it has @typescript-eslint/eslint-plugin in peerDependencies.
Both are specified as ranges. It's probably safest for the installed versions of these packages to be the same. This can be achieved by:

1. Pin (exact version) the @typescript-eslint/eslint-plugin in package.json.
2. Have a package-lock.json which locks the version of the @typescript-eslint/parser sub-dependency.

And both pin/lock to the same version.

Yarn

Yarn does not automatically install peerDependencies, so if that's what you're using, install them manually. Here is an example, but use it only for reference, because your decisions regarding version ranges and range specifiers may vary.

yarn add --dev \
  typescript@\* \
  eslint@^8.0.1 \
  eslint-plugin-promise@^6.0.0 \
  eslint-plugin-import@^2.25.2 \
  eslint-plugin-n@^15.0.0 \
  @typescript-eslint/eslint-plugin@^6.4.0 \
  eslint-config-standard-with-typescript@latest

Example config

Here is an example .eslintrc.js. Pay close attention to the files property, because it determines which files are linted.

module.exports = {
  overrides: [
    {
      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
      extends: 'standard-with-typescript'
    }
  ],
}

Note: the config exported by this package sets parserOptions.project = true. Read about the project option here.

There are some more parserOptions you may care about.

Example command line usage:

$ npx eslint .

Changelog

43.0.0 (2023-12-16)

⚠ BREAKING CHANGES

• add rule @typescript-eslint/prefer-return-this-type

Features

• @typescript-eslint/prefer-return-this-type (d987ba3)