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();
Run the following to compile your env after making changes to your env's ESLint configuration:
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"] }
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" } }
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:
Run the following to install the dependencies:
Set the plugin and shareable config in you ESLint config file:
{ "extends": ["bar"], "plugins": ["foo"] }
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, }); }