Recommended VS Code configuration

[mbeckenbach]

OS?

Windows 10, Ubuntu, Mac

I think lots of developers out there use VS Code for ng2 projects. It would be very cool to have some kind of recommended configuration on the following VS Code settings for an optimal user experience.

• Recommended extensions for ng2 developers (i.e. tslint extention to enable style ng2 guide linting)
• Build Task Configuration to use integrated build runner (ctrl+shift+b)
• How to configure the debugger to be usable

Could be written for other ide's like webstorm to.

[benjamincharity]

Definitely agree! Perhaps it can be part of the wiki and include plugins/instructions for other editors too. I had to track down several plugins to get Vim working smoothly.

I'd be willing to add what I've learned to a shared knowledge resource.

[dancancro]

I'm not sure if this helps but here's my basic vscode configuration file in an Angular-CLI project. It lets you debug server-side node code
https://github.com/dancancro/great-big-angular2-example/blob/master/.vscode/launch.json

[lacolaco]

I'll try to create a first draft for that, but I'm not familiar with integration to VS Code. I'll need help from folks! 🙏

[lacolaco]

@mbeckenbach @benjamincharity @dancancro Could you help me to fill TODO parts? I want your reviews and comments!
#7846

[filipesilva]

VS Code recipes actually has an official doc for Angular CLI already: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

[tiaguinho]

I think to add a section with IDEs recommended plugins to https://angular.io/resources will be very nice.
But the documentation about how to use that plugin or "all the things you can do" with the plugin had to be inside the plugin documentation.
Put this responsibility on the hands of the Angular team doesn't make any sense and probably will lead to a documentation out-of-date.

What do you think @filipesilva @mgechev ?

[filipesilva]

I don't have a specific opinion about this but @hansl probably has, because he has been working on moving the CLI docs over to angular.io.

[dgp1130]

Discussed this amongst the CLI team today, and we definitely agree that we can do better in this space. Rather than just writing docs about it however, it would be better to have ng new just generate the relevant VSCode configuration out-of-the-box. That way users don't need to read docs, understand how it all works, and set things up themselves. The debugger configuration breaks the abstraction of the build somewhat as it has to map back to source code directories. If we are able to support this in ng update, we might be able to migrate user code to avoid breakages from internal changes and keep projects more consistent.

Regarding extension recommendations, it begs the difficult question of "What extensions get recommended?" which is very difficult to address. We want to avoid even the appearance of favoritism, whether for extensions written by core team members, written by frequent contributors, lobbied heavily, or based on any other aspects than the extension's individual merit. Unfortunately, it is very difficult to avoid such an appearance, even if all the decision-makers have the best intentions. After some discussion, the team has decided that the safest option is to simply not recommend any community extensions, because introducing "officially" recommend extensions only causes confusion and the possibility of misinterpretation. As an alternative, there are many community-curated lists of useful tools and extensions which developers can use.

There are still a lot of questions here we need to figure out before we can make the change:

1. What is the ideal VSCode configuration that users typically expect?
2. Can we migrate existing projects to include the same configuration, and if so, how?
3. Should the changes be flag protected (--editorConfigs vscode) and what should be the default?
   • My personal opinion is to just generate the config by default, users can always delete it later with minimal effort if they don't want it.

[samuelfernandez]

Proposal:

• Add a default configuration just when creating new projects. Migrating existing projects to a custom setup can be breaking
• I'd expect to have at least:
  • Launch task with debugging enabled
  • Attach task to existing instance
  • Debug unit test
  • Minimal suggested extensions according to the tools being used: eslint, editorconfig

Additionally, I'd consider super useful:

• Suggested extensions: Prettier, Angular 11 snippets, Angular Schematics

I'd volunteer to submit a PR with a basic agreed configuration. It can be a foundation to be extended later according to community feedback.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}