I am having a problem with WebStorm auto complete when using import keyword in JavaScript.
You can see an example here: https://i.gyazo.com/95adbf84c964663f715fc069ba1e1e8a.mp4
Basically when I auto complete following code:
import {loadLevel, loadSprite} from './loaders';
It doesn't add a file extension to loaders, which should look like this:
import {loadLevel, loadSprite} from './loaders.js';
I am using latest WebStorm version, I also tried to Invalidate cache and restarted IDE.
I am using JavaScript ES6 version in settings.
There are no other files called loaders with different extension anywhere else in my project.
If you need any more info, let me know.
Thanks
WebStorm supports completing file name with extension (when using completion in the from part). To enable completing file name with extension, set registry key commonjs.complete.required.filename.with.extension to true :
Open Help | Find Action... dialog
Type Registry, find Registry item in dropdown list and press Enter
Find commonjs.complete.required.filename.with.extension there, tick the checkbox
But this hidden option doesn't affect auto-imports, so, when auto-creating import statement from reference, extension won't be added - WEB-28741
Related
Is it possible to tune WebStorm so that when I have something like this in my terminal window, then I just click on the filename and jump to it.
Not possible using built-in terminal (please vote for IDEA-118566 and IDEA-154439).
Awesome Console plugin might be a solution; but it doesn't support built-in terminal (https://github.com/anthraxx/intellij-awesome-console/issues/23)
there is also Output Link Filter plugin that provides similar functionality, but it looks outdated and (also) doesn't work in built-in terminal
Update (2022): IDEA-118566 is already fixed, links should work. Please note that providing links for particular output needs adding specific logic handing such output. Thus, if you encounter missing links in a particular output, please file a separate issue request describing link output format and steps to reproduce such output.
Webstorm does in fact now have this functionality.
Note that the bug about this functionality being missing (linked in another answer) has been marked as fixed: https://youtrack.jetbrains.com/issue/IDEA-118566.
It's not quite a single click solution, but what I do, is double click the text so that it auto selects and copies the path, including line and char numbers to clipboard. Then use the shortcut for Goto File.... Hit paste (cmd+v) then Enter and it will take you to the exact location.
For me, the shortcut for Goto File... is cmd+shift+O - you can check your shortcut in the menu Navigate -> File...
You can use the following format to output text in the terminal via console.log and the path will be clickable:
at ($FILE_FULL_PATH:$LINE_NUMBER:$SYMBOL_NUMBER)
Example with the full path to the file:
at (/home/ubuntu/project/index.js:12:55)
However, if you're running WebStorm with exact file path's project's folder, you can use the following format:
at (./project/index.js:12:55)
I installed Awesome Console plugin and with this plugin, all files and links in the console and terminal will be highlighted and can be clicked. Source code files will be opened in the IDE, other links with the default viewer/browser for this type.
You can jump to files from the terminal with left click
Just select file path (dblclick) & press "shift" twice (search everywhere) & press "enter"...
I want to introduce into my project some code to be highlighted on certain pages (like index.hbs) I've searched for libraries that can do this and found tools like highlight.js, but I was unable to use it in my ember project. Can anyone explain how to import a custom library like highlight.js or can someone give me a recomandation for a tool. I've tried to use this tool: ember-cli-eg-code-highlight, but it is not specified how to use it. Ok I have installed it, pasted the {{highlight-js code=file lang=language hasLineNumbers=hasLineNumbers}} in my index.hbs, but it does not work. Also the ENV.emberHighlightJs: { style: 'arta' };I have no ideea where to put it. Tried to put it inember-cli-build.js but it is not working.
I have found also markdown-code-highlighting. But I am lost at this step: "In your Brocfile you'll need to import the CSS styling you want for the highlighter. " So where exactly is my brocfile in my ember project?
Did you restart ember server ?
You can find example of using ember-cli-eg-code-highlight here: https://github.com/EmberGrep/ember-cli-eg-code-highlight/blob/master/tests/dummy/app/templates/application.hbs
But it looks like addon is buggy. So it worth to check this PR https://github.com/EmberGrep/ember-cli-eg-code-highlight/pull/9
P.S. about brocfile -- now it names as ember-cli-build.js at the root of project
When I create a new javascript file, a template like comment is added at the top of the file that looks like this:
/**
* Created by User on 2015-03-29.
*/
I would like to modify this template, but I cannot for the life of me figure out how.
In the settings page, I have tried searching for 'IDE settings', 'File and Coding Template' (as it would be in PHPStorm, I believe), 'Copyright' (as in IntelliJ), 'header', 'template', 'comment' and different combinations of those terms. But none of these terms result in anything relevant. And searching on google is difficult, because most links take you to PHPStorm or IntelliJ help docs.
Maybe my google-fu is off today...
Settings (Preferences on Mac) | Editor | File and Code Templates | Templates -- you need JavaScript File entry.
And searching on google is difficult, because most links take you to PHPStorm or IntelliJ help docs.
Well ... PhpStorm = WebStorm + PHP + Databases -- in terms of settings it is exactly the same... (comparable builds of course)
P.S.
In previous versions (WebStorm v8, PhpStorm v8.0.1 and older, IntelliJ v13) all Settings were in single column but separated in 2 groups: "Project Settings" on top and then "IDE Settings" on the bottom of the list. In current versions all settings are mixed together using collapsible tree structure and you have to look for special icon next to the settings section name -- it will tell if you this is an IDE wide setting or project specific.
Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.
Using TextMate:
Is it possible to assign a shortcut to preview/refresh the currently edited HTML document in, say, Firefox, without having to first hit Save?
I'm looking for the same functionality as TextMate's built-in Web Preview window, but I'd prefer an external browser instead of TextMate's. (Mainly in order to use a JavaScript console such as Firebug for instance).
Would it be possible to pipe the currently unsaved document through the shell and then preview in Firefox. And if so, is there anyone having a TextMate command for this, willing to share it?
Not trivially. The easiest way would be to write the current file to the temp dir, then launch that file.. but, this would break any relative links (images, scripts, CSS files)
Add a bundle:
Input: Entire Document
Output: Discard
Scope Selector: source.html
And the script:
#!/usr/bin/env python2.5
import os
import sys
import random
import tempfile
import subprocess
fname = os.environ.get("TM_FILEPATH", "Untitled %s.html" % random.randint(100, 1000))
fcontent = sys.stdin.read()
fd, name = tempfile.mkstemp()
print name
open(name, "w+").write(fcontent)
print subprocess.Popen(["open", "-a", "Firefox", name]).communicate()
As I said, that wont work with relative resource links, which is probably a big problem.. Another option is to modify the following line of code, from the exiting "Refresh Browsers" command:
osascript <<'APPLESCRIPT'
tell app "Firefox" to Get URL "JavaScript:window.location.reload();" inside window 1
APPLESCRIPT
Instead of having the javascript reload the page, it could clear it, and write the current document using a series of document.write() calls. The problem with this is you can't guarantee the current document is the one you want to replace.. Windows 1 could have changed to another site etc, especially with tabbed browsing..
Finally, an option that doesn't have a huge drawback: Use version control, particularly one of the "distributed" ones, where you don't have to send your changes to a remote server - git, mercurial, darcs, bazaar etc (all have TextMate integration also)
If your code is in version control, it doesn't matter if you save before previewing, you can also always go back to your last-commited version if you break something and lose the undo buffer.
Here's something that you can use and just replace "Safari" with "Firefox":
http://wiki.macromates.com/Main/Howtos#SafariPreview
Open the Bundle Editor (control + option + command + B)
Scroll to the HTML Bundle and expand the tree
Select "Open Document in Running Browser(s)"
Assign Activation Key Equivalent (shortcut)
Close the bundle editor
I don't think this is possible. You can however enable the 'atomic saves' option so every time you alt tab to Firefox your project is saved.
If you ever find a solution to have a proper Firefox live preview, let us know.