How to show the extensions installed in Visual Studio Code? - visual-studio-code

How can I show the versions of the extensions installed in Visual Studio Code?
Also, but unrelated, does anyone know the maximum file size that can be handled by VS Code?

This will work from a command line:
code --list-extensions --show-versions
I do not know when this functionality was added. Sample output:
See CLI Options

Hit F1 or CTRL + SHIFT + P and enter show i :
Click on "Extensions Show Installed Extensions":

Open VS Code.
Go to Extensions (in left side-nav or icon with boxes ).
In search Extension type: #installed
You will be able to see all installed VS code extensions.

You can access in the right menu like bellow image with shortcut CTRL+SHIFT+X.
If does not appear, you can click on three points and then Show Installed Extensions.
You can Uninstall too in this path.

Click on Extension Icon present in left side panel.
It will display the extension list.
On top you can see three dots.
Click on this dots, it will display the installed extensions

Related

How to Show Code Runner Shortcut In VS Code

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

Vscode is not showing Problems tab in panel

When i open up vscode in the panel, PROBLEMS tab is missing. I tried uninstalling/purging vscode (including it's config and extensions) and still the same problem.
I managed to solve it by purging every vscode directory and file, restarting computer and then downloading the vscode .dpkg file from their official website (i didn't use apt-get, or snap). Something like this: https://dzone.com/articles/install-visual-studio-code-on-ubuntu-1804
Its Simple just go on 'View' section at top and select 'Problems' or press 'Ctrl + Shift + M' and it will get added automatically and if still doesn't work then on left panel there is 'Extension' tab below that will be 'Problems' Tab (which is not in your Screenshot means first opiton should work) just drag it to the Terminal Panel.

How to apply bookmarks with a mouse click event on VisualStudioCode?

I have Visual Studio Code(VSCode) 1.10.1 version installed on Windows 7. I am new to VSCode.
At the moment, if I click on the left side of a file before the line numbers, a red dot appears which is the breakpoint. But, how to replace breakpoint with bookmark instead? It does work with ctrl+alt+k. But, I prefer a mouse click to apply bookmarks.
I searched through the settings.json file. Couldn't find anything relevant to this.
Press F1 in VSCode, type ext install and then look for Bookmarks.
For details check this - Are there bookmarks in Visual Studio Code?

How to display console.log output in Visual Studio Code for html?

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.

How to Display VS Code output window to side rather than below

In my VS Code set up I see the output/FSI frame below the main text editor pane like this:
whereas I would love it to appear to the right in the side-by-side view like it does on the images in this link: http://www.wintellect.com/devcenter/jwood/a-quick-look-at-f-in-visual-studio-code
Is there a config option I cannot find somewhere?
I tried Googling but drew a blank and cannot see anything obvious in the config options mentioned on the vs code site page describing the config options
as of version 1.51.1 right click in the right corner on the output panel. then select option 'move panel right'
I don't believe you can detach/move the output windows in Visual Studio Code. You can move the side bar to the left/right side, but that's it. There is no config option, sorry.
You could try posting a feature request on the GitHub page: https://github.com/Microsoft/vscode
EDIT: This was changed in VS Code 0.10.8, it was once on the side but was moved to the bottom. See this GitHub issue: https://github.com/Microsoft/vscode/issues/2806
This feature is not available yet in VS Code. However as of today (March 30, 2017) it's on 6 months roadmap so it should be done in a near feature.
This feature is available from version 1.18.0+
Simply click this icon to dock to the right:
Just follow the steps mentioned:
In Visual Studio Code -
View Tab > Appearance > Toggle Panel Position
That's it.
Your original link to the view your desire is obsolete, so it is a guess as to what you wanted. But here is a demo of setting up a terminal/output look side-by-side. It is a little tricky - you drag your Outline header over the Terminal header which will then allow you the option of putting it to the left or right of the Terminal:
its easy. just right-click on the terminal, select 'move panel right' like in the image below and voila
the image can be found here
Vertical Split:
From VS Code Menu bar:
View >> Appearance >> Move Panel Right
Version 1.47.0 of VS Code (at the moment of posting this, the latest one) allows you to drag output (or any other panel tab, e.g. terminal) to the activity bar. This way you can obtain output to the side of the editor.
Just right click on the panel of output section then select "Move panel left or right" as per your wish.
here your can see the move panel left option.
Press CTRL + SHIFT + P
Select Preferences: Open User Settings (JSON)
Insert (or change if it is there --search for it) the following config line:
"workbench.panel.defaultLocation": "right",
Save file.
That will work for new workspaces. VS-Code saves your preferences for each folder you start it in. So, if you navigate to a folder you previously called VS-Code in (I mean, from the terminal), it will open the output panel in the same location it was the last time you have used VS-Code from the same location.
After making the change above, go to a new place, like /opt and start VS-Code there to make a test.