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.
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
:
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:
- Pin (exact version) the
@typescript-eslint/eslint-plugin
in package.json
. - Have a
package-lock.json
which locks the version of the @typescript-eslint/parser
sub-dependency.
And both pin/lock to the same version.
npm@<7
npm@<7
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.
npm install --save-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.1.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',
parserOptions: {
project: './tsconfig.json'
}
}
],
}
Note: Please read some important instructions regarding the project
option here.
There are some more parserOptions
you may care about.
Example command line usage:
$ npx eslint .