On VS Code HTML or JavaScript if I select a block of code and by clicking on right button on the options available I could "Format Selection" which indents ar auto-format the selection.
After updating to V1.30 this option has disappeared from right click context menu.
Do you know why? How can I enable again?
Thanks
You can shorten this sequence you're following by just enabling autoformat. Just go to your VS settings and search for autoformat and enable it for the required languages. It might ask you to install extensions for linting depending on the language.
Go to File -> Preferences -> Settings and then type in format in the search bar at the top of that page, and check the settings in there, there are a lot of ways to format the code, so you may find some new stuff there that will be beneficial as well as which setting you have turned off. I just upgraded and have the format functionality still in my instance.
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 used to be able to get definitions of functions like Array.map() or Array.filter() in visual studio code. But I downloaded a fresh version of the software and forgot to sync my setting before doing so. Now I don't get such information on hover, even though I've downloaded my usual plugins. How do I fix this?
Press Ctrl+, to open settings and Type “editor.hover.enable” into the search then check the checkbox associated with “Controls whether the hover is shown.” to enable the suggestion tooltip on hover.
I prefer my own style of code formatting as opposed to Visual Studio's default settings. I've turned off auto-formatting options in Tools→Options. In most cases, it works.
However, after using any of the built-in refactorings, Visual Studio clobbers my settings with its default settings. How do I keep VS from doing that?
I had this problem while writing VB in an aspx page.
The solution was to go to 'Tools > Options > Text Editor > Basic > VB Specific' and turn 'Pretty Listing' OFF.
Note - in Visual Studio 2015 this can be found at:
Tools > Options > Text Editor > Basic > Advanced
Disable pretty listing. It is the option that re-formats what you are doing. I had the same discomfort with it and after doing it, my code stays how i want and it doesn't go back to previous settings.
As suggest by #TheMatrixRecoder took a bit of finding for me so maybe this will help someone else.
Unitick these options to prevent annoying automated formatting when you places a semicolon or hit return at the end of a line.
You might have had Power Tool installed.
In this case you can turn it off from 'Tools > Options > Productivity Power Tools > PowerCommands > General'
In my case, it was ReSharper.
Test if ReSharper
StackOverflow: How can I disable ReSharper in Visual Studio and enable it again?
Prevent ReSharper from reformatting code
StackOverflow: Is there a way to mark up code to tell ReSharper not to format it?
Update 2017-03-01
It was ReSharper in the end:
Update 2020-12-18
On the latest version of ReSharper, there are more options: untick everything on this page, and ensure all dropdowns are set to the equivalent of None.
ReSharper "typing assist" is like a 3-year-old trying to "help" build a card castle. A simple backspace or an enter key will (poorly) reformat entire blocks of code, requiring it to be undone or painfully formatted back to the original.
And if that is not enough, this is the bit that adds delays when typing so sometimes it feels like trying to run in skis.
The reformat on semicolon or closing brace cannot be turned off. I find it infuriating the Microsoft would have the temerity to tell anyone how to format code; the most illegible code I have ever seen was while working there.
I want adjacent assignments to be vertically aligned; VS reformats them to one space on either side of the equal sign irrespective of the length of the variable on the left. This is intolerable. And turning it off on the editor options is ignored; given comments like the opener above I am certain this is deliberate.
Consistency is only a virtue when it leads to desirable outcomes. This is not one.
VS2015 settings that helped me prevent auto formatting:
(and Tools > Options > Text Editor > Basic > Advanced, just like Tango91 suggested)
In VS2017 you can change it after selecting your coding language in the settings menu. There is an option called "new Lines" in the "Formatting"-submenu.
I see that many answers here solve the problem for a specific situation.
For my situation I continually found that the IDE would automatically format JavaScript code within an ASP page.
To disable, I unchecked this box:
In addition, I found it very helpful to use the search query in the toolbar (CTRL+Q) and just search for the text format on paste. As you can see with the scroll bar, there are quite a few options to check!
I doubt that you can disable re-formatting after refactoring. Refactoring changes code and since it's only text I doubt what you'd want is that it just dumps unformatted text into your source. Wouldn't it be a little easier to just set the code style VS adheres to to the style you like and follow?
Follow TOOLS->OPTIONS->Text Editor->CSS->Formatting
Choose "Compact Rules" and uncheck "Hiearerchical indentation"
It can be the case of Clang Format.
Previously, the entire file is automatically formatted on file save, and it drove me nuts (for the repositories which Clang Format is not enabled).
Such behavior is gone after turning "Tools -> Option -> LLVM/Clang -> ClangFormat -> Format On Save -> Enable" to False.
I was pissed off every time I pasted anything in cshtml file in Visual Studio 2015, 2017. I tried different settings and finally found the proper one:
Options => Text Editor => HTML => Advanced => Paste (Format on paste) => False
You can tweak the settings of the code formatting. I always turn off all extra line breaks, and then it works fine for how I format the code.
If you tweak the settings as close as you can to your preference, that should leave you minimal work whenever you use refactoring.
In addition to Tango's answer for the actual solution, there may be people actually want to stay current with auto-formats but not have it screw up your relevant changes. I would suggest that you modify the file to have auto-format activate, check in those changes, then proceed with the actual changes you wish to make.
That way your code can stay up to date, but your check in will be relevant.
You might need to check on Tools-> Options-> Xaml Styler -> Format xaml on save
On the navigation options at the top select "Tools" and then select "Manage Extensions".
I had CodeMaid, Visual Assist, and Rosalyn installed. Seems like an update start to cause these auto formatting issues. I disabled them and do this fixed it.
I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.
I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.