diff --git a/.eslintrc.js b/.eslintrc.js index c03704b..d89dabf 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { - extends: ['./base.js', 'prettier'], + extends: ['eslint-config-airbnb-base', './base.js', 'prettier'], parserOptions: { project: './tsconfig.json', }, diff --git a/README.md b/README.md index 8161ddc..2d84a01 100644 --- a/README.md +++ b/README.md @@ -2,49 +2,41 @@ [![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) -Airbnb's ESLint config with TypeScript support +Enhances Airbnb's ESLint config with TypeScript support ## Setup -### 1) Install +### 1) Setup regular Airbnb config -``` -npm install eslint-config-airbnb-typescript --save-dev -``` - -### 2) Install ESLint plugins +Make sure you have the regular Airbnb config setup. See [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb), or [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) if you're not using React. -ESLint plugins used by this config must also be installed within your project. This is a limitation within ESLint (see [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification) and [progress](https://github.com/eslint/eslint/issues/13481)). +### 2) Install this config (and peer dependencies) ```bash -npm install eslint-plugin-import@^2.22.0 \ - eslint-plugin-jsx-a11y@^6.3.1 \ - eslint-plugin-react@^7.20.3 \ - eslint-plugin-react-hooks@^4.0.8 \ - @typescript-eslint/eslint-plugin@^4.4.1 \ - --save-dev -``` - -If you don't need React support: - -```bash -npm install eslint-plugin-import@^2.22.0 \ - @typescript-eslint/eslint-plugin@^4.4.1 \ +npm install eslint-config-airbnb-typescript \ + @typescript-eslint/eslint-plugin \ + @typescript-eslint/parser \ --save-dev ``` ### 3) Configure ESLint -Add `"extends": "airbnb-typescript"` to your ESLint config file. +Within your ESLint config file: -If you don't need React support, add `"extends": "airbnb-typescript/base"` instead. +```diff +extends: [ + 'airbnb', ++ 'airbnb-typescript' +] +``` -An example `.eslintrc.js`: +If you don't need React support: -```js -module.exports = { - extends: ['airbnb-typescript'], -}; +```diff +extends: [ + 'airbnb-base', ++ 'airbnb-typescript/base' +] ``` ### 4) Configure the ESLint TypeScript parser @@ -56,12 +48,12 @@ In your ESLint config, set [parserOptions.project](https://github.com/typescript For example: ```diff - module.exports = { - extends: ['airbnb-typescript'], -+ parserOptions: { -+ project: './tsconfig.json', +{ + extends: ['airbnb', 'airbnb-typescript'], ++ parserOptions: { ++ project: './tsconfig.json' + } - }; +} ``` ### 5) Run ESLint @@ -78,10 +70,6 @@ You can also get results in realtime inside most IDEs via a plugin. ## FAQ -### Does this work with JavaScript files too? - -Yep! This config is a drop-in replacement for `eslint-config-airbnb`, decorating it with TypeScript support. - ### I get this error when running ESLint: "The file must be included in at least one of the projects provided" This means you are attempting to lint a file that `tsconfig.json` doesn't include. @@ -104,17 +92,20 @@ parserOptions: { } ``` -### I get peer dependency warnings for ESLint React plugins, but I'm using `airbnb-typescript/base` +### Why do I need the peer dependencies? + +`@typescript-eslint/eslint-plugin` is a peer dependency because of 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). -This is a known problem. Some suggestions exist in this [GitHub issue](https://github.com/iamturns/eslint-config-airbnb-typescript/issues/6). +`@typescript-eslint/parser` is a peer dependency because the version number must match `@typescript-eslint/eslint-plugin`. ### I wish this config would support [...] -The goal of `eslint-config-airbnb-typescript` is to simply decorate `eslint-config-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: +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: ```js module.exports = { extends: [ + 'airbnb', 'airbnb-typescript', 'airbnb/hooks', 'plugin:@typescript-eslint/recommended', diff --git a/base.js b/base.js index 8f210f1..ca34d61 100644 --- a/base.js +++ b/base.js @@ -1,3 +1,3 @@ module.exports = { - extends: ['eslint-config-airbnb-base', './lib/shared.js'].map(require.resolve), + extends: ['./lib/shared.js'].map(require.resolve), }; diff --git a/index.js b/index.js index cb1dd12..3f30112 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ // This file adds some React specific settings. Not using React? Use base.js instead. module.exports = { - extends: ['eslint-config-airbnb', './lib/shared'].map(require.resolve), + extends: ['./lib/shared'].map(require.resolve), settings: { // Append 'ts' extensions to Airbnb 'import/resolver' setting 'import/resolver': { diff --git a/lib/shared.js b/lib/shared.js index 6a22bb8..6f8d53c 100644 --- a/lib/shared.js +++ b/lib/shared.js @@ -1,9 +1,11 @@ +/* eslint-disable import/no-extraneous-dependencies */ const { rules: baseBestPracticesRules } = require('eslint-config-airbnb-base/rules/best-practices'); const { rules: baseErrorsRules } = require('eslint-config-airbnb-base/rules/errors'); const { rules: baseES6Rules } = require('eslint-config-airbnb-base/rules/es6'); const { rules: baseImportsRules } = require('eslint-config-airbnb-base/rules/imports'); const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style'); const { rules: baseVariablesRules } = require('eslint-config-airbnb-base/rules/variables'); +/* eslint-enable import/no-extraneous-dependencies */ module.exports = { plugins: ['@typescript-eslint'], diff --git a/package.json b/package.json index abf3b35..42cf20d 100644 --- a/package.json +++ b/package.json @@ -21,15 +21,15 @@ "lint": "eslint ./", "validate": "npm run lint" }, - "dependencies": { - "@typescript-eslint/parser": "^4.4.1", - "eslint-config-airbnb": "^18.2.0", - "eslint-config-airbnb-base": "^14.2.0" + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "^4.4.1", + "@typescript-eslint/parser": "^4.4.1" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "4.14.2", "doctoc": "2.0.1", "eslint": "7.32.0", + "eslint-config-airbnb-base": "^14.2.1", "eslint-config-prettier": "8.3.0", "eslint-plugin-import": "2.24.1", "husky": "4.3.8", diff --git a/renovate.json b/renovate.json index 6a84597..eedae3f 100644 --- a/renovate.json +++ b/renovate.json @@ -2,11 +2,7 @@ "extends": ["config:base"], "packageRules": [ { - "packageNames": [ - "@typescript-eslint/parser", - "eslint-config-airbnb", - "eslint-config-airbnb-base" - ], + "packageNames": ["@typescript-eslint/eslint-plugin", "@typescript-eslint/parser"], "rangeStrategy": "replace" } ]