I've been using Visual Studio Code for a couple weeks now, and up until today, I've been able to right click on the HTML preview pane to inspect the code with dev tools. Today, right clicking does not even bring up a contextual menu; it just highlights whatever word I click on. How do I get it back to the usual behavior?
Related
How can I show the Code Runner shortcut in Visual Studio Code if I mistakenly hid it?"
I was using Visual Studio Code and I accidentally hid the Code Runner shortcut. Is there a way to show it again? I have tried searching in the keyboard shortcuts settings but can't seem to find it. Any help would be appreciated (P.S I Know Many Of You will Say Use a Shortcut Key, or Reinstall the CodeRunner & VS Code But All Is Not Working)
How Can I get Code runner Shortcut Again
Make sure that you enabled your "Code Runner" extension
Go to the top right corner of VS Code to find a button that looks like three dots (...)
Right click on it and press "Run Code"
The Run Code button should reappear now
My request to VSCODE repo was dropped, but I still want to add it, even if I don't know how to do it by my self
Drag the heck explorer to the bottom panel, same as search or source control
Any idea of how to do it? can be possible creating an extension?
dropped issue: https://github.com/microsoft/vscode/issues/108252
right click beside search and check explorer
When I press CTRL+. for quick fixes or the click the light bulb (show fixes) I get the dialog in the below image. However, when I press enter or click an item in the quick fixes dialog no code is added to my document i.e. nothing happens.
Does anyone know how to fix this? In the given example, I'd expect selecting "Open System" to add the line "open System" at the top of the document.
Environment:
Windows 10
Visual Studio Code 1.46.1
Ionide-fsharp 4.14.0
Recently, in one of my Visual Studio Code instances, now there is a green "play" button that allows me to Run Python File in Terminal.
You can see that button in the picture below, just between the "open changes" and the "split editor" buttons.
I have Visual Studio code installed in other computers, and there is no such button. I would like to show that button since it comes very handy, but I do not know how to make that happen, and I cannot find any documentation.
Note: I'm not using any extension for running files
The 'Play' button feature is in testing at the moment, and so is only available to those in the experiment group.
https://github.com/microsoft/vscode-python/issues/5321
Having said that, I had the button appear yesterday part way through a session.
Unfortunately, today the button is no longer present, and I am not part of the experiment group.
Install Code Runner simple by press (Ctrl+shift+X) and search for "Code Runner",it works for almost all languages including python. it gives you a button and shortcut Ctrl+Alt+N.
This area is called "Editor Actions". It's now available by default but unfortunately cannot be hidden unless you modify stylesheet:
https://github.com/Microsoft/vscode/issues/46403
When I used brackets, there was a plugin to display console.log output in a panel below the source code panel, so I don't need switch to chrome and press F12 to view console.log output.
But how to do that in Visual Studio Code?
I use Visual Studio Code for HTML development not Node.js.
debugger-for-chrome can solve the problem.
Check this link. It shows how to do that
--UPDATE--
Now VS code has built in debugging support for Javascript.
You can easily debug your application by clicking on the Run and Debug button as shown in the image. If you want to debug any other languages or runtimes, you need to install a debugger extension for that specified language or runtime in the VS code marketplace.
https://code.visualstudio.com/Docs/editor/debugging
The vscode extension you want is Live Preview.
This gives you a HTML preview pane within vscode itself. To activate it:
Right-click on your HTML file, and select Live Preview: Show Preview. This is like a mini browser which will display your HTML. (Shown with red circle)
To find your console.log() messages, select the OUTPUT tab, and from the drop-down, select Embedded Live Preview Console (Shown with red arrow)
Finally, hit the "Refresh Arrow" in the preview pane, and you should see the console.log() output.
You could create an index.html and link to your .js in head then use Live Server with an "undock separate window."
I have added the 'Code Runner' extension
Example:
Best dynamic one:
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode&ssr=false#review-details
Option:
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner&ssr=false#review-details
There are also terminal commands you can run and output on the terminal too.