ESlint config generated by `d2 style js install`

[HendrikThePendric]

By starting this issue, I hope we can come to a decision about what sort of ESLint configuration should be produced by the d2-style package.

This is my personal take on it:

• To me what we currently have doesn’t make sense: after you run d2 style js install you end up with a linter configuration without any base configuration.
• We are predominantly writing react stuff, so using the react-app as a basis makes sense.
• If you want something else: roll your own linter config.

So I would propose the following solution:

• Add the line extends: 'react-app', to .eslintrc.js
• And then add some optional argument to d2 style js install for when you are not in an app, but in a lib, i.e.: d2 style js install --withDependencies to make sure these packages installed:
  eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.5.0
  (https://www.npmjs.com/package/eslint-config-react-app)
• Perhaps the install script can actually detect missing dependencies, and no argument is needed.

Since after the configuration is created you are free to do whatever you like, I think the above is fine.

---

@varl mentioned the following in Slack

i am a bit hesitant to add e.g. react specific rules there because we use js in multiple contexts and it is nice to be able to apply the same eslint rules across typescript, nodejs, es modules, react, etc.

So an alternative would be to support a set of configurations

[varl]

To me what we currently have doesn’t make sense: after you run d2 style js install you end up with a linter configuration without any base configuration.

The discrepancy between the expected result and the actual result depends on what the scope of the d2-style linting configuration should be.

By design the .eslint.config.js was not intended to leak out from d2-style, completely hiding the fact that ESLint is used under the hood to lint the code.

There was a request from developers that they want the ESLint rule set within their IDE of choice, so the configuration was copied to the project directory. Same goes for Prettier, etc. Now, the expectation is that since the tool puts a config file in your project, it should be complete.

On the flip-side:

The rules in the d2-style ESLint configuration are intended to enforce decisions reached through the Frontend Decision Board.

As an example:

This rule about max parameters is an enforcement of https://github.com/dhis2/notes/blob/master/decisions/2019/04/11.md#na-function-arguments.

The intended scope for d2-style is that JavaScript code standards should apply to all JavaScript code, not just React.

As you mentioned, there is now support to setup groups, and the d2-style setup command will no longer overwrite modified configuration files, unless --force is used.

The d2-style should generally be smart enough to merge an applications ESLint configuration file with the d2-style ESLint configuration file, and yield precedence to the d2-style configuration if there is a conflict.

One of the things that I found counterintuitive with having a custom eslint config when using cli-style, is that cli-style uses its own, local eslint config as a base for linting. So if you locally overwrite rules that are in cli-style's config and enable cli-style check on CI, your linting will fail on CI, but locally an npx eslint . will pass.

I can imagine that that's intentional though, to prevent cli-style's rules from being overwritten.

[varl]

Check out the docs for extending ESLint configurations through d2-style here: https://github.com/dhis2/cli-style#eslint

[varl]

It is possible to set up e.g. a project for React too, e.g. d2-style setup project/react which would give you a different ESLint configuration file.

One thing to think about in that case is how to install the required dependencies.

Do we want those in cli-style (can lead to bloat if we support a lot of custom projects)? Maybe the tool will tell you want deps you need to satisfy in your project instead.