Eslint Configuration

To change your env's default ESLint configuration, or to replace your current linter with ESLint, implement the following in your env:

/* your base env. in this example, react-env. */
import { ReactEnv } from '@teambit/react.react-env';

import { ESLintLinter } from '@teambit/defender.eslint-linter';
import { EslintTask } from '@teambit/defender.eslint-linter';

export class MyEnv extends ReactEnv {
  name = 'my-env';

  /**
   * replace this env's default linter
   * (for linting in development)
   */
  linter() {
    return ESLintLinter.from({
      /**
       * the configuration file to be used by this typescript compiler
       */
      configPath: require.resolve('./config/new-eslintrc.js'),
      /* the type rules for this linter */
      tsconfig: require.resolve('./config/tsconfig.json'),
      /* the path to the plugin modules (do not change) */
      pluginsPath: __dirname,
      /* the file types to be analyzed by this linter */
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
    });
  }

  build() {
    /**
     * replace this env's default ESLint task
     * (for compilation during build)
     */
    return super.build().replace([
      EslintTask.from({
        configPath: require.resolve('./config/new-eslintrc.js'),
        tsconfig: require.resolve('./config/tsconfig.json'),
        pluginsPath: __dirname,
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
      }),
    ]);
  }
}

export default new MyEnv();
Copied

Run the following to compile your env after making changes to your env's ESLint configuration:

$bit compile

Copied

Set the extensions property with the list of file types to lint. File extension that are not in this list will be ignored (even if these file types are listed in the configuration under "overrides").

{
  "extensions": [".ts", ".tsx", ".js", ".jsx", ".mjs"]
}
Copied

The eslintrc.js file extends your env's default configuration, using ESLint's "extends" property. The configuration added to this file will override any conflicting configuration from the (default) extended config file.

For example, the following adds the "no-console" rule to the default configuration of a React env:

{
  extends: [require.resolve('@teambit/react.react-env/config/eslintrc')],
  rules: {
    "no-console": "error"
  }
}
Copied

The tsconfig.json file extends your env's default configuration, using Typescript's extends property. If you modify your tsconfig.json file, make sure to replace the Typescript configuration in your env, as well.

When using a plugin or a shareable configuration, it's important to manually set it as a dependency of that env. This has to be done since ESLint config files do not include standard import/require statements that can be parsed by Bit's dependency resolver, and then, automatically added to the env's dependencies.

For example, let's say you have a plugin called eslint-plugin-foo and a shareable configuration called eslint-config-bar.

Set them as dependencies of that env:

$bit deps set envs/my-react-env eslint-plugin-foo eslint-config-bar

Copied

Run the following to install the dependencies:

$bit install

Copied

Set the plugin and shareable config in you ESLint config file:

{
  "extends": ["bar"],
  "plugins": ["foo"]
}
Copied

Make sure the plugin path property to points to the env's directory (this will allow it to resolve the dependencies from the proper location):

linter() {
    return ESLintLinter.from({
      configPath: require.resolve('./config/eslintrc.js'),
      /* the plugin path should point to the env's directory */
      pluginsPath: __dirname,
    });
  }
Copied