angular-fullstack / generator-angular-fullstack

Yeoman generator for an Angular app with an Express server
https://awk34.gitbook.io/generator-angular-fullstack
6.13k stars 1.24k forks source link

IDE suggestion for this stack in terms of useful(!) code completion, debugging etc. #1952

Closed akcasoy closed 8 years ago

akcasoy commented 8 years ago

I have recently created a new project using this generator, and i am trying to use the last edition of Webstorm (2016.1) as IDE. Although the generated project can be built / deployed / and run, in some files, the Webstorm gives me such warnings:

"Unresolved function or method" "Expression statement is not assignment or call" ..

After trying to download some JS libraries in Webstorm Preferences section, some warnings are gone, some are still there. So i now have 2 questions, would be glad if you help:

1- What more do i have to do in Webstorm in order to have a clean project, with useful code completion and language/Framework(AngularJS) support? When i am in a jade file, e.g. trying to add an attribute to an 'input' tag, i would like to see only possible options and not 437 keywords.

2- Is there a better IDE out there for using with generator-angular-fullstack type projects?

Item Version
generator-angular-fullstack 3.7.5
Node 6.2.1
npm 3.9.5
Operating System OS X 10
Item Answer
Transpiler Babel
Markup Jade
CSS SCSS
Router ui-router
Build Tool Grunt
Client Tests Jasmine
DB MongoDB
Auth Y
Koslun commented 8 years ago

1- What more do i have to do in Webstorm in order to have a clean project, with useful code completion and language/Framework(AngularJS) support? When i am in a jade file, e.g. trying to add an attribute to an 'input' tag, i would like to see only possible options and not 437 keywords.

For perfect code completion you more or less instead need to use TypeScript, Flow or Dart. Without it most code completions for JavaScript will mostly rather be heuristic and just often not accurate or reliable as it's just impossible to trace functions, variables etc without any type information. Thus also rendering code completion unreliable.

Using TypeScript in particular you get types for your own code and with a lot of other projects like angular 1 typed using global typings you can thus hope to have some more reliable code completion, refactoring and static analysis that can give you warnings and errors you might expect from languages like Java.

Unsure how well Flow or Dart works and this project mostly only supports TypeScript anyway.

Also unsure about how if you can improve the code completions for Jade through any specific configuration.

2- Is there a better IDE out there for using with generator-angular-fullstack type projects?

Don't think there are any editor/IDE specific config files so think it largely comes down to preferences and what features you want from your IDE. Think the errors you listed are not IDE specific but just warnings or errors that webstorm derived from the project's code. The various IDE's can however interpret the various configurations in the project, might have to manually configure the IDE for it to do it though. For babel you might wanna look into checking that webstorm or whatver is looking at the correct jshint configs (.jshintrc). There's one in both server and the client folder.

Think Webstorm offers more features with less configuration necessary out of the box than anything else. Visual Studio Code is less mature and offers a subset of features, potentially better at a few with a different design.

Think you can largely get most of the same features using the editors Sublime and Atom as well, using x amounts of plugins to each.

Personally largely prefer Visual Studio Code because of the design but I do sometimes go back to using Webstorm. With Visual Studio Code also being somewhat less mature I would recommend sticking with Webstorm but say that you could always play around with either of the four mentioned tools and at least get similar levels of code completion though I have generally found more warnings, errors and code completion using Webstorm and I think Webstorm offers more in general but might be too bloated with features for some on the other hand