1 | # eslint-config-airbnb-typescript
|
2 |
|
3 | [![Version](https://img.shields.io/npm/v/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript?activeTab=versions) [![Downloads](https://img.shields.io/npm/dt/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript) [![Last commit](https://img.shields.io/github/last-commit/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/graphs/commit-activity) [![Build](https://img.shields.io/circleci/project/github/iamturns/eslint-config-airbnb-typescript/master.svg?style=flat-square)](https://circleci.com/gh/iamturns/eslint-config-airbnb-typescript) [![License](https://img.shields.io/github/license/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CONTRIBUTING.md) [![Code of conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CODE_OF_CONDUCT.md)
|
4 |
|
5 | Enhances Airbnb's ESLint config with TypeScript support
|
6 |
|
7 | ## Setup
|
8 |
|
9 | ### 1) Setup regular Airbnb config
|
10 |
|
11 | Make sure you have the regular Airbnb config setup. If you are using React, use [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb), or if you aren't using React, use [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base).
|
12 |
|
13 | ### 2) Install dependencies (and peer dependencies)
|
14 |
|
15 | ```bash
|
16 | npm install eslint-config-airbnb-typescript \
|
17 | @typescript-eslint/eslint-plugin@^7.0.0 \
|
18 | @typescript-eslint/parser@^7.0.0 \
|
19 | --save-dev
|
20 | ```
|
21 |
|
22 | ### 3) Configure ESLint
|
23 |
|
24 | Within your ESLint config file:
|
25 |
|
26 | ```diff
|
27 | extends: [
|
28 | 'airbnb',
|
29 | + 'airbnb-typescript'
|
30 | ]
|
31 | ```
|
32 |
|
33 | If you don't need React support:
|
34 |
|
35 | ```diff
|
36 | extends: [
|
37 | 'airbnb-base',
|
38 | + 'airbnb-typescript/base'
|
39 | ]
|
40 | ```
|
41 |
|
42 | ### 4) Configure the ESLint TypeScript parser
|
43 |
|
44 | This config requires knowledge of your TypeScript config.
|
45 |
|
46 | In your ESLint config, set [parserOptions.project](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsproject) to the path of your `tsconfig.json`.
|
47 |
|
48 | For example:
|
49 |
|
50 | ```diff
|
51 | {
|
52 | extends: ['airbnb', 'airbnb-typescript'],
|
53 | + parserOptions: {
|
54 | + project: './tsconfig.json'
|
55 | + }
|
56 | }
|
57 | ```
|
58 |
|
59 | ### 5) Run ESLint
|
60 |
|
61 | Open a terminal to the root of your project, and run the following command:
|
62 |
|
63 | ```
|
64 | npx eslint . --ext .js,.jsx,.ts,.tsx
|
65 | ```
|
66 |
|
67 | ESLint will lint all .js, .jsx, .ts, and .tsx files within the current folder, and output results to your terminal.
|
68 |
|
69 | You can also get results in realtime inside most IDEs via a plugin.
|
70 |
|
71 | ## FAQ
|
72 |
|
73 | ### I get this error when running ESLint: "The file must be included in at least one of the projects provided"
|
74 |
|
75 | This means you are attempting to lint a file that `tsconfig.json` doesn't include.
|
76 |
|
77 | A common fix is to create a `tsconfig.eslint.json` file, which extends your `tsconfig.json` file and includes all files you are linting.
|
78 |
|
79 | ```json
|
80 | {
|
81 | "extends": "./tsconfig.json",
|
82 | "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
|
83 | }
|
84 | ```
|
85 |
|
86 | Update your ESLint config file:
|
87 |
|
88 | ```diff
|
89 | parserOptions: {
|
90 | - project: './tsconfig.json',
|
91 | + project: './tsconfig.eslint.json',
|
92 | }
|
93 | ```
|
94 |
|
95 | ### Why do I need the peer dependencies?
|
96 |
|
97 | `@typescript-eslint/eslint-plugin` is a peer dependency due to a limitation within ESLint. See [issue](https://github.com/eslint/eslint/issues/3458), [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification), and [progress](https://github.com/eslint/eslint/issues/13481).
|
98 |
|
99 | `@typescript-eslint/parser` is a peer dependency because the version number must match `@typescript-eslint/eslint-plugin`.
|
100 |
|
101 | ### I wish this config would support [...]
|
102 |
|
103 | This config simply enhances the Airbnb with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:
|
104 |
|
105 | ```js
|
106 | module.exports = {
|
107 | extends: [
|
108 | 'airbnb',
|
109 | 'airbnb-typescript',
|
110 | 'airbnb/hooks',
|
111 | 'plugin:@typescript-eslint/recommended-type-checked', // @typescript-eslint @v6
|
112 | 'plugin:@typescript-eslint/stylistic-type-checked', // @typescript-eslint @v6
|
113 | // 'plugin:@typescript-eslint/recommended', // @typescript-eslint @v5
|
114 | // 'plugin:@typescript-eslint/recommended-requiring-type-checking', // @typescript-eslint @v5
|
115 | ],
|
116 | };
|
117 | ```
|
118 |
|
119 | My personal ESLint config file with support for Jest, Promises, and Prettier can be found in [create-exposed-app](https://github.com/iamturns/create-exposed-app/blob/master/.eslintrc.js).
|
120 |
|
121 | ### Why is `import/no-unresolved` disabled?
|
122 |
|
123 | Two reasons:
|
124 |
|
125 | 1. It requires additional configuration, which may be different for monorepo's, webpack usage, etc
|
126 | 2. The rule offers little value in a TypeScript world, as the TypeScript compiler will catch these errors
|
127 |
|
128 | If you would like to enable this rule, then:
|
129 |
|
130 | - Enable the rule within your config: `'import/no-unresolved': 'error'`
|
131 | - Install and configure the TypeScript import resolver: [eslint-import-resolver-typescript](https://www.npmjs.com/package/eslint-import-resolver-typescript)
|
132 |
|
133 | ## Additional Documentation
|
134 |
|
135 | - [CHANGELOG.md](CHANGELOG.md)
|
136 | - [DEVELOPING.md](DEVELOPING.md)
|
137 | - [CONTRIBUTING.md](CONTRIBUTING.md)
|
138 | - [MAINTAINING.md](MAINTAINING.md)
|
139 |
|
140 | ## Credits
|
141 |
|
142 | Authored and maintained by Matt Turnbull ([iamturns.com](https://iamturns.com) / [@iamturns](https://twitter.com/iamturns))
|
143 |
|
144 | A big thank you to all [contributors](https://github.com/iamturns/eslint-config-airbnb-typescript/graphs/contributors)!
|
145 |
|
146 | ## License
|
147 |
|
148 | Open source [licensed as MIT](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/LICENSE).
|