@lottiefiles/eslint-plugin

Shared configuration for linting Javascript/Typescript with ESLint.

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
• Usage
• Available Configs
  • Core configs
  • Typescript
  • Augmenting Configs
• Editor Integration
• Rules and Plugins
  • Dependencies
  • Peer Dependencies
• 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.

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.

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

ESNext (ES2015+)

Extend the ESNext config.

{
  "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.

{
  "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.

{
  "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".

{
  "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.

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

Jest

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

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

NodeJS

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

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

NextJS

Use this config to lint NextJS projects.

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

GraphQL

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

{
  "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.

{
  "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 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

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

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

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

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

IDE install

1. Install the ESLint for VSCode extension 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:

{
  "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 for the latest changes.