If you follow JetBrains' Getting Started with Node.js in WebStorm instructions, node-express specific code is highlighted correctly. However if you create your own simple node-express project, e.g. using node-express' Guide, then express specific functions such as app.get() are underlined and marked with the following warning:
Unresolved function or method get()
This happens even if you enable the following libraries under Settings\JavaScript\Libraries:
Node.js Globals
Node.js v0.10.31 Core Modules
express-DefinitelyTyped (which you need to download)
How can I configure WebStorm to resolve node-express functions such as app.get()?
Instead of express definitelyTyped, use express types in your project:
npm install --save-dev #types/express
Alternatively, for yarn users:
yarn add --dev #types/express
This worked great for me.
TL;DR:
you go to Settings/Preferences --> Languages and Frameworks --> JavaScript --> Libraries, click the Download button on the right, then select "express" (or any other library you need) and click Download and Install.
Enabling express-DefinitelyTyped typescript library for Express project does work for me - app.get() is successfully resolved. Adding typescript stubs is the only possible workaround, as WebStorm can't understand the way express is defined - see https://youtrack.jetbrains.com/issue/WEB-6667#comment=27-470393
If adding typescript stubs doesn't work for you, please try invalidating caches. If this doesn't help, I'd suggest contacting jetbrains support, providing a sample project
Related
What is the best way to use SASS with Client side blazor. I looked into the this
https://github.com/madskristensen/WebCompiler
But it looks like works only with Visual Studio. I am using Visual Studio Code.
As mentioned in the MS docs, you can use the Delegate.SassBuilder package to help you compile sass/scss files to css.
It works pretty well, and very easy to install with no configuration required.
NOTE
For newer Sass build requirements - I've created this LibSassBuilder
I recommend using sass directly from the command line.* Note that:
Dart Sass is the primary implementation of Sass
and it can be installed and used globally as a CLI tool, no npm project or pipeline required is the key.
You can install sass via choco:
choco install sass
Or with with npm:
npm install -g sass
Then you can right click on wwwroot and select Open in terminal and build and watch in native ways enabled by sass. To watch all see the following for instance:
sass --watch .:.
(A bit begrudgingly, but other solutions, like building on every build, has big downsides. Like it building sass resources on every build: That's really wasteful when you've not been messing with your styles ... Or take the fact, in my case right now, that neither the WebCompiler extension nor LibSassBuilder as mentioned above seem to work on this preview version of Visual Studio.)
I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.
However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.
How would I go about creating it? I can't find any examples or documentation about this.
My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?
My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.
I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?
So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?
Any help or samples would be very welcome! Thank you!
There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.
At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.
I used angular-cli#1.0.0-beta.10 before and now I updated to angular-cli#webpack beta.11. After a lot of custom changes I got it to work.
The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli#1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.
How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?
How to debug with angular/cli
The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.
But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.
(new) Solution for angular/cli#1.0.0-beta.26 and newer
Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1
Notice: In this example I used port 5321 instead of 4200. Just use your port.
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular/cli using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:
Set your Remote URL Path of your project directory to webpack://.
Set your Remote URL Path of your src directory to webpack://./src
(old) Solution for angular-cli#1.0.0-beta.10 - .14
Debugging with Chrome Developer Tools
While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":
Debugging Angular 2 App with angular-cli#webpack using JetBrains IDE
Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to
webpack:////Users/...FULL_PATH.. //on Mac OSX
or
webpack:///C:/...FULL_PATH.. //example on Windows
Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes
after "webpack:"
You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.
EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks #born2net
Have Fun.
ok got it working,
you need to map both root and src.
see here:
hopefully it helps someone,
let me add that sometimes the debugger will miss your breakpoint so add alert('foo') or ;debugger code just before your breakpoint.
tx
will be adding and convering jspm projects to new cli
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source# https://github.com/born2net/ng2Boilerplate
Regards,
Sean
2017 answer for:
angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
If you are having problems with this, go to your Scripts tab in your debugger and try and align your URL mappings according to what you see.
None of the other answers helped me because my version of angular-cli mapped things a different way.
What finally helped me was to add an additional / (forward slash) after webpack:///, so that there are 4 instead of 3. By default there were 3 forward slashes
The remote URL points to the same parent directory as on the left except the webpack://// schema.
Also you don't need to enable the TS compiler as often suggested.
MacOS
Angular-CLI 2.4.1
WebStorm 2016.3
You can use Augury which is a dev tool extension for the web browsers in order to debug angular applications.
Here is the link you could install:
https://augury.angular.io/
This tool is very useful in viewing the hierarchy of your routing in your application, Module and Components hierarchy and the Dependency Injection overview on each component.
Here is an Inject Graph of my project which illustrate my above explanation:
Please note that the above solutions do NOT let you set breakpoints in the html files of angular components when using IntelliJ. You can only do this in Chrome. I don't understand why this is not possible in IntelliJ.
I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.
I've built out this simple library https://github.com/FarhadG/script-tag-data and you can either clone it down or install via bower but I'm curious how I should go about turning it into an npm, browserify, etc. module.
Since you already have your project on github, for publishing to npm, you can follow the guide over here : npm-developers
AFAIK, browserify doesn't have a registry. You probably meant bower. Follow this guide : Creating Packages
And maybe use Google search next time, yeah?