When copying and pasting HTML, VS helpfully renames all my variables to things like "Div1" & "Img1". Why!
I remember when using VS 2010 I think it was, there was a setting that allowed us to turn this "feature" off. Seems that feature no longer exists.
Are there any plugins or extensions or workarounds for this problem?
Seems that people have been complaining about this for years now:
How do I prevent Visual Studio from renaming my controls?
Disable "Auto ID elements" in Visual Studio 2013
https://connect.microsoft.com/VisualStudio/feedback/details/806446/asp-net-web-forms-development-unable-to-disable-auto-id-generation-on-paste-using-new-version-of-visual-studio-2013
You can use the following command (Language: C#) for my Visual Commander extension to paste text as is without renaming variables:
public void Run(EnvDTE80.DTE2 DTE, Microsoft.VisualStudio.Shell.Package package)
{
EnvDTE.TextSelection ts = DTE.ActiveDocument.Selection as EnvDTE.TextSelection;
ts.Insert(System.Windows.Clipboard.GetText());
}
Here is the simplest workaround.
Simply make a comment first, then paste into the comment. When uncommenting, it will not apply Auto ID.
As a keyboard shortcut, it's CTRL+K,C,V,K,U on a new line.
Comment (KC), Paste (V), Uncomment (KU).
You can disable this auto-tag closing in Options > Text Editor > HTML u can find here everything about html editor.Search for AutoTag or Format Html on paste!
Related
We used to be able to type ! inside an html document in vscode to get html boiler plate content completion as documented here.
However it no longer works. Thoughts?
I noticed that if we type ! and select Edit > Expand Abbreviation, the ! is replaced with boilerplate, but I no longer get the intellisense that was there before.
Update
Looks like we need to do ctrl+shift+p and search for User Settings. Filter for the emmet settings and select the Trigger expansion on tab then the ! is replaced with the corresponding emmet snippet.
I also selected Show suggestions as snippets, but the intellisense / snippet is still not showing up.
If you want to get html boilerplate with Emmet Abbreviation, you should type html:5 and hit tab.
I have faced this issue in visual studio.
Step-1:
try below steps in url. https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
Step-2:
if it worked : "cheers .!"
else:
it could be issue with select language mode. on the bottom of visual studio next to LF on your screenshot select language mode and change it to html.
Thanks & Regards, Surya kiran.
The issue was with Language mode only. You will get the option to select the Langauage mode on the bottom.
Been very annoyed for many, many long minutes by the boilerplate shortcut's suddenly, inexplicably not working (maugre much extension-de-installing and intalling and re-installing, even with VS Code uninstalls and re-installs, but what I'm come up with from mining various forums (what does seem to work and doesn't appear to be settings-dependent or peculiar to my laptop) is:
COMMAND+K plus COMMAND+L (one can just HOLD COMMAND and type K and then L sequentially).
In the Emmet Abbreviation window that comes up type ! as usual and then press Enter/Return.
Simply striking ! will bring up the boilerplate. One can then simply press Enter to return to the code.
The two-stroke process of ! + TAB is now replaced by the only marginally more involved five-stroke process of ⌘ + K + L + ! + Enter.
For me it was the "<" problem
this is not working: <html
this is working: html
After a recent update to VS Code the familiar why of getting a html boilerplate failed. You could add a index.html to the file explore and the window would open for its content.
Using Shift and the exclamation mark key would produce it. That is no longer the case instead create your file in the explore. When it opens the window type html, you will receive a dropdown to select from instead.
enter image description here
I experienced this issue after configuring my VS Code environment for an online course. In my case, the behavior was due to the following pair being added to my settings.json file:
"emmet.showExpandedAbbreviation": "never"
After I removed this, the shortcuts returned.
I'm using Visual Studio Code (1.17.1, on MacOS 10.13 AND Windows 10) developing an asp.net core mvc web app using razor templating.
Visual Studio Code supports Emmet (https://code.visualstudio.com/docs/editor/emmet)
My issue is that Emmet works correctly in HTML files, but will not work in razor CSHTML files.
I've found:
To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language ids for both sides of the mapping.
https://code.visualstudio.com/docs/editor/emmet
but it doesn't indicate where to find a list of "language ids". I tried searching for it, but you can imagine what happens when you search for programming language id!
Is there a way to tell Emmet in VS Code to treat cshtml files as html files? Is there any other way to get this to work (besides renaming the files, which is another solution out there)?
According to this link, the corresponding language for *.cshtml files is razor, thus you need to specify it in the emmet mappings as follows:
"emmet.includeLanguages": {
"razor": "html"
}
updated:
Press Ctrl+K than M (Ctrl+K,M) than select highlighter from the dropdownlist you want this is a common shortcut. very useful. even works for any file types. ie. create a new file and code some xml or what language you want than Ctrl+K,M you can specify/override ide hilighter on the fly. very useful shortcut. try it. you won't forget Ctrl+K,M. one of most useful hotkey combination I ever use in vscode. by this way code-completion wakes up and works as language you selected.
in vscode > settings.json
I added the related codes mentionel above. emmet worked for cshtml files.
"emmet.includeLanguages": {
"razor":"html",
"aspnetcorerazor":"html"
}
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.
In Sublime text cmd+shift+v will paste and indent the code. Can this be done in visual studio code?
Workaround
I've made an extension that will let you paste and format with cmd/ctrl+shift+v.
Search for pasteandformat
https://marketplace.visualstudio.com/items?itemName=spoeken.pasteandformat
Currently, Visual Studio Code doesn't provide this specific functionality.
We could vote for this feature at Visual Studio's UserVoice website.
There's already a ticket open for this feature: Paste and auto align code. If you've got an account, you can vote for this feature so it gets more attention. If it has enough attention, Visual Studio Code's developers could take notice of this and maybe develop it.
Current workaround
After pasting the code,
You could use CTRL+E, CTRL+D for windows or ALT+SHIFT+F for mac.
But note that this will reformat the whole document, indenting according to the available rules for the source type.
If you only want this to be applied to the pasted code, select the code after pasting and then use CTRL+E, CTRL+D for windows or ALT+SHIFT+F for mac. Now the indenting/formatting is only applied to the pasted lines.
Since version 1.9.0, editor.formatOnPaste landed in VSCode.
Open settings.json via Code -> Preferences - Settings and search for formatOnPaste
// Controls if the editor should automatically format the pasted
content. A formatter must be available and the formatter should be
able to format a range in a document.
"editor.formatOnPaste": true,
Modify false to true since the default value is false
Source: Changelog update 1.9.0
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