I've spent some time looking through the docs and keyboard shortcut options and I've been unable to find this specific feature inside vscode, sublime text, or atom. It seems to obvious that I must be missing something.
What is the keyboard shortcut or name of the setting to jump into an html tag from the outside? I know the emmet plugin supports tabbing through on initial setup but if my cursor is to the right of the tag is there a shortcut to jump into the middle of the tag?
For example
is there a way to go from cursor being here
<label>Name</label> |
to here
<label>Name|</label>
without keying left 8 times?
Try extensions like HTML Snippets or HTML CSS Support.
It auto completes the html tags.
Or in normal case, try Ctrl+Left Arrow
It shifts left by one word.
VScode extensions like: jumpy, Code Ace Jumper, MetaJump - allow you to easily jump through code in your window.
Related
In an HTML file, when I position the cursor at the beginning of element (example <div>), VS CODE select the closing tag correctly (</div>).
On the other hand, if I create a PHP file containing HTML this does not happen. If I position myself at the beginning of a tag (example <div>), VS CODE selects all the div tags for me, of any piece of code, making it impossible for me to understand where the tag (</div>) closes.
This also happens with other elements or attributes, such as: class, section, id, p etc.
As if it found all the characters identical to the ones I selected with the cursor.
The extensions I have are the following:
Autoprefixer
HTML Snippets
Live Server
Path Intellisense
PHP IntelliSense
Visual Studio IntelliCode
CodeSnap
Polacode
How can I solve? Thanks in advance.
You can install an extension for that. Go to extension and search "Highlight Matching Tag" and install it. It will underline the closing/opening tag for the tag that you choose. This seems to have already been solved in this post.
I have installed VScode recently. I loved it alot but I have a problem with it. When I writer a code (for example, an HTML5 code) and writes an opening tag like <form>, it appears in a list of suggestions as shown below. When I hit enter on the suggestion form I expect that an automatic closing tag (</form>) will be placed. But, what is really going is that the word in the opening tag is completed and the ending angular bracket of the opening tag is not placed and that the closing tag is not placed as well. Is there a solution for this problem?
Thanks in advance
I have mostly worked in Adobe Dreamweaver (don't hate too much, I really like some of its feature that I'm about to mention). I'd really like to become proficient in Sublime Text 2. There are two things I'm looking to figure out:
When I start typing a tag and it auto suggests what it thinks I'm typing, I can hit tab or enter to auto-complete the tag. But when I do this, it makes the closing tag too. I hate this, because I go back to change things often, then when I tab to auto complete, it adds in the entire closing tag. So my question is can I make it ONLY auto-complete the opening tag when I hit tab or enter? (btw, I have emmet installed too)
My next question, if anyone is familiar with Dreamweaver, whenever I open an HTML file, it opens all corresponding files in a sub menu below the tab. So I open say, index.html, and below it appears, automatically, my css file, js file, and any files that I've put in the html file. With Sublime Text, I have to go to the trouble to open all those files with it. Is there any plugin or way to make Sublime replicate this?
Thanks so much for any help anyone can provide!
This is a bit old, and maybe you've discovered the answer, but for #1, you can set the "auto_complete_commit_on_tab" setting to true in your user settings.
http://www.sublimetext.com/docs/2/auto_complete.html
I know how to use CSS to turn off or change the appearance of links on a web page (i.e. the anchor tags) but I'd like to turn them off completely. I'd like to do this for a bookmarklet install page. For example the Delicious tools page has a bookmarklet you can drag onto your browser's favourites bar. But on the install page because the bookmarklet is inevitably a link you can also accidentally click on it if you meant to drag it. This could confuse novices so I'd like to turn off the link behaviour in CSS whilst leaving the HTML intact as it is needed for the bookmarklet to work.
I doubt this is possible as it is a behavioural change not a formatting change, but it would be great if it is possible?
This is not possible with plain CSS.
However, you could prevent the browser from following the link by using javascript/jquery:
$("a.bookmarklet").click(function(e){
e.preventDefault();
});
-- SEE DEMO --
I just found that, in Adobe Dreamweaver CS3, this code segment seems fine in the design view,
Test Anchor
but if I add an "id" attribute to this "a" tag, like this,
<a id="test" href="#">Test Anchor</a>
there would be an icon at the left side of the "a" element, something just like an open book. (I have no privileges to upload image)
What is the meaning of the icon? Is there anything that Dreamweaver implies? I've tried to google some groups of keywords, and got nothing but ads.
Any help? Thanks a lot!
This icon (should look like a shield with an anchor on it) is a Dreamweaver design view indicator. This indicator is used to identify "named" anchors. No image that will be uploaded to your site, so don't worry about that. Anchor () tags with an ID are considered "named" as you can add a hash to the end of your URL to have the browser "jump" to the named/ided element. If you file is test.html and you visit your page with test.html#test then the browser will load up your page and "jump" to the named anchor. In recent browsers (not sure how far back, but likely far enough to not worry too much about it now) anchors with an id attribute value will work in the same manner as those with a name attribute value.
If you do not like this icon appearing when you have a couple of options:
Edit (Dreamweaver on Mac) -> Preferences, Invisible Elements, uncheck Named anchors.
Or View -> Visual Aids -> Invisible Elements. This option turns off all invisible element indicators listed in the preferences, so make sure you know what things your turning off.
It's probably just using the symbol to identify text on the page that's a link, save the file and load it up in your web browser, chances are the icon isn't actually part of your code.