I want to format the code when I use "Ctrl + S". Do not want to do "Ctrl + Alt + L" every time. I am using WebStorm 2020.2.1
Please add your vote to the corresponding feature request: IDEABKL-5806.
As a workaround, I'd suggest giving the Save Actions plugin a try
Related
Below is the UI of Rider search with Cmd + F. But I'm using the IdeaVim plugin, I want a similar UI to count the current match when I perform a search with / or ? but can't find the config to display it.
If I'm getting this correctly then this is not possible right now (not implemented).
https://youtrack.jetbrains.com/issue/VIM-2544 -- watch this ticket (star/vote/comment) to get notified with any progress.
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"...
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.
So when I used to program in java I did it in Eclipse. Whenever my code had all the same margin I just had to select everything and press Ctrl+i.
Now I use Visual Studio Professional for programming in C++
The question is simple enough: How to properly set a margin to the lines of code so that it all looks well and I can easily tell what code belongs inside what brackets.
Thank you beforehand, and I hope this question is not closed. I tried searching for an answer, but found none.
Select what needs formatting and CTRL+K followed by CTRL+F.
Found in the C++ Visual Studio 2010 Keybinding Poster:
Select the code you want to format then:
CTRL + K, F or
CTRL + E, F
Formats the current selection
according to the indentation and
code formatting settings specified on
the Formatting pane under Tools |
Options | Text Editor | C/C++.
You can always find out what the actual shortcut is and use it or customize it:
go to Tools -> Options.
expand Environment, select Keyboard
type 'Format' in the textbox labeled 'Show command containing:'
find the row that reads 'Edit.FormatDocument'
read the value in the 'Shortcuts for selected command:' dropdown
If you want to change it, use a new shortcut key in the 'Press shortcut keys' box, then click 'Assign'.
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.