HTML attribute autocompletes - 2 questions

I am starting to code raw HTML regularly and I noticed a few odd autocomplete behaviors I couldn't figure out to deal with.


First,
If you have an html attribute that automatically inserts pair quotes around its value, how do I skip or pass over the ending pair quote? Right now I have to use a right arrow (or use the mouse) to just skip it as if it were any normal character. This is a bit tedious though, and I'd rather not have pair quote completion and just type it myself out of habit than have to use the right arrow key to move past it. In previous editors I have used, if I used type a ' " ' at the end of an attribute, and it already existed because of an automatic inserting of a pair quote, the ending quote was just overwritten (but only in this instance)/ Although this is my preferred functionality, but I am looking for any solution. I just hope that using the right arrow to pass over an automatically inserted pair quote is not the only option here.

Test this yourself by typing:
<a href="#" (<-- these are the auto completed pair quotes)>


Secondly,
If I press tab to autocomplete a suggested css class for an html tag, it will move UP the html below it to the current line automatically.

To recreate:

Type this:
<div >
Then type this *above* it:
<div > (you will need to create css class named test and maybe test2)

Upon hitting tab, <div > will be moved to the same line as <div >

How can I stop this behavior? Why does it happen?

4 comments
Comment actions Permalink

Hi there,

1) Please state IDE used and exact versions

2) Could you please record some basic screencast to illustrate the issues (as it happening on your setup). There are free online tools/services for basic screencast recording and sharing.

-----

On the actual subject:

#1 works fine for me -- IDE eats closing quote if I type it there -- no extra quote is added.

You can disable automatic insertion of quotes for attribute values: "Settings | Editor | Smart Keys | Automatically add quotes for attribute value"

Unfortunately there is no option to choose which quote (single or double) to use for tag attributes -- star/vote/comment to get notified on progress: http://youtrack.jetbrains.com/issue/WEB-459

#2 possibly your code style setting -- check it / play around at "Settings | Code Style | HTML"

0
Comment actions Permalink

I'm using phpstorm 7.1.3.

The first thing I did was try to look into HTML code styling. The option to control this behavior may be there, but I can't find it.

I will look into the screencasting - I haven't done it before for this sort of work. But when you typed what I instructed above, did you encounter the same behavior?

Here's a basic style to use in the html file to test issue #2 above.

<head>
<style>
.test {
text-align: right;
}

.test2 {
text-align: right;
}
</style>
</head>

after copy/pasting that into a new .html file, type issue #2 to illustrate it. Very strange behavior.

0
Comment actions Permalink

Works fine for me -- definitely need to see some screencast -- maybe I'm doing something wrong myself ..?

screen01.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE">
    <title></title>
    <link rel="icon" href="/favicon.ico" type="image/ico">
    <style>
        .test {
            text-align: right;
        }
        .test2 {
            text-align: right;
        }
    </style>
</head>
<body>
<div
<div >
</div>


</body>
</html>

0
Comment actions Permalink

Okay, thanks for looking into this for me.

I will look into the screencast software and update this question when I do. (It may be a while, though.)

0

Please sign in to leave a comment.