It appears PHPStorm doesn't want to follow the code style I specified.
Each time I format an HTML file, it collapses the indentation from this:
<html>
<head>
bleh
</head>
<body>
bleh
</body>
</html>
to
<html>
<head>
<bleh>
bleh
<bleh>
</head>
<body>
<bleh>
bleh
<bleh>
</body>
</html>
"bleh" (being all the contained tags) are indented how they're suppose to.
I found the setting: File -> Settings -> Code Style -> HTML -> Other -> "Do not indent children of".
That was filled with several tags which I have already removed (so the text field is empty).
The settings are theoretically applied to the Project scheme which is the current scheme.
However, I haven't fully grasped the concept of what these schemes are, so I may be missing something important.
Pictures:
http://snapshot.overloadproducts.com/7411c9d50e0b43edc76c1e625a38d61c
http://snapshot.overloadproducts.com/5a74f83356572f3644a6d52bf2fa1f66
Edit:
Opened PHPStorm the next day, and it said the project file had been edited externally, and it needed to refresh. Once it did, it was formatting correctly again.
So somehow the settings file was out of sync and the settings window wasn't saving to the file.
Still a bug in my opinion.
Just go to Setting/preferences -> Editor -> Code Style -> HTML -> Other
Insert new line before: add body.
Do not indent children of: clear all in this form.
ANSWER (ON EDIT): For an actual work around, try right clicking your document and clicking "Paste Simple". This will preseve the formatting of the text pasted on the clip-board. Not really a solution as such, but an appropriate workaround.
ORIGINAL:
Did you end up getting an answer for this?
I have the same problem, and for the life of me can't fix it. This is really really annoying, especially seeing as the "preview" pane of what the code formatting should look like isn't accurate - it shows:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
... but when pasting in text from an editor, it gets reformatted to:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
Sorry for posting a comment in the answer section but I don't have 15 reputation.
Right below the option "Do not indent children of:" you'll find the option "or if tag size more than" with a default value of 200.
That means that for larger HTML-Files indentation will effectively be disabled. I have no idea why anyone would want that but the way to get rid of this (miss-)behaviour is to remove that value (just leave the field empty).
Related
In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some...
</div>
And after Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some... </div>
Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?
It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.
There isn't an option to force the end tags to new lines.
One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.
Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.
Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.
I do not know about that. If you want a similar result to the top bit of code you could use Glitch.Com, Made by the people who made stackoverflow. Glitch hosts your website (website.glitch.com) and has a nice editor, Not to mention project rewind if you want to revert to a previous version.. You have light and Dark theme too.. It automatically closes tags like this
<h1>
</h1>
I think it is perfect compared to any other editor, You can have multiple files too.. no download required. Auto saving and perfect for any developer :3
I love emmet. div.container and then pressing tab has made my life so much easier.
But assume you have a div like this:
<div class="myDiv"> </div> and you want to wrap that inside a container.
What I've been doing so far is typing out
<div class="container">
</div>
Then I copy paste myDiv in between.
There has to be a simpler way, no?
What I'm looking for is being able to put my cursor in front of <div class="myDiv">, type out div.container then press tab, and the result would end up like this:
<div class="container">
<div class="myDiv">
</div>
</div>
Not even sure what the term for this would be. Searching for "phpstorm wrapping" doesn't give me what I need.
Is there a setting for this somewhere that I've missed?
Select your text/code
Code | Surround With... (or Code | Surround with Live Template... -- the menu will be almost the same for HTML context)
Choose Emmet option in appeared popup
Type your emmet sequence
P.S.
It's possible to assign custom shortcut to Surround with Emmet action so it can be called directly (one shortcut that would replace steps #2 and #3). This can be done in Settings/Preferences | Keymap -- just search for the aforementioned action (using search field).
You don't need div.container. A simple .container does the job also. A div is automatically generated if you don't specify the element.
You can do nested elements with >.
In your case it would be: .container>.myDiv. If you want to surround existing items, look at #LazyOne answer. The shortcut for it is [Ctrl] + [Alt] + j (on default settings at least).
For more information look here. (was just a quick google search for "emmet PHPstorm" but it looks good)
In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
I'm trying to make use of execCommand as I thought it is enough for my purpose, but when testing it under IE 8, there is strange thing: only 'italic' options fails to revert (I can set italic but it wont go off for the next execCommand call), or rather the browser cannot recognise that italic was already applied, because when run queryCommandState('italic', false, null)) I receive false. Thing is, that there is problem only with italic other looks ok(actually check couple;-)).
There is another point that I use contentEditable on html element, when I moved it to iframe it worked but I really do not want to use iframes. Furthermore there is styleWithCSS command to force styling html by style attribute rather than by tags like b -> `style="font-weight: bold" But this of course doesn't work in IE too.
Could you please advise or maybe suggest some other tool to handle some basic text editing in html
update: I just run command in js:
document.execCommand(actionToCall,false, args);
it correctly format selected text in my contentEditable:
<div contenteditable="true" type="text" class="myeditor-editable" style="white-space:pre-wrap">
<i>test</i>
</div>
but seccond call do nothing -> it actually tries to append <i></i> again. ( when look at HTML bar in FF console, then I see that there is some manipulation with html but like I said it stays italic)
Edit2: It looks that there must be a conflict in my code as in fiddle it's working(http://jsfiddle.net/kpskxfbo/1/ ), I thought that can be because the result in jsfiddle is returned in iframe but I have try it on my local computer and it looks fine too... I will post update once I found the problem.
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match