(init-templates): Add linter/formatter to JavaScript/TypeScript templates

[ren-yamanashi]

Describe the feature

Add linter and formatter configurations to the JavaScript and TypeScript templates generated by cdk init.

Use Case

JavaScript/TypeScript toolchain configuration, especially for linters and formatters, is often complex and time-consuming to set up correctly. This complexity can distract developers from focusing on their core CDK development work.

By providing these tools and configurations out of the box in the init templates, we can help developers focus more on their actual infrastructure code rather than spending time on tooling setup.

Proposed Solution

Add the following to the JavaScript and TypeScript init templates:

1. Add linter/formatter dependencies to package.json:

   • Plan A: ESLint + Prettier
   • Plan B: Biome (all-in-one solution)

2. Add appropriate configuration files:

   • For ESLint: eslint.config.mjs with CDK-specific rules
   • For Prettier: .prettierrc with standard configurations
   • For Biome: biome.json(or biome.jsonc)

3. Add npm scripts to package.json:

   {
     "scripts": {
       "lint": "eslint . --ext .js,.ts",
       "format": "prettier --write .",
       // or for Biome:
       "lint": "biome lint .",
       "format": "biome format ."
     }
   }

Other Information

The choice between ESLint+Prettier vs Biome could be made based on:

1. Community adoption
2. Maintenance overhead
3. Performance
4. Integration with existing CDK tooling

Biome might be preferable as it's a single tool that handles both linting and formatting, which means less configuration and maintenance.

Acknowledgements

• I may be able to implement this feature request
• This feature might incur a breaking change

CDK version used

2.166.0

Environment details (OS name and version, etc.)

macOS Sonoma v14.0

[ashishdhingra]

The automatic configuration for linters/formatters makes sense based on general adoption for CDK templates. Unsure how to ensure if the appropriate extensions/plugins for a particular environment would be installed if we make these template changes (perhaps that's the reason, project generated from cdk init is minimal).

[ren-yamanashi]

The automatic configuration for linters/formatters makes sense based on general adoption for CDK templates. Unsure how to ensure if the appropriate extensions/plugins for a particular environment would be installed if we make these template changes (perhaps that's the reason, project generated from cdk init is minimal).

@ashishdhingra

Thank you for the thoughtful feedback. I completely understand the need to keep the cdk init templates minimal to serve a wide range of environments and use cases. I would like to address your valid concern regarding ensuring the appropriate extensions/plugins are installed.

To maintain the minimal design philosophy while still providing the benefits of linting and formatting tools, we could consider the following approach:

1. Optional Installation: Include an additional prompt during cdk init (e.g., "Do you want to include recommended linters/formatters?") that allows users to opt-in. This way, users who prefer minimal setups can skip the additional configuration.

2. Well-Documented Configuration: Instead of directly installing plugins, provide a README section or comments in the configuration files that guide users on how to set up their environment. For instance, we could include notes about installing ESLint/Prettier extensions for their editor.

3. Community Adoption: Tools like ESLint and Prettier are widely adopted in the TypeScript ecosystem, including by a significant portion of CDK developers. Including pre-configured settings aligns with these norms and reduces onboarding friction for new users.

Would such an approach address the concern about environment-specific compatibility while still providing value for users looking for best practices? I'm happy to collaborate on refining this idea further. Thank you for considering this proposal!