Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make webstorm format my html the way eclipse does?

That is instead of

<table>
<tr>
<td>content</td>
</tr>
<table>

I would like

<table>
   <tr>
     <td>content</td>
   </tr>
</table>

I've tried reformat, but it always gives me the top result. I've tried the call to action and went into the format settings, but it didn't change anything.

This seems trivial, but I have a huge unformatted .jsp file and it is impossible to work with in WebStorm.

like image 874
Slartibartfast Avatar asked Apr 09 '14 13:04

Slartibartfast


People also ask

How do I change the format of HTML in Eclipse?

Go to Window->Preferences->Java->Code Style->Formatter. Create new formatter.

How do I prettify HTML in WebStorm?

In the editor, select a code fragment you want to reformat. Before reformatting, you can take a look at the code style settings that are applied to the selected code: press Alt+Enter and click Adjust code style settings. From the main menu, select Code | Reformat Code or press Ctrl+Alt+L .

Can I use WebStorm for HTML?

WebStorm brings powerful support for HTML that includes syntax and error highlighting, formatting according to the code style, structure validation, code completion, on-the-fly preview during a debugging session (Live Edit) or in the dedicated preview tab in the code editor, and much more.

How do I reformat a file in WebStorm?

In the editor, select a code fragment you want to reformat. From the main menu, select Code | Reformat Ctrl+Alt+L. If you don't select a code fragment, WebStorm will reformat the whole file.

How do I view the output of my HTML code in WebStorm?

In the Documentation popup Ctrl+Q, click the link at the bottom. Press Shift+F1 or select View | External Documentation from the main menu. You can open the output of your HTML code in the built-in WebStorm preview or externally, in a browser of your choice. The preview functionality relies on the WebStorm built-in web server.

How do I reference a JavaScript or CSS file in WebStorm?

Inside a <script>, <link>, or <img> tag, WebStorm suggests completion for the path to the file you are referencing. Alternatively, in the Project tool window, select the JavaScript, CSS, or image file you want to reference and drag it into the HTML file. WebStorm generates the <script>, <link>, or <img> tags inside <head>.

How do I open an image file in WebStorm?

Select the image file in the Project tool window, and select Jump to external editor or press Ctrl+Alt+F4. WebStorm opens the image in the editor that is used in your OS by default. You can configure another image editor in which the IDE will open files.


2 Answers

Make sure that <table> and <tr> are not listed in Settings/Code Style/HTML/Other/Do not indent children of: option - this should help when formatting HTML. But note that it won't work for JSP - actually there is no way to get formatting working for jsp files in WebStorm. See WEB-527

like image 154
lena Avatar answered Oct 13 '22 21:10

lena


On the Main menu-->choose Code-->Reformat Code or press Ctrl+Alt+L.

In the Reformat Code dialog box, specify the reformatting scope: The current file. Selected text. All files in the current directory, including or omitting subdirectories. You can also include optimizing imports, by selecting the Optimize imports check box, which is enabled for the current directory only. Click Run.

like image 24
Safiresh Avatar answered Oct 13 '22 21:10

Safiresh