{"id":10814,"library":"eslint-config-airbnb-typescript-prettier","title":"Airbnb ESLint Config with TypeScript and Prettier","description":"eslint-config-airbnb-typescript-prettier is an ESLint shareable configuration designed to streamline the setup of linting for TypeScript projects by integrating the popular Airbnb JavaScript style guide with Prettier for consistent code formatting. Currently at version 5.0.0, this package aims to reduce boilerplate and configuration overhead for developers. Its release cadence is generally aligned with updates to its upstream dependencies, including ESLint, Airbnb's base config, `@typescript-eslint`, and Prettier itself, ensuring compatibility and leveraging the latest best practices. A key differentiator is its pre-configured merging of these complex tools, saving significant time in initial project setup and ongoing maintenance compared to configuring each tool individually. It handles the often-tricky interoperability between ESLint's parser, TypeScript's syntax, and Prettier's formatting rules, providing a cohesive and opinionated development experience.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/toshi-toma/eslint-config-airbnb-typescript-prettier","tags":["javascript","eslint","airbnb","typescript","prettier"],"install":[{"cmd":"npm install eslint-config-airbnb-typescript-prettier","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-config-airbnb-typescript-prettier","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-config-airbnb-typescript-prettier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as the core linting engine.","package":"eslint","optional":false},{"reason":"Required for consistent code formatting and integration with ESLint.","package":"prettier","optional":false},{"reason":"Required for parsing TypeScript code and enabling type-aware linting rules.","package":"typescript","optional":false},{"reason":"Implicitly required as a peer dependency of the underlying configuration to enable TypeScript-specific linting rules.","package":"@typescript-eslint/eslint-plugin","optional":false},{"reason":"Implicitly required as a peer dependency of the underlying configuration to parse TypeScript code for ESLint.","package":"@typescript-eslint/parser","optional":false},{"reason":"Implicitly required as a peer dependency to provide the base Airbnb JavaScript style guide.","package":"eslint-config-airbnb-base","optional":false},{"reason":"Implicitly required for linting of ES2015+ import/export syntax.","package":"eslint-plugin-import","optional":false},{"reason":"Implicitly required for static analysis of JSX elements to enforce accessibility rules.","package":"eslint-plugin-jsx-a11y","optional":false},{"reason":"Implicitly required for React specific linting rules.","package":"eslint-plugin-react","optional":false},{"reason":"Implicitly required for React Hooks specific linting rules.","package":"eslint-plugin-react-hooks","optional":false},{"reason":"Implicitly required to disable ESLint rules that conflict with Prettier.","package":"eslint-config-prettier","optional":false},{"reason":"Implicitly required to run Prettier as an ESLint rule and report differences.","package":"eslint-plugin-prettier","optional":false}],"imports":[{"note":"This string directly references the shareable configuration in your `.eslintrc.js` file's `extends` array, telling ESLint to load its rules, parser, and plugin settings.","wrong":"extends: [require(\"eslint-config-airbnb-typescript-prettier\")]","symbol":"Configuration Extension","correct":"extends: \"airbnb-typescript-prettier\""},{"note":"For type-aware linting rules provided by `@typescript-eslint`, you must specify the `project` option within `parserOptions` to point to your `tsconfig.json`. This is often required for the more advanced rules.","wrong":"parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'] }","symbol":"TypeScript Project Options","correct":"parserOptions: { project: \"./tsconfig.json\" }"},{"note":"This package is an ESLint shareable config, designed to be referenced by name in `.eslintrc.js` files via the `extends` property, not directly imported into JavaScript/TypeScript code for programmatic use.","wrong":"import config from 'eslint-config-airbnb-typescript-prettier';","symbol":"Direct Module Import"}],"quickstart":{"code":"npm install --save-dev typescript eslint prettier eslint-config-airbnb-typescript-prettier\n\n// .eslintrc.js\nmodule.exports = {\n  extends: \"airbnb-typescript-prettier\",\n  parserOptions: {\n    project: \"./tsconfig.json\"\n  },\n  rules: {\n    // Override/add custom rules here if needed\n    // e.g., 'import/prefer-default-export': 'off'\n  }\n};\n\n// tsconfig.json (minimal example)\n{\n  \"compilerOptions\": {\n    \"target\": \"es2021\",\n    \"module\": \"commonjs\",\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  },\n  \"include\": [\"src/**/*.ts\", \"src/**/*.tsx\"]\n}","lang":"javascript","description":"Installs the package and its peer dependencies, then configures ESLint to use the Airbnb TypeScript Prettier ruleset with project-specific TypeScript parsing."},"warnings":[{"fix":"Update your `eslint`, `prettier`, and `typescript` packages to match the peer dependency range specified by `eslint-config-airbnb-typescript-prettier@5.0.0` using `npm install` or `yarn add`.","message":"Version 5.0.0 of `eslint-config-airbnb-typescript-prettier` introduces updated peer dependency requirements. Ensure your `eslint`, `prettier`, and `typescript` installations meet the specified versions (e.g., `eslint: ^7.32.0 || ^8.2.0`, `prettier: ^1.18.2 || ^2.0.0`, `typescript: >=3.3.1`). Older versions may lead to conflicts or failed linting processes.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure your `.eslintrc.js` includes `parserOptions: { project: './tsconfig.json' }` and that the path to your `tsconfig.json` is correct and accessible from the ESLint configuration file.","message":"Omitting or incorrectly configuring `parserOptions.project` in your `.eslintrc.js` will prevent type-aware linting rules from working. This can lead to ESLint errors during startup or silent failure of critical TypeScript-specific checks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place `\"airbnb-typescript-prettier\"` as the last entry in your `extends` array, or ensure any custom Prettier-disabling configs are placed after other rule-defining configs.","message":"When combining `eslint-config-airbnb-typescript-prettier` with other ESLint configurations, especially those involving Prettier, the order within the `extends` array in `.eslintrc.js` is critical. `eslint-config-prettier` (which is part of this config's chain) should always be the *last* item in the `extends` array to ensure it correctly disables conflicting ESLint rules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For faster linting in development, consider using `eslint-plugin-only-warn` or separating type-aware rules into a script that runs less frequently (e.g., CI/CD, pre-commit hook) or only on changed files.","message":"Using `parserOptions.project` for type-aware linting can significantly increase ESLint's runtime performance, especially in large codebases, due to the need to load and parse the TypeScript project graph.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev @typescript-eslint/parser` to ensure the parser is installed. Check `npm view eslint-config-airbnb-typescript-prettier peerDependencies` for compatible versions.","cause":"The `@typescript-eslint/parser` package, a critical peer dependency, is either not installed or its version is incompatible.","error":"Error: Failed to load parser '@typescript-eslint/parser' declared in 'airbnb-typescript-prettier'"},{"fix":"Add or correct the `parserOptions` object in your `.eslintrc.js` file: `{ parserOptions: { project: './tsconfig.json' } }`, ensuring `tsconfig.json` exists at the specified path.","cause":"ESLint's TypeScript parser requires `parserOptions.project` to correctly resolve type information, but it's either missing, misspelled, or points to an invalid `tsconfig.json` file.","error":"Parsing error: 'parserOptions.project' has been set for @typescript-eslint/parser."},{"fix":"Verify the package is installed with `npm list eslint-config-airbnb-typescript-prettier` and run `npm install --save-dev eslint-config-airbnb-typescript-prettier` if it's missing. Double-check the spelling in your `.eslintrc.js`.","cause":"The `eslint-config-airbnb-typescript-prettier` package is not installed in your project, or there is a typo in the `extends` array.","error":"The \"extends\" option in .eslintrc.js has an invalid configuration for 'airbnb-typescript-prettier'."},{"fix":"Run `eslint --fix src/**/*.ts` (or your relevant files) to automatically fix the issue, or configure your IDE to run `eslint --fix` on save. Ensure your editor's Prettier settings (if any) are aligned with the project.","cause":"ESLint, via `eslint-plugin-prettier`, is detecting a formatting inconsistency (e.g., line endings, spacing) that Prettier would fix, indicating an unformatted file or a conflict in configuration.","error":"[eslint] Delete `␍` (`prettier/prettier`)"},{"fix":"Add `parserOptions: { project: './tsconfig.json' }` to your `.eslintrc.js` and ensure that the specified `tsconfig.json` path is correct and accessible.","cause":"A TypeScript-aware ESLint rule requires access to type information, but the `project` property is missing or improperly configured in `parserOptions`.","error":"Error: You have used a rule which requires parserServices to be generated. You must therefore provide a value for the 'parserOptions.project' property for @typescript-eslint/parser."}],"ecosystem":"npm"}