twenty icon indicating copy to clipboard operation
twenty copied to clipboard

POC: chore: use Nx workspace lint rules

Open thaisguigon opened this issue 1 year ago • 0 comments

Closes #3162

Context

This PR leverages Nx's workspace lint rules feature (see https://nx.dev/nx-api/eslint/generators/workspace-rule) to avoid having to build eslint rules written with Typescript before they can be used by Eslint and VSCode.

How it works

Nx loads dynamically TS eslint rules from the tools/eslint-rules package, which then become available under the @nx eslint plugin in the eslint config.

For instance, a rule named my-custom-rule becomes available in the eslint config as @nx/workspace-my-custom-rule.

Use Nx's generator to easily generate a basic rule file: nx g @nx/eslint:workspace-rule my-custom-rule

Included in this PR

  • Using Nx's workspace lint rule generator, those changes were automatically applied by Nx:
    • Generated tools/eslint-rules package with Typescript and Jest configuration
    • Added firsttris.vscode-jest-runner to recommended VSCode extensions
    • Added root extendable eslint and TS configs
  • Moved eslint rules from packages/eslint-plugin-twenty to tools/eslint-rules.
  • Reworked some of the custom eslint rules to simplify the code/fix TS errors.
  • Moved:
    • common eslint config to the root eslint config
    • some devDependencies to the root package.json

Note that Nx suggests moving all dependencies and devDependencies to the root package.json: https://nx.dev/concepts/more-concepts/dependency-management

  • Reworked packages/twenty-front eslint config to use Nx's eslint plugin configs. This adds some useful default eslint rules.
  • Added nrwl.angular-console (Nx's official VSCode extension) to recommended VSCode extensions.
  • Other changes in TS and Eslint configs were inspired by https://github.com/nrwl/nx-examples/tree/master.

TODO (not included in this PR)

  • Rework other packages configs to extend the root TS and Eslint configs.

Caveats

  • Nx does not allow to change the rules package's name: they must be located in tools/eslint-rules. A sub-directory can eventually be used but that's it.

Note that Nx monorepo packages are usually organized by purpose under three folders: apps, libs and tools.

  • Eslint rules that were previously available as twenty/... are now renamed to @nx/workspace-.... If we want in the future to publish an eslint-plugin-twenty package to NPM, we can still build the TS eslint rules to a dist directory and publish it under this name. Nx provides some tools to help with creating publishable libs (see https://nx.dev/concepts/more-concepts/buildable-and-publishable-libraries). However, this might be YAGNI for now.
  • I managed to rename the rules to use the twenty/... prefix in the workspace by re-creating the eslint-plugin-twenty package and re-exporting the rules from require('@nx/eslint-plugin/src/resolve-workspace-rules').workspaceRules, but in the end this might be YAGNI so I didn't include it in this PR.

thaisguigon avatar Dec 27 '23 11:12 thaisguigon