Develop Reference

the text is all white in babel/js and react. What can I do to change it?

Text is all white here. I do nothing yesterday everything was okay. Can someone help?

You can try to fix it by disabling/uninstalling the vscode-babel-coloring plugin for Babel ES6/7 syntax coloring by dzannotti.
OR you can try to install this plugin: https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

This is caused by the extension called Javascript and Typescript Nightly.
As for a temporary fix, you could downgrade or either disable it.
See stackoverflow

It's set as plain text as you can see in the bottom right corner. You have to save it as one of VS Code's given file extensions or you have to download a extensions for your programming language.
Ref: This link

basic shortcut ( "Exclamation Mark" Enter) on vs code not working? [duplicate]

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 have an issue with javascript formatting in Visual Studio Code [duplicate]

I have applied the below settings in VS Code to get 4 spaces indentation.
But always when I open a new file, it switches back to 2 in the right-bottom corner.
If I click in the right-bottom corner and change the setting back to 4,
VSCode will still change back to 2 and still apply it with the 2-space auto-indent.
Alt+Shift+F
What am I missing?

Bit of an late answer. But just got the same issue solved...
Multiple things are able to control this. It also has taken me quite a bit of experimentation to get it corrected. For me point 3 below was the final trick to make it work. Before that, I noticed the editor loading with 4, but jumping back to 2 spaces. Now it stays at 4.
Some things to check:
1: VS Code configuration (Settings & Workspace, you can set these for system wide configuration or just for the current Workspace):
Check whether you have set:
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false
And language specific settings (optional):
"[javascript]": {
"editor.tabSize": 4
},
"[typescript]": {
"editor.tabSize": 4
}
2: Are there any Extensions that could influence the indentation -> people have reported JS-CSS-HTML to also configure the setting.
3: Is there a .editorconfig file in your workspace? If so, check the settings over there. Angular creates one for example and configures the indent_size:
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Most answers focussed point 1 which, but for me the last step was important to make VS Code work properly.
This Stack Overflow handles all of the above in different answers:
Visual Studio Code: format is not using indent settings

I fixed it in the VisualStudio settings (1.31)
Go to: settings > workspace settings > Text editor
uncheck 'Detect Indentation' to stick to your default setting.

In many cases, it is Prettier that causes this. In fact, it just ignores all settings listed in #Oskar's answer.
So it needs to be overridden explicitly:
"prettier.tabWidth": 4,
"prettier.useTabs": true
And then just go to your file and hit Ctrlk,Ctrld, and the correct indentation should be applied.
See also Prettier is not indenting as specified.

Slightly different from previous answers. I had one file with the wrong indentation for its type and I wanted to correct only that file.
(If you must know: this Python script started out as text file with some queries in it. I got it from psql's -E \d echo look at the postgres schemas).
Anyway, this file was now a Python .py file, with a 2 spaces indentation. Not something that should be fixed by modifying general vscode settings.
What I did:
click on the bottom status bar spot that says 2 Spaces
choose Convert Indentation to Tabs on the dialog popup. Now it says Tab size 2
click on the status bar again where it says Tab size 2
choose Convert Indentation to Spaces. Now the dialog changes to propose indent size: 2 is selected. Pick 4 instead or any size you want.
Done
Basically there are different ways through this dialog, but if you get into tab mode and then switch back to space-based indentation, it will allow you to pick the number of spaces you want to use.

Be careful; this extension EditorConfig for VS Code interferes with vscode tab and indentation settings. Its installed by default but it is a nightmare. Disable it will solve all your problems.

Another problem I discovered with Python is that VS Code uses autopep8. No matter which setting I tweaked, VS Code seemed to ignore the 2 spaces setting. If you want 2 spaces instead of 4 - the fix is to add this to your settings.json.
"python.formatting.autopep8Args": [
"--indent-size=2",
"--ignore E121"
]
Btw you can see your autopep8 arguments by opening the command palette (⌘-shift-p on mac) and entering >Python: Show Language Server Output then switching to view the "Python" log.
This seems to be a common issue. See: VS Code Python autopep8 does not honor 2 spaces hanging indentation

Visual Studio 2017 Stop All JavaScript Formatting [duplicate]

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.

Auto-indent javascript code in Vim on save

I am using the awesome vim-go plugin for coding in Go with vim. (https://github.com/fatih/vim-go)
The feature that I love is the auto-indent on save. I'd like to get the same behavior for javascript files. Do you know any way to easy replicate this in js?
Many thanks

You don't even need a plugin to auto indent in vim. As soon as you open the file in vim, press these keys:
gg
Your cursor should move to the beginning of the file. And then type this:
=G
which is basically saying, "remove trailing spaces from the cursor position to the end of the file". Happy coding!

There exists a general autoformatting plugin for vim called vim-autoformat which integrates the js-beautifier (the engine behind the online application http://jsbeautifier.org/) and more.
It provides an :Autoformat command, which you can bind to the BufWrite event like so
au BufWrite * :Autoformat
EDIT
For if you're only interested in indenting your file (not full-fledged formatting): vim-autoformat falls back to auto indenting your file if js-beautify is not installed.