Set Up a Linter

To set a linter on a component or a group of components, configure it in the components' envs.

For example, the following configuration defines ESLint tester as the linter to use during development and during build. Note that a single env can use different linters or linter configuration for development and build.

Install the linter in your workspace:

$bit install @teambit/defender.eslint-linter

Copied

Set the linter in the relevant env:

/* @filename: my-env.bit-env.ts */
import { EnvHandler } from '@teambit/envs';
import { Pipeline } from '@teambit/builder';
/* import the specific linter and linter task to use by this env */
import { ESLintLinter, EslintTask } from '@teambit/defender.eslint-linter';
/* import the tester and tester task */
import { JestTester, JestTask } from '@teambit/defender.jest-tester';

export class MyEnv {
  /**
   * the path to the eslint config file.
   */
  protected eslintConfigPath = require.resolve('./config/eslintrc.js');

/**
 * run eslint during development
 * 'bit lint'
 */
  linter() {
    return ESLintLinter.from({
       /* use this config file */
      configPath: this.eslintConfigPath,
      /* resolve all plugins from this env. */
      pluginsPath: __dirname,
    });
  }

 build() {
    return Pipeline.from([
      /**
       * use eslint for linting during the components build process.
       * 'bit build', 'bit snap', 'bit tag'
       */
      EslintTask.from({
        /* use this config file */
        configPath: this.eslintConfigPath,
      }),
    ]);
  }

export default new MyEnv();
Copied