@aboutbits/eslint-config

AboutBit's ESLint config presets

Table of content

• Usage
  • TypeScript
  • TypeScript + React
  • TypeScript + Next.js
  • FormatJS
  • Combining presets
  • Overriding Rules
• Build & Publish
• About

Usage

Install the package:

npm i -D @aboutbits/eslint-config

We recommend linting by running eslint without --ext option. What files are to be linted should be specified inside the ESLint config and the TypeScript config. All files included (or not ignored) by the ESLint config (.eslintrc.json) must be included by the TypeScript config (tsconfig.json). For example, if this is your .eslintrc.json:

{
  // ...remaining config
  "ignorePatterns": ["node_modules", "dist"]
}

You may include the following files inside your tsconfig.json:

{
  // ...remaining config
  "exclude": ["node_modules", "dist"],
  "include": ["**/*.ts", "**/*.tsx"]
}

Should you have files that you want to be linted, but not inside your tsconfig.json, you can create a tsconfig.eslint.json file. Then change .eslintrc.json to be:

{
  // ...omitted
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  }
  // ...omitted
}

TypeScript

Install the required packages, assuming that you have TypeScript already installed:

npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3

.eslintrc.json

{
  "extends": "@aboutbits/eslint-config/ts",
  "parserOptions": {
    "project": true
  }
}

TypeScript + React

Install the required packages, assuming that you have TypeScript already installed:

npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-tailwindcss

.eslintrc.json

{
  "extends": "@aboutbits/eslint-config/ts-react",
  "parserOptions": {
    "project": true
  }
}

TypeScript + Next.js

Install the required packages, assuming that you have TypeScript already installed:

npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-tailwindcss @next/eslint-plugin-next

.eslintrc.json

{
  "extends": "@aboutbits/eslint-config/ts-next",
  "parserOptions": {
    "project": true
  }
}

FormatJS

Install the required packages, assuming that you have TypeScript already installed:

npm i -D eslint eslint-plugin-formatjs

.eslintrc.json

{
  "extends": "@aboutbits/eslint-config/formatjs",
  "parserOptions": {
    "project": true
  }
}

Combining presets

Most presets are mutually exclusive, which means that you should not combine them. However, you may combine the preset formatjs with any other preset you like. The following shows how to combine it with the preset ts-next:

Install the required packages, assuming that you have TypeScript already installed:

npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-tailwindcss @next/eslint-plugin-next eslint-plugin-formatjs

.eslintrc.json

{
  "extends": [
    "@aboutbits/eslint-config/ts-next",
    "@aboutbits/eslint-config/formatjs"
  ],
  "parserOptions": {
    "project": true
  }
}

Overriding rules

.eslintrc.json

{
  "extends": "@aboutbits/eslint-config/ts",
  "parserOptions": {
    "project": true
  },
  "rules": {
    // your rules...
  }
}

Build & Publish

To build and publish the package, visit the GitHub Actions page of the repository.

You can choose between two workflows:

• Release Package to publish a new version of the package.
• Pre-Release Package to publish a new pre-release version of the package.

Note: Pre-releases need to be supplied with a pre-id.

Note: To increment a pre-release, you have to run the normal release workflow and select "prerelease". For this action you need to already be on a pre-release version.

Information

AboutBits is a company based in South Tyrol, Italy. You can find more information about us on our website.

Support

For support, please contact info@aboutbits.it.

Credits

• All Contributors

License

The MIT License (MIT). Please see the license file for more information.