eslint-config-phoenix v1.2.6

eslint-config-phoenix

ESLint config for React TypeScript projects.

This config extends eslint-config-airbnb-typescript and eslint-config-prettier. It provides some useful plugins which will improve your code quality.

Installation

npm install -D eslint-config-phoenix
# or with yarn
yarn add -D eslint-config-phoenix

💡 Make sure ESLint is also installed.

Setup

1) Configure ESLint

Extend your .eslintrc, with phoenix.

{
  "extends": ["phoenix"]
}

Or if you have another config, you can set it like this,

{
  "extends": ["phoenix", "next/core-web-vitals"]
}

The order of the array items depends on your needs.

Read more about ESLint configuration file.

2) Configure the ESLint TypeScript parser

• Set parser to @typescript-eslint/parser.
• Set parserOptions.project to the path of your tsconfig.json or tsconfig.eslint.json (see FAQ below).

For example:

{
  extends: ['phoenix'],
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

This means you are attempting to lint a file that tsconfig.json doesn't include.

A common fix is to create a tsconfig.eslint.json file, which extends your tsconfig.json file and includes all files you are linting.

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
}

Update your ESLint config file:

parserOptions: {
-  project: './tsconfig.json',
+  project: './tsconfig.eslint.json',
}

Note

eslint-config-phoenix will include these packages:

• TypeScript ESLint
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • eslint-import-resolver-typescript
• ESLint Plugins
  • eslint-plugin-react
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-jest
  • eslint-plugin-testing-library
  • eslint-plugin-simple-import-sort
  • eslint-plugin-sonarjs
  • eslint-plugin-unicorn
• ESLint Configs
  • eslint-config-airbnb
  • eslint-config-airbnb-typescript
  • eslint-config-prettier

👆 Therefore, you don't have to install them.