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.

• Installation
• Usage
• Available Configs
  • Core configs
  • Typescript
  • Augmenting Configs
• Editor Integration
• Rules and Plugins
  • Dependencies
  • Peer Dependencies
• Changelog

Install ESLint and this plugin.

pnpm add -D eslint @lottiefiles/eslint-plugin

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,
  },
};

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

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

Extend the ES5 config.

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

Extend the ESNext config.

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

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"]
}

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.

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

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

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"]
  }
}

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"]
}

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

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

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

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

Use this config to lint NextJS projects.

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

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"]
  }
}

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.

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

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
  }
}

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
  }
}

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.

See CHANGELOG.md for the latest changes.