FAQ Database Discussion Community

WebStorm Marking Files as Invalid when using Require

I' using the latest release version of webstorm (9.03) and most of my JavaScript files show up as invalid. I'm showing the code below. 'use strict'; function SpeakerDetailsController (speaker, CONFIG, $sce, $scope) { this.speaker = speaker; this.showSessions = CONFIG.showSessions === 'True'; $scope.someSafeContent = $sce.trustAsHtml("<i>Hello</i> <b>World!</b>"); } SpeakerDetailsController.$inject = ['speaker', 'CONFIG',...

Stylesheets not showing up for Ionic App

I've built a small Ionic App in WebStorm using a simple tutorial for building a side-menu. It runs and everything when I bring it up in an emulator using Cordova, but none of the styling from Ionic seems to be working, even though it all appears to be part of...

Webstorm IDE: Live Template - Accessing the project name

I am brand new to Webstorm and live templates. But after doing some researching I can't figure out how to include the project name into a live template. It looks like its easy enough in a regular template ${PROJECT_NAME} but I can't find a $PROJECTNAME$ equivalent for live templates. Does...

How do I configure Webstorm 10 to run npm install --force before debugging?

I have a shared submodule that requires me to run "npm install --force" before I can run webstorm and debug the application. I would really like to edit my debug configuration to have a before launch action that will run the npm command for me. Can this be done?

I get an error — Error: [$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=decisionTree when I run karma.cong.js in Webstorm

Here is my karma.conf.js file module.exports = function(config) { var configuration = { basePath : '', autoWatch : false, frameworks: ['jasmine'], files: [ 'bower_components/angular/angular.min.js', 'bower_components/angular-mocks/angular-mocks.js', 'bower_components/angular-resource/angular-resource.min.js', 'bower_components/angular-animate/angular-animate.min.js', 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js', 'bower_components/angular-cookies/angular-cookies.min.js',...

How can I find obsolete “noinspection” annotations?

I just went through a project and resolved all code hints WebStorm provided. For most of these, that meant adding a noinspection comment, because either WebStorm was unable to understand the code, but the code is legit there is a bug in WebStorm I reported the bugs and am now...

Code styling without modifying the binaries

On the WebStorm for example and I believe in any Intellij product. You can easily refeactor the code and style it as you like from the setting 'Code Style'. But, the styling and refactoring actually change the binaries of the file. for example if you decide you want new line...

How to Debug Ionic WebApp?

I want to debug my ionic application in WebStorm. I am able to run the app in browser. But how can I debug? I tried: ionic serve --debug which doesn't seem to trigger any debugging? How can I debug the app when it runs in browser?...

Boiler plate code for webstorm angular js

Is there any boiler plate code available for angularJs that I can use with webstorm for speedy development. Bascially i am looking for code snippets to quickly create controllers, services, directives etc. I think sublime provides that feature, but not sure if we can do that in webstorm or not....

node does not output using console log

I fairly new to nodejs and I put the following code in some module, module.exports = function (app) { app.get('/aa', function(req, res) { console.log("test"); debugger; res.send('file updated'); ... the application is working and I see in the browser "file updated" but I've two problems: why don't I see "test" in...

Using chrome extension apis in typescript

I'm building a chrome extension written in TypeScript. I'm using WebStorm and I added the chrome-DefiniteltyTyped library in my project. However, when I write this in my typescript code : chrome.extension.getURL I got an error : cannot find name 'chrome'. Because of this, my javascript file is not generated and...

How to use WebStorm JavaScript Debug configuration without Google Chrome?

I have FF (v.35), Opera (v.12), and IE (v.11) installed on my Win 7 x64 PC and wanted to debug a (locally stored) HTML file that loads a JS script. After adding the file to a new project, I went to File > Settings > Tools > Web Browsers and...

WebStorm 10, issue with terminal on Windows 10

I decided to try Windows 10, but having problem to make terminal works inside WebStorm. When I open terminal, sometimes it's completely black, sometimes it loads project folder but I cannot type there. There is a way to run it in the external window, but I just got accustomed to...

How to completely uninstall webstorm on ubuntu [closed]

I am trying to remove Webstorm editor completely from my Ubuntu 14.04, I have already tried by removing its installation folder but its settings still exists, is there any command exist to remove it completely or what any other way? please help me out?

TypeScript problems in webstorm using the “import” statement

When I tried using the import statement in webstorm with TypeScript enabled I get the error Error:(14, 1) TS1148: Cannot compile external modules unless the '--module' flag is provided. However if I add the --module flag to the TypeScript command line options under "webstorm Preferences -> Languages and Frameworks ->...

typescript unable to add definition files to webstorm

i want to use baconjs with TS,but after copy baconjs def file for ts,i got that msg: bacon.ts(216,1): error TS1148: Cannot compile external modules unless the '--module' flag is provided. to solve that,i should add a file watcher with --module cmd for tsc,but i cannot find how to distinguish between...

IntelliJ(WebStorm) Mongo Explorer doesn't work

I'm trying to use Mongo Explorer plugin on WebStorm, but it doesn't work. I added mongo executable pass and server's path from Preferences dialog. It shows the server, but it doesn't show the contents below the server. Why? ...

image in .ejs not showing when using WebStorm

I'm using Webstorm to create a page and I can't get images to show when rendering .ejs. Here is my code: test.js http = require('http') express = require('express') app = express() app.engine('.ejs', require('ejs').__express) var port = process.env.PORT ? process.env.PORT : 3000 http.createServer(app).listen(port, null, null, function(){ console.log('Listening to port ' +...

Webstorm not ignoring directories marked “excluded”

I have marked the WebContent/desktop/build directory as excluded, but Webstorm is still trying to index it. This is annoying whenever I build, and I have to wait for Webstorm to finish indexing before I can do anything. How do I make it not index anything in the folder? Here's what...

Shortcut to create automatic tags for JS and CSS files in my project in WebStorm

WebStorm is packed with nice features and shorcuts, but I'm not able to find a quick way to add JavaScript or CSS file to my HTML page. I have a new project, I create a file index.html and a script.js (or it can be a library I downloaded or a...

WebStorm: Disabling language injection coloring

WebStorm is injecting the css coloring rules in my JavaScript. For example in the following code block... $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); }); Everything inside '.navbar-collapse ul li a' is colored according to the css color rules. I would like this to be colored like a normal javascript string....

Make Webstorm highlight .txt files as HTML

So I have some project files all with .txt extensions which are really HTML templates. I am trying to syntax highlight those .txt files as HTML using Webstorm. Any tips on how to do that?

How to tell WebStorm to only preview file by single click, not create a tab?

By default, clicking on file name in Project View panel will create new editor tab in WebStorm, which is annoying. At the same time in Sublime only double click on file name will create it. How can I achieve the same behaviour in WebStorm?...

Braces placement in object definition in PhpStorm

Is there any way to make PhpStorm place curly brackets on new line in this situation? var test = { '*': { // something } } instead of making this (after reformatting): var test = { '*': { // something } } ...

Custom surround template

How can I define my own custom surround template that I can use to wrap around a selection of javascript code followed by reformat. I've used Alt + Cmd + T to bring up this option panel....

IntelliJ/Webstorm not finding import reference

I have the following project structure: root src scripts main.js foo.js Inside of my main.js file, I'm importing foo.js like so: import 'src/scripts/foo.js' When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go....

'require' keyword not being recognized by webstorm

I'm using WebStorm as the IDE. Here's my folder structure and express.js insalled: But my sample code is not aware of the require keyword: var express = require('express'); var app = express(); app.listen(1337, function(){ console.log("ready"); }); Update Per Darin's answer Here's my package.json file which now sits in the root...

Is it possible to hide JavaScript framework call stacks when debugging, only step over application JavaScript code

I'm fairly new to JavaScript, but got assigned working on a front-end project written in a mvc frontend framework, every time when I try to debug the code base to better understand the application logic, I got suck in to the framework code, for now, I dont really wanna dig...

I just created an HTML 5 Boilerplate project in WebStorm. Is there a standard command for compiling the “dist” folder?

I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder. Is there a standard command to compile the content of the src folder into the dist folder? This is how my project looks like: ...

WebStorm: Hide html selector toolbar

In WebStorm I want to hide the toolbar that appears on html files at the top. It shows the html selectors and ids drill down. I've circled it in the below picture... ...

Update multiple vendor prefix styles in webstorm

In Webstorm 10, you can insert all vendor prefix styles using built in emmet. For instance, you type in -border-radius followed by the TAB key, it will automatically create the vendor specific styles for you. Then you can type in eg. 10px and it will apply the style to all...

Error: Unexpected request: POST Karma-jasmine-angular

the actual scenario is like when I am trying to test my angular js controller and service together in which first I call a get ajax request and on its success I call a user service which also contains a post ajax request. When I run test I got the...

WebStorm after reformat code - what is this?

This is my HTML structure: <ul class="list-unstyled"> <li><a href="#">Superga</a></li> <li><a href="#">Nike</a></li> <li><a href="#">New Balance</a></li> <li><a href="#">Birkenstock</a></li> <li><a href="#">Havaianas</a></li> <li><a href="#">Punto</a></li> <li><a href="#">Marjin</a></li> <li><a href="#">Puma</a></li>...

JQuery DefinitelyTyped, typescript 1.4 and Webstorm error highlight

I update my jquery.d.ts definition file from https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts but it generate a lot of error if I open it inside WebStorm IDE. I found on internet that may be WebStorm compiler couldn't be up-to-date so I went on "Preference"->"Languages&Framework"->"Javascript"->"Node.js and NPM" and I update the typescript package to 1.4.1 but...

What is the type of an object literal key as defined in TypeScript?

I'm not using TypeScript as the primary language for this application, but as the type-hinting assist for JetBrains' WebStorm alongside JSDocs. I'm also using the keyMirror utility to create quasi-enum object literals. Given the following: //enums.js var keyMirror = require('keyMirror'); module.exports = { CRUDVerbs: keyMirror({ //keymirror mirrors the key to...

compass:dist & execFile(“compass.bat”, …) - Warning: spawn EPERM

First of all, I am pretty new to (modern) web development and I tried to import an existing project into my WebStorm and run a Grunt task. It stops at "compass:dist" with: $ node.exe C:\Users\lgr\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt --gruntfile C:\Users\lgr\workspace\js\rit-workshop\ui\Gruntfile.js buildall Initializing Command-line options: --gruntfile=C:\Users\lgr\workspace\js\rit-workshop\ui\Gruntfile.js, --verbose Reading "Gruntfile.js" Gruntfile...OK Registering Gruntfile tasks. Registering...

Prevent webstorm watcher from running on checkout new branch

Add the moment my less and handlebar files get recompiled every time I check out another branch. Is there a way to run the watcher only when file was saved and not when it was changed in cause of checking out a branch.

Jade language injection in Webstorm

I have an HTML element whose contents I want to be treated as Jade (it will be compiled to pure html later). Webstorm obviously doesn't recognise this so it has no syntax highlighting: If I go to add jade as a language injection, it isn't listed as one of the...

Running jest tests directly in Intellij Idea/WebStorm?

I'm using jest to write tests in my ReactJS application. So far, to run my test suite, I need to type 'npm test'. Here's the snippet from package.npm: "scripts": { "test": "./node_modules/.bin/jest", (other stuff) }, "jest": { "unmockedModulePathPatterns": ["<rootDir>/node_modules/react"], "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", "testFileExtensions": [ "es6", "js" ], "moduleFileExtensions": [ "js", "json",...

Should I configure a watcher for less files in a meteor project

I'm setting up a meteor project in Webstorm and so I added less, and converted my .css file to .less. Webstorm sees that this is a .less file and prompts me to add a watcher. Given that this is a meteor project, is it necessary to add the watcher or...

Webstorm SystemJS import resolve error

SystemJS makes it possible to specify what kind of content is rendered from the imported files: CSS System.import('my/file.css!') Image System.import('some/image.png!image') JSON System.import('some/data.json!').then(function(json){}) Text System.import('some/text.txt!text').then(function(text) {}) (Source) Using SystemJS, importing from a file with a type appended, gives an error in Webstorm. So when I do this: import template from './404.template.html!text';...

Custom syntax highlighting for content of