how to load an ESlint config file eslintrc.js

[jossErnesto]

Description

I have created a new environment extension from node-env (customize the base Node env with your configs and tools). I already know I can override the ESLint default config like so:

 node.useEslint({
        transformers: [
          (config) => {
            config.setRule('no-console', ['error']);
            return config;
          },
        ],
      }),

but based on my requirements, I would like to load a custom eslintrc.js file to to set up lint. How to do it? This is my approach based on https://github.com/teambit/bit/blob/bf6114a2134f7c5cc1d39e371f4cc1da4fbbcdaa/scopes/envs/aspect-docs/envs/envs.mdx:

//node-env.main.runtime.ts
const eslintConfig = require('./eslint/eslintrc.js');
....
envs.override({
        getLinter: (context: LinterContext, transformers: any[]) => {
          return eslint.createLinter(context, {
            config: eslintConfig,
            // resolve all plugins from the react environment.
            pluginPath: __dirname,
          }, transformers);
        },
      }),

but I got this error: $ bit lint ✖ service "linter" of env "extensions/custom-node-env" has failed. error: Cannot read properties of undefined (reading 'createLinter')

Specifications

• Bit version: 0.0.79
• Node version: v18.3.0
• npm / yarn version: 8.11.0
• Platform: Windows
• Bit compiler (include version):
• Bit tester (include version):

Context and additional information

[jossErnesto]

After checking out the Bit source code, I realized I could set up lint using useEslint method, like so:

node.useEslint({
        transformers: [
          (config) => {
            config.setRule('no-console', ['error']);
            config.setRule('prettier/prettier', ['error']);
            config.addExtends([
              'eslint:recommended',
              'plugin:@typescript-eslint/recommended',
              'prettier',
            ]);
            config.addPlugins([
              '@typescript-eslint',
              'prettier',
            ])
            return config;
          },
        ],
      })

$ bit compile
...
✔ 6/6 components compiled successfully.
Finished. (5s)

$ bit lint --fix
✖ service "linter" of env "extensions/custom-node-env" has failed. error: Invalid Options:
- Unknown options: extends

is this the correct way? Where can I find the default lint configuration? maybe I am using the default one and I do not need to custom it.

[jossErnesto]

Also, following the instructions here: https://bit.dev/docs/getting-started/installing-bit/start-bit-workspace I have created a new workspace which already has a .eslintrc.js. That's nice but I wanted to add a new dummy rule:

rules: {
    //'prettier/prettier': 'error',
    'max-len': [2, 10, 2]
  },

and the rule did not work:

$ bit lint
linting total of 1 component(s) in workspace 'my-wiki'
my-org.wiki/my-comp
linted 1 components in 9.193.

[jonatankBIT]

Hi!

1. The default lint configuration you can find it inside your node_modules folder. The path would be: /node_modules/@teambit/eslint-config-bit-react/bit-react-eslint.js
2. Regarding your rule, you need to add it to the .eslintrc.js file in your root folder. For example, let's say you want the max-length and no-debugger rules, like so:

.eslintrc.js

module.exports = {
  extends: ['@teambit/eslint-config-bit-react'],
  parserOptions: {
    project: './tsconfig.json'
  },
  rules:{
    "no-debugger": true,
    "max-len": 160
  }
}

Have in mind that max-len might take a number as argument or an array like this: ["error", { "code": 80, "tabWidth": 4 }]

[jjorissen52]

@jonatankBIT Are you can saying that bit lint should take into account rule the rule settings defined in .eslintrc.js? I don't think this feature is working as intended, unfortunately, my experience so far is that rules defined in that file are not taken into account.

[sbland]

@jonatankBIT Are you can saying that bit lint should take into account rule the rule settings defined in .eslintrc.js? I don't think this feature is working as intended, unfortunately, my experience so far is that rules defined in that file are not taken into account.

Likewise the .eslintrc.js file is ignored when running bit lint

[marcinkrasowski]

Is there any solution to this? As soon as I try to use either addExtends or addPlugins I get an error:

× service "linter" of env "hcp/extensions/hcp-react" has failed. error: Invalid Options:
- Unknown options: extends

My linter config, where I try to translate a pre-existing eslintrc to linter format:

import eslintConfig from './eslintrc';
...
react.useEslint({
    transformers: [
        (config) => {
            config.addExtends(eslintConfig.extends);
            config.addPlugins(eslintConfig.plugins);
            Object.entries(eslintConfig.rules).forEach(([rule, ruleValue]) => {
                config.setRule(rule, [ruleValue]);
            });

            return config;
        },
    ],
}),

[itaymendel]

i recommend movin to the new react env, it adds a better dev-experience for it. https://bit.cloud/teambit/react/react-env