npm package: @lottiefiles/eslint-plugin
Description: ESLint config for LottieFiles Javascript and Typescript projects
Author: LottieFiles
Latest version: 3.0.0

# @lottiefiles/eslint-plugin

> Shared configuration for linting Javascript/Typescript with [ESLint](http://eslint.org/).

NOTE: **ESLint 8 is not supported yet** across all the plugins used by this config and hence is not recommended for use.
Please use 7.x series until compatibility is achieved.

## Table of contents

* [Installation](#installation)
* [Usage](#usage)
* [Available Configs](#available-configs)
  * [Core configs](#core-configs)
  * [Typescript](#typescript)
  * [Augmenting Configs](#augmenting-configs)
* [Editor Integration](#editor-integration)
* [Rules and Plugins](#rules-and-plugins)
  * [Dependencies](#dependencies)
  * [Peer Dependencies](#peer-dependencies)
* [Changelog](#changelog)

## Installation

Install ESLint and this plugin.

```
pnpm add -D eslint @lottiefiles/eslint-plugin
```

## Usage

Create a `.eslintrc.js` file in your project root and specify the `extends` property in the . The default config can be
set by adding "@lottiefiles" to the 'extends' list.

```json
module.exports = {
  root: true,

  plugins: ["@lottiefiles"],

  extends: [
    // Base configs: You typically need only one.
    // "plugin:@lottiefiles/es5",
    "plugin:@lottiefiles/esnext",
    "plugin:@lottiefiles/typescript",

    // Profiles: Mix and match as needed
    "plugin:@lottiefiles/typescript-typechecking",
    // "plugin:@lottiefiles/browser",
    "plugin:@lottiefiles/nodejs",
    "plugin:@lottiefiles/nextjs",
    "plugin:@lottiefiles/react",
    "plugin:@lottiefiles/graphql",
    "plugin:@lottiefiles/jest",

    // Prettier, this must go last
    "plugin:@lottiefiles/prettier",
  ],

  parserOptions: {
    project: ['./packages/*/tsconfig.json', './apps/*/tsconfig.json', './tsconfig.dev.json'],
    tsconfigRootDir: __dirname,
  },
};
```

## Available Configs

This package provides several configs that can be mixed to suit the project you are working on.

### Core configs

These configs enable baseline support for ES5, ESNext and Typescript projects and should be declared first in the
`extends` list.

#### ES5

Extend the ES5 config.

```json
{
  "extends": ["plugin:@lottiefiles/es5"]
}
```

#### ESNext (ES2015+)

Extend the ESNext config.

```json
{
  "extends": ["plugin:@lottiefiles/esnext"]
}
```

### Typescript

Use this config in Typescript projects. This config enables linting Typescript code and also enables Typescript import
resolvers and TSDoc comment validation rules.

Combine this config with the typescript-typechecking config for full Typescript support with type checking.

```json
{
  "extends": ["plugin:@lottiefiles/typescript"]
}
```

### Augmenting Configs

These configs add support for processing and linting additional types of environments, projects and frameworks. These
should be declared after the core configs in the `extends` list.

#### React

Use this config with either ESNext or Typescript config to add React linting.

```json
{
  "extends": ["plugin:@lottiefiles/react"]
}
```

#### Typescript Type Checking

Use this config with the Typescript config for full Typescript support with type checking. This must come after the
Typescript config extend.

These rules are slower to run and and you will need to specify a path to your tsconfig.json file in the "project"
property of "parserOptions".

```json
{
  "extends": ["plugin:@lottiefiles/typescript", "plugin:@lottiefiles/typescript-typechecking"],
  "parserOptions": {
    "project": ["./packages/*/tsconfig.json", "tsconfig.eslint.json"]
  }
}
```

#### Prettier

Use this config with any of the above to allow ESLint and various ESLint plugins to work well with Prettier without
clashing on formatting and stylistic issues. This must come the last in any config.

```json
{
  "extends": ["plugin:@lottiefiles/prettier"]
}
```

#### Jest

Use this config with any of the above to lint Jest tests.

```json
{
  "extends": ["plugin:@lottiefiles/jest"]
}
```

#### NodeJS

Use this config with the ES5 or ESNext configs to properly lint NodeJS projects.

```json
{
  "extends": ["plugin:@lottiefiles/nodejs"]
}
```

#### NextJS

Use this config to lint NextJS projects.

```json
{
  "extends": ["plugin:@lottiefiles/nextjs"]
}
```

#### GraphQL

Use this config with any of the above to lint GraphQL schema in code and .graphql files.

```json
{
  "extends": ["plugin:@lottiefiles/graphql"]
}
```

You will also need to add `graphql` as a dependency or devDependency in your project.

Note: VSCode will not lint .graphql files by default. Create a `settings.json` file in your project's `.vscode` with the
following content or add it to your global `settings.json` file.

```json
{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "graphql"],
  "eslint.options": {
    "extentions": [".js", ".jsx", ".ts", ".tsx", ".graphql"]
  }
}
```

## Editor Integration

ESLint is supported in all popular IDEs but may have to be enabled or installed as a plugin for your IDE. Refer to the
[ESLint Editor Integrations documentation](https://eslint.org/docs/user-guide/integrations) for details.

#### VS Code

You can enable ESLint in VSCode using one of two approaches:

#### Per-project install (recommended)

With this approach, anyone using your project gets prompted to install and enable the extension for your project without
requiring them to have it permanently installed IDE-wide.

1. Create a `.vscode` directory in the root of your project. Create a `extensions.json` file in the `.vscode` directory.

*.vscode/extensions.json*

```json
{
  "recommendations": [
    // ... other extensions

    // ESLint integration
    "dbaeumer.vscode-eslint"
  ]
}
```

2. Add the following content to the `settings.json` (File > Preferences > Settings) file:

```json
{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

#### IDE install

1. Install the [ESLint for VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
   on your IDE so that it is permanently installed and enabled on your computer.

2. Add the following content to the `settings.json` (File > Preferences > Settings) file:

```json
{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

---

## Rules and Plugins

This plugin uses a bunch of opensource ESLint configs and plugins with rules customised to our needs and development
best practices. The plugin also has some custom rules.

It uses the following public, opensource ESLint plugins and configs.

### Dependencies

| Package Name                        | Version |
| ----------------------------------- | ------- |
| @graphql-eslint/eslint-plugin       | 3.8.0   |
| @next/eslint-plugin-next            | 12.1.0  |
| @rushstack/eslint-patch             | 1.1.0   |
| @typescript-eslint/eslint-plugin    | 5.13.0  |
| @typescript-eslint/parser           | 5.13.0  |
| case-anything                       | 2.1.10  |
| confusing-browser-globals           | 1.0.11  |
| eslint-config-prettier              | 8.5.0   |
| eslint-import-resolver-node         | 0.3.6   |
| eslint-import-resolver-typescript   | 2.5.0   |
| eslint-plugin-compat                | 4.0.2   |
| eslint-plugin-deprecation           | 1.3.2   |
| eslint-plugin-eslint-comments       | 3.2.0   |
| eslint-plugin-filenames             | 1.3.2   |
| eslint-plugin-header                | 3.1.1   |
| eslint-plugin-html                  | 6.2.0   |
| eslint-plugin-import                | 2.25.4  |
| eslint-plugin-jest                  | 26.1.1  |
| eslint-plugin-jest-dom              | 4.0.1   |
| eslint-plugin-jest-formatting       | 3.1.0   |
| eslint-plugin-jsx-a11y              | 6.5.1   |
| eslint-plugin-no-secrets            | 0.8.9   |
| eslint-plugin-node                  | 11.1.0  |
| eslint-plugin-optimize-regex        | 1.2.1   |
| eslint-plugin-prettier              | 4.0.0   |
| eslint-plugin-promise               | 6.0.0   |
| eslint-plugin-react                 | 7.29.3  |
| eslint-plugin-react-hooks           | 4.3.0   |
| eslint-plugin-react-perf            | 3.3.1   |
| eslint-plugin-sort-class-members    | 1.14.1  |
| eslint-plugin-sort-destructure-keys | 1.4.0   |
| eslint-plugin-tsdoc                 | 0.2.14  |
| eslint-plugin-typescript-sort-keys  | 2.1.0   |

### Peer Dependencies

| Package Name | Version |
| ------------ | ------- |
| eslint       | \*      |
| graphql      | \*      |
| prettier     | \*      |
| typescript   | \*      |

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for the latest changes.