Related
I'm clueless what feature came out of which extension, is there a way to have its source displayed?
Also would be interesteed to know if its possible to trace the source code of the features.
The only thing I can think of is checking the package.json files, as even vscode.commands.getCommands() only returns plain strings. This can be done with the vscode.extensions API:
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
setTimeout(() => {
for (const extension of vscode.extensions.all) {
let commands = extension.packageJSON.contributes?.commands;
if (!Array.isArray(commands)) {
continue;
}
for (const command of commands) {
console.log(command.title + " is from " + extension.id);
}
}
}, 2000);
}
Note that all only includes activated extensions, hence the timeout to make sure all extensions that activate on startup are done with their activation.
what feature came out of which extension
Yes, you can do this, taking advantage of VSC's intellisense:
I'm Assuming (1) by feature, you mean a command executable from the command pallette and
Open keybindings.json in vscode
You should see JSON like below; if not, add one like below (you're not going to keep it).
{
"key": ".",
"command": "REPLACE THIS WITH YOUR COMMAND NAME",
"when": "suggestWidgetVisible"
}
Where it says "REPLACE THIS WITH YOUR COMMAND NAME", begin typing the name of the command you're interested in
The VSC suggestion widget will open, showing roughly EXTENSION_NAME.YOUR_COMMAND. If the suggest widget doesn't open, press ctrl+space to open it.
Note the name of the extension; that's what contributed that feature/command. If the name doesn't match an extension, it's probably a core VSC feature
trace the source code of the features
Most extensions are on GitHub, as is the core code for VSC, so you can simply navigate to the relevant repository and seacrch the code for that command.
Check this link out from VS Code documentation.
Here you can see where the extensions are installed by default.
And further, you can access their source code.
Where are extensions installed?
Extensions are installed in a per user extensions folder. Depending on your platform, the location is in the following folder:
Windows %USERPROFILE%\.vscode\extensions
macOS ~/.vscode/extensions
Linux ~/.vscode/extensions
You can change the location by launching VS Code with the --extensions-dir command-line option
About which feature cames from which extension, I'm not sure if it's possible to achive that.
Click on an extension and in the editor that opens showing its readme, click on the Feature Contributions link and you'll see the settings and commands that extension contributes. For example:
This command won't work for me. I had installed the Visual Studio Keymap, but when I uninstalled that it made no difference. If I open Keyboard Shortcuts and try customizing it to some other keybinding, still nothing. I open the simplest javascript folder/file (folder with a single .js file) to test, simply putting the cursor on either side of the parens in console.log('hi');
Version is 1.28.2 (latest). The only other extensions I have installed are Debugger for Chrome & ESLint.
editor.action.jumpToBracket is what you want for .js files, Ctrl-Shift-\.
The "Go to matching pair" command: editor.emmet.action.matchTag is for html files.
Visual Studio Code version 1.27.2
Find all References only list references in the current file.
I need to find all references across files in a project.
Is it possible ?
Something like find usages
If you right click a symbol and select "find usages". If the current symbol is a function, then "find usages" searches for all places where this function is called. If the current symbol is a variable, then "find usages" searches for all places where this variable is used etc etc.
Advanced features such as Find all references are implemented by each language extension.
For JavaScript, try creating a jsconfig.json at the root of your workspace with the contents:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
This file tells VS Code to treat all JS files in your workspace as part of the same javascript project. Find all references still may not work properly in JavaScript if your code is too dynamic. It works best against modern js that uses import/export, class, and friends
In Visual Studio Code you can do this by first highlighting the text you want to search for, then using the command: CTRL + SHIFT + F (pressing all at once).
CTRL + SHIFT + F is just a shortcut for accessing the search tab on the left-hand side of VSCode. Hope that helps and apologies for the scribbles :)
Right-click on the variable and choose Find All References
This is how it looks in VSCode
My About Visual Studio Code Info:
Version: 1.47.2
Commit: 17299e413d5590b14ab0340ea477cdd86ff13daf
Date: 2020-07-15T18:18:50.054Z (5 days ago)
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.6.0
I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.
In your vscode user setting, add
"emmet.includeLanguages": {
"javascript": "html"
}
That way you can use emmmet in your js files.
in vs code user setting add these
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
This following worked for me:
Open Command Palette (Ctrl + Shift + P)
Open Settings (JSON)
Add to the end:
"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
"*html": "html",
"*njk": "html"
},
I'd like to add to the others posting about emmet.includeLanguages, you can also add "vue": "html", so like:
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"javascript": "html"
}
Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode's settings.
First, open settings.json from any directory:
vim ~/.config/Code/User/settings.json
To be more specific, on windows, you need to go to File > Preferences > Settings > Type in "Launch" > click on "Edit in settings.json"
Now you have to declare in settings.json that you will use emmet at js files:
(Its very simple just copy and paste into code setting file the code highligted)
{
/*here are your existing settings*/
/*THE CODE BELOW*/
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
/*^^^^THE CODE ABOVE^^^^*/
}
Now just save it. Not necessary restart vscode.
For more details see that post at vscode official webite.
The issue is that you need to include the language in your settings file.
With newer versions of VSCode, you can open up settings by selecting Code > Preferences > Settings and then search for "Emmet: Include Languages" and simply add your language there.
I just did this to get emmet working on my react code.
Something I ran into that was driving me crazy trying to figure out was that the setting "emmet.showExpandedAbbreviation" will affect emmet working in your javascript files too.
To solve, remove it from your settings.json or set it to:
"emmet.showExpandedAbbreviation": "always"
Check the file extension icon, does it show up as html5 or dj (which stands for django)?
If it shows as dj, then you have the Django VSCode extension. You can do 2 things:
Remove the Django extension
Add "django-html": "html" to emmet.includeLanguages (as per this issue), so mine now looks like this:
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact",
"django-html": "html",
},
This happened to me in HTML files because another extension (for Django, a Python web framework) was overriding .HTML file types without a way to turn it off. I removed the extension, restarted VSCode, and now it's working again.
find setting.json file and add this code
and save it and if you don't know how to do it then watch this video
https://www.youtube.com/watch?v=AUuP_hriEc4`
"files.associations": {"*html":"html"},
"emmet.triggerExpansionOnTab": true
`
With aspnetcorerazor and razor language selection add the below code in your setting.json file:
"emmet.includeLanguages": { "aspnetcorerazor" : "html", "razor" : "html" }
In your setting.json file add this line "emmet.triggerExpansionOnTab": true,. Then ! and tab will do the work.
Go to VS Code settings -> Search Emmet -> In section Emmet:Include Languages, add {item, value}
{javascript :javascriptreact}
Tried all above , didn't work.
Updated my VScode by reinstalling it from here and everything works like a charm now.
Simply uninstall the extension related to HTML or CSS
And it work for me nicely
"editor.defaultFormatter": "VisualStudioExptTeam.vscodeintellicode"
for me emmet auto-fill stopped to work on single html page ; turnout it was bcz i used "<" twice not on a tag ( like withen the text) ,
remove them or but \ before them or use them inside (prism cdn is recomended then) will solve the issue
I ran into this issue today and realized that the following setting wasn't checked. When I checked the box, I went back to a test HTML file and used "!" to bring up the boilerplate, and this time it worked.
"Emmet: Use inline Completions"
Step 1: Start your VS Code. Click on the Settings or press Ctrl+, to open the VS Code Settings.
Step 2: Click on the Extensions tab on the left side of the settings. Click on HTML.
Step 3: Click on the Edit in settings:json hyperlink to edit the settings in JSON format.
Step 4: Inside the curly braces, enter the following code under the already written JSON code:
“emmet.triggerExpansionOnTab”:true,
“files.associations”: {“*html”:“html”},
“emmet.useInlineCompletions”:true
Step 5: Save the file. Now if you try to apply Emmet in your code, it will work smoothly!!
You have to uninstall your VS code and Node.js by going into control panel → program & features.
After the uninstall is copmlete, go to C:\Users\your_user_name_folder.
After reaching there, delete the .vscode folder.
Go to AppData\Roaming\Code (delete this Code folder).
Go to C:\Users\<your_user>\AppData\Local\Programs and delete the Microsoft VS code folder.
Now go to C:\Users\rajat\AppData\Local and delete the npm_cache folder.
Now reinstall Node.js and VSCode.
I press Shift+Enter, but not working, Ctrl+Enter start a new line, but not add semicolon at the end of previous line. Is there a shortcut?
Now there is an extension called Colonize:
Shift+Enter Insert semicolon at the end of line and continue on the same line
Alt+Enter Insert semicolon at the end of line and continue on the new line
Ctrl+Alt+Enter Insert semicolon and stay at the same position
Visual Studio Code doesn't appear to directly support adding a semi-colon to the end of a line via a keyboard shortcut, meaning it'll need a custom extension to support it. Fortunately, Sergii Naumov has created one for us, named (appropriately) 'Trailing Semicolon'.
To install this extension:
Launch Visual Studio Code
Press "Ctrl+P" (or "Command+P" on the Mac)
type "ext install Trailing Semicolon" to search for the extension
With the extension visible below the search box, click the Install Extension icon in the bottom right of the extension. (It's a cloud with an arrow pointing down...)
You will need to restart Visual Studio Code to enable the extension (Visual Studio Code should prompt you to restart once the extension has been successfully downloaded.)
According to Sergii, the default keybinding for the extension is "cmd+;". On my Mac, this meant pressing "Command+;", which worked great.
On my Windows 10 PC, I tried several key combinations ("Window+;" "Ctrl+;" "Alt+;" etc.), and nothing worked. I opened the Keyboard Shortcut preferences (File > Preferences > Keyboard Shortcuts) and searched for the new extension. I found it listed at the end of the keybindings:
{ "key": "win+;", "command": "extension.trailing-semicolon",
"when": "editorTextFocus" }
The "win" key binding apparently doesn't work. I copied this binding to the keybindings.json file, changed "win+;" to "ctrl+;" and it worked like a charm!
Hope that helps.
I wrote an extension to mimic IntelliJ's complete statement.
Pressing ctrl+; (cmd+; on mac) appends ; to the line end,
and moves cursor to line end.
If the line already ends with ;, pressing ctrl+; just moves cursor to line end.
There is also experimental support for complete structures like class, interface, function, if, switch, for, and while. (Not understanding semantic of languages, so it may not work as you expected.)
You can install it as VSIX at GitHub.
The version vscode marketplace is outdated. (Unfortunately my M$ account has been suspended, thus I cannot update it.)
There is no way to do it by default that I could find. I just had to make do as best I could.
I ended up adding a binding via File>Preferences>Keyboard Shortcuts, and then pressing ; after the shortcut. Having the semicolon is part of the binding is as close as I could get... at least my finger is already over that key
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "ctrl+;",
"command": "cursorEnd",
"when": "editorTextFocus"
}
]
This simply means that Ctrl+; brings you to the end of the line, and then tap ; again.
Update (May 2021)
Started using VSCode Vim keybindings extension a few months ago. Highly recommend it. Out of interest, semi-colon end of the line is A; with vim keys⌨️
at 2021
settings >search for colon
You will find a javascript option to insert the semi-colon.
Try install the following ext then use shortcut: Ctr+; (Cmd+;)
There is a way to have semicolon appended automatically by VSCode.
By default this property is disabled:
For Windows ctrl + ,
For Mac cmd + ,
Settings -> in Search bar type: 'semicolon' -> change values to 'insert' for both JS and TS, save and close.
Now every time on save, VSCode will look for missing semicolons inside the file you're in and append them.
I just started using Visual Studio Code and felt this requirement myself yesterday. After a quick google search I found this nice extension called "Prettier". Being a little new to VSCode it took me a few hours to get it all setup but it works like a charm now. Here are the steps and my setup. I hope it helps others.
My coding environment: VSCode running on a Windows 10 desktop environment connecting to my codebase SMB share hosted on my development machine which is running Ubuntu server 18.04.
Solution Steps
Install node on the Windows desktop
Run, npm install -g prettier
Install the Prettier extension in VSCode
Edit the settings.json file for VSCode and add the following
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
// Set the default
"editor.formatOnSave": true
Add the .prettierrc file at the root of my codebase on the ubuntu host (e.g.: /var/www/html/tutorials) with the following basic styling configuration
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80
}
Restart VSCode and open the code file
Use the existing VSCode keyboard shortcuts to apply formatting to the entire file (Ctrl+K Ctrl+F) or to a selection (Shift+Alt+F)
Or simply saving the file Ctrl+S adds the formatting while saving the file with no additional work required
Viola!
(March 2022) Missing semi colons can be added automatically without the needing of an extension (*with a little catch ;) They are added every time your code is formatted.
Go to settings: Look for this settings if you are writing javascript:
And/or go to settings: Look for this settings if you are writing typescript:
Go to settings: Look for this settings if you are writing javascript:
Format your code and semi colons will be added \o/ Yeah
*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.
I know this is a really old post but Prettier - code formatter for vs code adds the semi colon (amongst other formatting).
ext install esbenp.prettier-vscode
If you need semicolons on Javascript/Typescript using vscode do:
Settings
type "semicolon"
you will have options for Javascript & Tyepscript
select the "insert" option as desired
You can also select semicolons for css, less, or scss
/*******/
You can select the "Show matching extensions" and get some extra help with extensions that address the same issue.
Go to settings: Look for this settings if you are writing javascript: enter image description here
And/or go to settings: Look for this settings if you are writing typescript: enter image description hereGo to settings: Look for this settings if you are writing javascript:
Format your code and semi colons will be added \o/ Yeah
*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.
This solution works for me
Add the following configuration in settings.json：
"css.completion.completePropertyWithSemicolon": true
or you can cancel by:
"css.completion.completePropertyWithSemicolon": false
other
"scss.completion.completePropertyWithSemicolon": true,
"less.completion.completePropertyWithSemicolon": true
Add semicolon to the end of the line and go to the next line
Shortcode: ctrl+;
Install plugin: multicomando
ext install ryuta46.multi-command
Edit file: keybindings.json
// Place your key bindings in this file to override the defaults
[
{
"key": "ctrl+;",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"cursorEnd",
{ "command": "type", "args": { "text": ";" } },
"lineBreakInsert",
"cursorDown"
]
},
"when": "editorTextFocus"
}
]
This plugin promotes a sequence of commands. Infinite possibilities!
I hope it helps someone!
You can try Semicolon Insertion Shortcut.
It's in Visual Studio's Preferences. Solution from sbi's answer here:
Go to Tools/Options/Environment/Keyboard.
Switch the "Use new shortcut in:" dropdown to "Text Editor".
Pick the Edit.BreakLine command.
In the Press shortcut keys edit pane press Shift+Enter.
Worked for me!
Ctrl+Shift+P and open Preferences:Open keyboard shortcuts (JSON) in VS Code
and insert
{
"key": "tab",
"command":"cursorEnd",
"when":"editorTextFocus"
}
tab is optional, ofc.
Put whatever you want from the keys on the keyboard.