Hi I'm using Emmet on Atom code editor and it works fine only with the simple tags like meta.
Nevertheless when I try something complex like ul>li*5 or meta[property=""] and then press tab, nothing happens.
Anyone know how to fix this?
It happened to me as well, the problem is that the same hotkey(tab) is set to multiple actions, so my solution was to edit the expand action like this.
go to Settings > Packages > Search Emmet...
on the keybindings get the last one tab and click on the copy icon
[]<- (something like that)
then go to Edit > Keymap... and copy the next there
'atom-text-editor:not([mini])':
'ctrl-alt-shift-c': 'emmet:expand-abbreviation'
As the keymap.. overrides all the other keybindings this one will work over all other definitions.
Note: if you use 'tab' as key binding it will only be used for expand-emmet, so you won't be able to actually tab__(2spaces) in HTML, PHP, more... files
HOPE IT HELPS
you find after installing emmet, tab completion doesn’t work as described in the documentation, go to Atom > Keymap or File > Keymap add the following code, then restart Atom (this fix worked for me):
'atom-text-editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Answer is from
https://github.com/emmetio/emmet-atom/issues/503
It worked for me.
You go to Atom > Keymap or File > Keymap add the following code, then restart Atom.
'atom-text-editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Just want to mention that like in https://stackoverflow.com/a/65645633/7773582 I had to restart Atom installed in Ubuntu Linux Groovy Gorilla to get my own keymap.cson for a new Keybinding with
'atom-text-editor[data-grammar="text html basic"]:not([mini]),
atom-text-editor[data-grammar~="erb"]:not([mini]),
atom-text-editor[data-grammar~="jade"]:not([mini]),
atom-text-editor[data-grammar~="css"]:not([mini]),
atom-text-editor[data-grammar~="stylus"]:not([mini]),
atom-text-editor[data-grammar~="sass"]:not([mini]),
atom-text-editor[data-grammar~="scss"]:not([mini])':
'shift-enter': 'emmet:expand-abbreviation-with-tab'
for the Emmet-Plugin to unfold its Syntax to work properly.
Any add-ons you install will most likely wont work if you dont restart your app.
If all solutions mentioned here does not take any effect to your Atom app is simply because your Atom app is STILL working in the backgroud even if you closed it.
Simple solution is go to Task Manager and End Task your Atom app there...
Hope it helps...
Happy Learning...
Related
Every other snippet is working, but !+tab is not.
! snippet is not working
other snippet is working
I am using Visual Studio Code. I'm using 1.69.0. It was working before, but I wanted to add net html file, named that new.html, because I had index.html already. After that this script stopped working on every html file, but other scripts like "a", "div" etc. is working.
The v1.69.2 recovery release is out now. Emmet in html is working as it should for me now.
Looks like it will be in the Recovery Release, see https://github.com/issues?q=is%3Aissue+label%3Acandidate+repo%3Amicrosoft%2Fvscode+repo%3Amicrosoft%2Fvscode-internalbacklog+repo%3Amicrosoft%2Fvscode-remote-release+milestone%3A%22June+2022+Recovery+2%22+.
Don't know when the recovery release to Stable - presumably v1.69.2 - will be released. The .1 release is out and the fix is not in it.
It has been fixed though, see https://github.com/microsoft/vscode/issues/154375, and should be in the Insiders Build tomorrow (07/13/2022).
Testing the latest Insiders: ! is working. As is ul>li*3 type expansions (although that never stopped working for me - but it has been reported elsewhere). Should be in the v1.69.2 release out soon.
It is a known issue with the v1.69 release, see html emmet suggestion not automatically display or https://github.com/microsoft/vscode/issues/154517 for example. Lots of issues on github on ! and * not working.
So the emmet snippet will not appear automatically when you type !, but you can press Ctrl/Cmd+Space (which is the command Trigger Suggest) to make it appear and select normally.
Try Ctrl/Cmd+Space for anything emmet-related nnnnnot working in vscode v1.69.
You could also go back to v1.68 to solve the issue.
Try to write "doc" instead of "!". "doc" works for me.
On Windows 10, this worked for me:
Go to "Settings" and type "emmet.trigger" in the search
A checkbox for "Emmet: Trigger Expansion On Tab" will appear
Check the checkbox for allowing Emmet to trigger expansion on tab
After I did that, it worked just fine for !+TAB and any type of mulitpliers (i.e. li*4+TAB).
You need to check this option or put "emmet.triggerExpansionOnTab": true in settings.json to use the emmet abbreviation pressing TAB. I realized this ones what is not working:
!, lorem, >, and .
Examples of use: ul>li, li3, ul>li*3
None of them shows the preview of the emmet, and you can't use them pressing TAB without enabling the option that I sayed above, and even checking the option you won't be able to see the previews, you'll need to know them by yourself and press the TAB even though nothing showing that it's a emmet abbreviation.
You can use CTRL + SPACE too.
Edition Windows 11 Pro
Version 21H2
VSCODE Version 1.69.0
I had the same issue with the ! not working. I found another shortcut that does the same thing: type html:5, and press enter.
Looks like a bug, I have the same problem with 1.69.1, the VSC team is aware and fixing it. Should be fixed with the next release soon.
Meanwhile, you can use either HTML:5 or doc
meanwhile use "HTML:5"
enter image description here
or use "doc"
enter image description here
While #Mark's answer works, another work around would be to use the html:5 snippet which still works as expected in v1.69
Yes, I am facing this issue too since the latest update.
Somehow the solution I have got is :
You can check the box “Emmet: Use Inline Completions”
In settings by typing “emmet” in the setting’s search.
You can see the suggestion now and choose it by pressing the tab.
This is the solution I have got till now but hoping that we could have the previous version back.
I am experiencing a strange problem with emmet in vs code.
after typing some emmet abbreviation and pressing tab I get a warning saying "command emmet.expandAbbriviation not found"
I have double-checked my settings.json and "emmet.triggerExpansionOnTab": true is there in the file.
I have been using vs code for a month but never before I had any problem with emmet, but suddenly this problem has come up
Update: I have noticed that suddenly other extensions like live server have also stopped working and also I'm no longer getting autocomplete suggestions from MDN docs.
Judging from this emmet won't work issue, the problem might have begun as a result of the last update.
Search #builtin in the Extensions view and make sure the Emmet extension is enabled.
Open the VS Code. Go to the Vscode settings by pressing the setting icon or ctrl+.
In the setting tabs, click on the HTML option.
Click on the “Edit in settings:json” hyperlink to edit the settings in JSON format. Click on the Edit in settings.json to edit and fix emmet problems.
Inside the curly braces, enter the following code under the already written JSON code:
“emmet.triggerExpansionOnTab”: true,
“files.associations”: {“*html”: “html”}
5.Save the file. Now if you try to apply emmet in your code, it will work smoothly!!
Because the error you are reporting reads like this:
"command emmet.expandAbbriviation not found"
You may have a typo in that command which would explain the interpreters inability to find the command. Of course it could be that you have the typo here in this post while your settings in VS Code are correct.
Either way, the correct spelling is emmet.expandAbbreviation. Notice the letter before the 'v' is an 'e' not an 'i'.
This link here seems to have the same issue..
VS Code - command 'emmet.expandAbbreviation' not found
I had the same issue as well and could not find much help..
But what fixed it for me was using a previous version.. so something with the never version might not work with my settings I guess (and some them I can't change like my Mac OS..;-).. as my mac is 2015 edition).. Anyways if you are still having this issue.. this link is what worked for me..
https://code.visualstudio.com/updates/v1_55
Download an earlier version and you should be fine... Hope it works for you.
I added a vetur.config.js file to my root directory, and it is working fine.
I can tab as per normal. HTML autocomplete is also back.
got the reference here:
https://vuejs.github.io/vetur/reference/#example
I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.
In JS or CSS files the key bindings work just fine and produce the expected result.
So how can i get the proper type of comments in HTML files?
Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.
I've just installing VSCode 1.1.1 and try to put a comment in an new html file
To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.
Hope that help you
If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:
"comment HTML": {
"prefix": "chtml",
"body": ["<!-- $1 -->"],
"description": "Comment HTML line"
}
You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}
Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.
Maybe this is a workarround, but it works excellent for me. Hope it helps!
https://code.visualstudio.com/docs/customization/userdefinedsnippets
For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / )
(commenting them with {% comment %})
List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):
Hugo Language and Syntax Support
Djaneiro
Nunjucks
Tornado
Sublime Babel
Babel
Twig
Django by Baptiste Darthenay (v1.0.0)
(Feel free to edit this answer and add yours)
You may need to restart code after disabling your extension (I did).
In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut
This will open two files beside each other like in the screenshot below:
here you can change or create your own shortcuts.
Like I just replaced Ctrl+KU to Ctrl+/
Hope this will work for you !!
For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)
For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.
Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.
Chances are one of the extensions in the bundle of that extension pack is causing the issue
Click (Ctrl + K C) to comment the html.
Click (Ctrl + K U) to uncomment html.
For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.
You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.
How to use hotkey in notepad++ webedit plugin?
what are the keyboard shortcuts to press to insert html tags??
Install the "webedit" plugin. Which will allow you to add custom shortcuts.
(Plugins > plugin manager).
After the program restarts, go to plugins > webedit > edit config. And either change an existing one or add a new one, (example &A= | ). You can remove the shortcut icons if they annoy you.
Then you go to, settings, shortcut mapper. Right now, ctl+enter is set to word completion I believe. Change that to something else (on main menu). Then go to the plugin commands tab and find your command and set it to ctl+enter. Then restart, and it should work.
http://www.graphicdesignforum.com/forum/showthread.php?t=52719
All keyboard shortcuts can be assigned/modified using the standard Shortcut Mapper. For more information see the WebEdit.txt help file.
That's what it says in the plugin description, at least.
Setting>Keyboard Shorcut>Plugins commands
then go to
- WebEdit - A
- WebEdit - Div Class
- WebEdit [...]
and select shortcut
I see that someone sort of answered it but I have a few things to add.
When you install WebEdit, go to the config as stated.
Go down to the [Tags] section.
Underneath all the comments, add the shortcut you want.
Here is the syntax:
<Tag>=<Replacement>
For tag, put what you want to replace. For example 'h1' (dont use the carrots).
put the = sign.
Then for replacement, put what you want "h1" to be replaced with.
Here is an example of my h1 hotkey:
h1=<h1>|</h1>
What the pipe character does is tell npp where to put your cursor after the replacement.
So this is how you use it now:
type h1, then press 'Alt+Enter'(by default, you can change this too), then BAM, your 'h1' will be replaced with:
<h1></h1> and your cursor will be sitting between the tags.
You could also do h1=<h1>|\n</h1> which would print the same thing but with a line break.
You can do some pretty awesome stuff with it. Saved me SO much time once I got used to it. I never type without it anymore lol.
Here is what my personal setup looks like under the [Tags] section (and I commented everything below starting with the m=module because it was messing with my 'p' tag and I didn't care anyways.
begin=<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n\n|</body>\n</html>
h1=<h1>|</h1>
h2=<h2>|</h2>
h3=<h3>|</h3>
h4=<h4>|</h4>
h5=<h5>|</h5>
h6=<h6>|</h6>
html=<html>\n|\n</html>
script=<script type="text/javascript">\n\t\n</script>
link=<link rel="stylesheet" type="text/css" href="|">
a=
div=<div>
divclass=<div class="|">
divid=<div id="|">
divend=</div>
p=<p>|</p>
ul=<ul>\n\t|\n</ul>
li=<li>|</li>
header=<header>\n\t|\n</header>
nav=<nav>\n\t|\n</nav>
section=<section>\n\t|\n</section>
article=<article>\n\t|\n</article>
aside=<aside>\n\t|\n</aside>
footer=<footer>\n\t|\n</footer>
Remember one thing; after you edit the WebEdit, you have to restart NPP before the new tag will work.
I know this is a bit old, but you can use the Emmet plugin to speedup your HTML and CSS typing. you can customize your snippets to make any text.
It cames whith dozens of snippets already, you just have to type it and then hit Ctrl+Alt+Enter.
You can find the file to edit in this path:
C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\emmet\snippets.json
It's easy to spot what you have to do.
On the plug-ins menu you will find all options that this plugin offers.
Experiment it like typing html:5 and then hit Ctrl+Alt+Enter.
Or even this ul>li*4>a[href=page.php?id=$]{page $}.
You will be amezed.
Check this online documentation for keyboard & mouse shortcuts
Is it possible to auto-format your code in Dreamweaver like in Visual Studio (ctrl+k+d)
A quick Google search turns up these two possibilities:
Commands > Apply Formatting
Commands > Clean up HTML
Commands > Apply Source Formatting.
Works a treat.
For the 2017 CC release this has been moved (after many years of habit development). Find it now at:
Edit > Code > Apply Source Formatting.
It may be prudent to set up a keyboard shortcut if this is something you'll need regularly.
Edit > Keyboard Shortcuts
Following works perfectly for me:
-*click on COMMAND and click on APPLY SOURCE FORMATTING
- *And click on Clean Up HTML
Thank you PEKA
This is the only thing I've found for JavaScript formatting in Dreamweaver. Not many options, but it seems to work well.
JavaScript source format extension for dreamweaver: Adobe CFusion
I tried some of the sources online and finally, the below selection works fine for me (Dreamweaver on Mac). For versions above Adobe Dreamweaver CC 2017 and above:
Adobe says:
Edit > Code > Apply Source Formatting
Moreover, full documentation with other supporting information for tasks such as setting defaults, etc. on https://helpx.adobe.com/dreamweaver/using/format-code.html.
And for JavaScript source format you can use Dreamweaver JavaScript source formatting extension.(available on adobe)
Auto formatting can be done by
Select View > Code View Options
Click the View Options button in the toolbar at the top of Code view or the Code inspector.
Auto Indent Makes your code indent automatically when you press Enter while writing code.
source
Please use shortcut key alt+c+a
Please click on "edit" -> then keyboard shortcuts. It`s straight forward from there. Just select the command from the list, and press the + button.
You will need to create a duplicate set, then select it again from the list. And finally set a keyboard shortcut!
Now, before saving, press the shortcut you just created!
Coding toolbar (Edit > Toolbars > Coding) and select Code Format Settings to set your preferred formatting.
You can also access the formatting option from Commands > Apply Source Formatting or only apply it to a select block of code by selecting the Apply Source Formatting to Selection option.
http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/
ctrl+a->(click)commands->cleanup word HTML