Create a Linter

Bit linters lint component source files during the component development and during the component build process. They are often used to integrate popular linters such as ESLint, TSLint, and JSHint into Bit, but can also be used to implement custom linters.

Run the following to fork a demo linter that you can use as a template for your own linter:

$bit fork learnbit.linter/linter my-linter

Copied

Alternatively, run the following to create a workspace with a linter, an env that uses the linter, and a sample component that uses that env (replace my-org.my-scope with your own bit.cloud org/username and scope name):

$bit new linter-starter my-linter-workspace --aspect teambit.community/starters/linter-starter --default-scope my-org.my-scope

Copied

Run bit lint sample-component to lint the component using the linter.

Implement the lint method to lint component source files during development. The component source files are provided to the linter via the (LinterContext). The linter should return the overall lint statistics and lint issues corresponding to each components if found.

async function lint(context: LinterContext): Promise<LintResults> {
  // Initialize the totals to calculate the final results
  const initialTotals = {
    totalErrorCount: 0,
    totalFixableErrorCount: 0,
    totalWarningCount: 0,
  };

  const results = await Promise.all(
    // Map each component to run custom linter on it
    context.components.map(async (component) => {
      // Get the files to lint
      const files = component.filesystem.files.map((file) => file.path);

      // Placeholder for lintResults, calculate it based on your linter logic
      const lintResults = await customLinter(files);

      // Placeholder for totals, calculate these based on your linter logic
      const totalErrorCount = 0;
      const totalFixableErrorCount = 0;
      const totalWarningCount = 0;

      return {
        component,
        totalErrorCount,
        totalFixableErrorCount,
        totalWarningCount,
        results: lintResults,
      };
    })
  );

  return {
    ...initialTotals,
    totalComponentsWithErrorCount: results.filter(
      (result) => result.totalErrorCount > 0
    ).length,
    totalComponentsWithWarningCount: results.filter(
      (result) => result.totalWarningCount > 0
    ).length,
    results,
    errors: [],
  };
}

async function customLinter(files: string[]): Promise<any> {
  // Placeholder logic for customLinter
  // Return your actual linting results here
  return files.map((file) => ({
    filePath: file,
    errorCount: 0, // your actual error count here
    warningCount: 0, // your actual warning count here
    fixableErrorCount: 0, // your actual fixable error count here
    messages: [],
  }));
}
Copied

To make the linter available as a standard build task that can be registered by env, wrap it with the linter-task build task. The linter-task wraps the lint method with a standard build task interface, and some additional logic that's required for linting during build.

/* @filename: eslint-task.ts */

import { LinterTask, LinterTaskOptions } from '@teambit/defender.linter-task';
import { TaskHandler } from '@teambit/builder';
import { ESLintLinter } from './linter';
import { ESLintOptions } from './eslint-linter-options';

export type EslintTaskOptions = ESLintOptions &
  Pick<LinterTaskOptions, 'description'>;

export const EslintTask = {
  from: (options: EslintTaskOptions): TaskHandler => {
    const name = options.name || 'EslintLint';
    const description =
      options.description || 'linting components using ESlint';
    return LinterTask.from({
      ...options,
      name,
      description,
      linter: ESLintLinter.from(options),
    });
  },
};
Copied

Linters are used by components via the components' envs. To use your linter, follow these steps (or use the workspace starter at the top of this page):

1. Create a new env or use an existing one.
2. Set the linter as the env's linter.
3. Create a component using that env or set an existing component to use that env.

Learn about debugging components in the workspace in this blog.

Run the following to lint the component during development (in the workspace):

$bit lint

Copied

Learn more about running the linter in the Using linters page.

Verify your lint task is set correctly by listing the relevant component build tasks:

$bit build --list-tasks my-component

Copied

The output should include the name of your linter task:

Run the following to run the test in A capsule. Specify the lint task name to skip other tasks:

$bit build my-component --tasks LintComponents

Copied