remix-run / react-router-templates

70 stars 11 forks source link

Improve tsconfig #14

Open marcomuser opened 3 days ago

marcomuser commented 3 days ago

Some of the options could be modernized or are superfluous:

  1. forceConsistentCasingInFileNames is true by default. You don't need to set it explicitly.
  2. In the react-router docs it's recommended to configure VSCode to add type modifiers to imports automatically. However, this can be enabled automatically by setting "verbatimModuleSyntax": true in tsconfig.json. This will enforce those type imports and IDE's will pick that up and add them for you automatically when importing via autocompletion.
  3. If we set verbatimModuleSyntax, isolatedModules: true is implied by default as well and can be removed from the tsconfig
  4. I would also suggest to look into alternatives for project references which are hard to understand. Jared Palmer has our back here: You might not need TypeScript project references. This might be a change which goes beyond just changing the templates here though.
  5. This one might be a bit spicier: I would switch to setting “module”: “nodenext” instead of “module”: “esnext” and “moduleResolution”: “bundler”. This newer mode enforces file extensions for relative imports. It's thus much closer to the ESM standard. In principle, this mode implies ESM + node_modules. The imports and exports that you are forced to write as a result run directly in BOTH build tools like Vite AND runtimes like Node.js (with type: module) which handle node_modules. For users, this generally means no change of habits for new projects, as the IDE (e.g. VSCode) picks up this configuration immediately and handles it correctly for autocompletions.
  6. If we can't agree on "nodenext", it would instead make sense to set "module": "preserve" which implies "moduleResolution": "bundler".