# data[].attributes.attachment_link.readable_text
VSCode Neovim
VSCode Neovim Integration

Neovim is a fork of VIM to allow greater extensibility and integration. This extension uses a full embedded Neovim instance, no more half-complete VIM emulation! VSCode's native functionality is used for insert mode and editor commands, making the best use of both editors.

🎉 Almost fully feature-complete VIM integration by utilizing neovim as a backend.

🔧 Supports custom init.vim and many vim plugins.

🥇 First-class and lag-free insert mode, letting VSCode do what it does best.

🤝 Complete integration with VSCode features (lsp/autocompletion/snippets/multi-cursor/etc).

Table of Contents (click to expand)

🧰 Installation

Install the vscode-neovim extension.

Install Neovim 0.5.0 nightly or greater.

Set the neovim path in the extension settings. You must specify full path to neovim, like "C:\Neovim\bin\nvim.exe" or "/usr/local/bin/nvim".

The setting id is "vscode-neovim.neovimExecutablePaths.win32/linux/darwin", respective to your system.

If you want to use neovim from WSL, set the useWSL configuration toggle and specify linux path to nvim binary.wsl.exe windows binary and wslpath linux binary are required for this. wslpath must be available through$PATH linux env setting. Use wsl --list to check for the correct default linux distribution.

❗ Neovim 0.5.0 nightly or greater is required. Any version lower than that won't work. Many linux distributions have an old version of neovim in their package repo - always check what version are you installing. You can install neovim separately, outside your system's package manager installation, for example using the appimage from the neovim releases page.

🐛 See the issues section for known issues.

💡 Tips and Features

Important

If you get "Unable to init vscode-neovim: command 'type' already exists" message, uninstall other VSCode extensions that register the type command (likeVSCodeVim orOvertype).

If you already have a big init.vim it is recommended to wrap existing settings & plugins withif !exists('g:vscode') to prevent potential conflicts. If you have any problems, try with emptyinit.vim first.

On a Mac, the h, j, k and l movement keys may not repeat when held, to fix this open Terminal and execute the following command: defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false.

The extension works best if editor.scrollBeyondLastLine is disabled.

VSCode specific differences

File and editor management commands such as :e/:w/:q/:vsplit/:tabnext/etc are mapped to corresponding vscode commands and behavior may be different (see below). Do not use vim commands like :w in scripts/keybindings, they won't work. If you're using them in some custom commands/mappings, you might need to rebind them to call vscode commands from neovim withVSCodeCall/VSCodeNotify (see below).

Visual modes don't produce vscode selections, so any vscode commands expecting selection won't work. To round the corners, invoking the VSCode command picker from visual mode through the default hotkeys (f1/ctrl/cmd+shift+p) converts vim selection to real vscode selection. This conversion is also done automatically for some commands like commenting and formatting. If you're using some custom mapping for calling vscode commands that depends on real vscode selection, you can use VSCodeNotifyRange/VSCodeNotifyRangePos (the first one linewise, the latter characterwise) which will convert vim visual mode selection to vscode selection before calling the command (see below).

When you type some commands they may be substituted for the another, like :write will be replaced by :Write. This is normal.

Scrolling is done by VSCode. C-d/C-u/etc are slightly different.

Editor customization (relative line number, scrolloff, etc) is handled by VSCode.

Dot-repeat (.) is slightly different - moving the cursor within a change range won't break the repeat sequence. In neovim, if you type abc<cursor> in insert mode, then move cursor to a<cursor>bc and type 1 here the repeat sequence would be1. However in vscode it would be a1bc. Another difference is that when you delete some text in insert mode, dot repeat only works from right-to-left, meaning it will treat Del key as BS keys when running dot repeat.

Performance problems

If you have any performance problems (cursor jitter usually) make sure you're not using these kinds of extensions:

Anything that renders decorators very often:

Line number extensions (VSCode has built-in support for normal/relative line numbers)

Indent guide extensions (VSCode has built-in indent guides)

Brackets highlighter extensions (VSCode has built-in feature)

VSCode extensions that delay the extension host like "Bracket Pair Colorizer"

VIM plugins that increase latency and cause performance problems.

Make sure to disable unneeded plugins, as many of them don't make sense with vscode and may cause problems.

You don't need any code, highlighting, completion, lsp plugins as well any plugins that spawn windows/buffers (nerdtree and similar), fuzzy-finders, etc.

Many navigation/textobject/editing plugins should be fine.

If you're not sure, disable all other extensions, reload vscode window, and see if the problem persists before reporting.

Conditional init.vim

To determine if neovim is running in vscode, add to your init.vim:

if exists('g:vscode') " VSCode extension else " ordinary neovim endif

To conditionally activate plugins, vim-plug has a few solutions. For example, using the Cond helper, you can conditionally activate installed plugins ( source):

" inside plug#begin: " use normal easymotion when in vim mode Plug 'easymotion/vim-easymotion', Cond(!exists('g:vscode')) " use vscode easymotion when in vscode mode Plug 'asvetliakov/vim-easymotion', Cond(exists('g:vscode'), { 'as': 'vsc-easymotion' })

Custom escape keys

Since VSCode is responsible for insert mode, custom insert-mode vim mappings don't work. To map composite escape keys, put into your keybindings.json:

for jj

{ "command": "vscode-neovim.compositeEscape1", "key": "j", "when": "neovim.mode == insert && editorTextFocus", "args": "j" }

to enable jk add also:

{ "command": "vscode-neovim.compositeEscape2", "key": "k", "when": "neovim.mode == insert && editorTextFocus", "args": "k" }

Currently, there is no way to map both jk and kj, or to map jk without also mapping jj.

Jumplist

VSCode's jumplist is used instead of Neovim's. This is to make VSCode native navigation (mouse click, jump to definition, ect) navigable through the jumplist.

Make sure to bind to workbench.action.navigateBack / workbench.action.navigateForward if you're using custom mappings. Marks (both upper & lowercased) should work fine.

Command menu has the wildmenu completion on type. The completion options appear after 1.5s (to not bother you when you write :w or :noh). Up/Down selects the option and Tab accepts it. See the gif:

Multiple cursors

Multiple cursors work in:

To spawn multiple cursors from visual line/block modes type ma/mA or mi/mI (by default). The effect differs:

For visual line mode, mi will start insert mode on each selected line on the first non whitespace character and ma will on the end of line.

For visual block mode, mi will start insert on each selected line before the cursor block and ma after.

mA/mI versions accounts for empty lines (only for visual line mode, for visual block mode they're same as ma/mi).

See gif in action:

Keyboard Quickfix

By default, the quickfix menu can be opened using z= or C-.. However, it is currently not possible to add mappings to the quickfix menu, so it can only be navigated with arrow keys. A workaround vscode extension has been made to use the quick open menu, which can be navigated with custom bindings.

To use, install the keyboard-quickfix extension, and add to your keybindings.json:

{ "key": "ctrl+.", "command": "keyboard-quickfix.openQuickFix", "when": "editorHasCodeActionsProvider && editorTextFocus && !editorReadonly" },

and add to your init.vim:

nnoremap z= <Cmd>call VSCodeNotify('keyboard-quickfix.openQuickFix')<CR>

Invoking VSCode actions from neovim

There are a few helper functions that could be used to invoke any vscode commands:

VSCodeNotify(command, ...)
VSCodeCall(command, ...)

Invoke vscode command with optional arguments.

VSCodeNotifyRange(command, line1, line2, leaveSelection ,...)
VSCodeCallRange(command, line1, line2, leaveSelection, ...)

Produce real linewise vscode selection from line1 to line2 and invoke vscode command. Put 1 for the leaveSelection argument to leave vscode selection after invoking the command.

VSCodeNotifyRangePos(command, line1, line2, pos1, pos2, leaveSelection ,...)
VSCodeCallRangePos(command, line1, line2, pos1, pos2, leaveSelection, ...)

Produce real characterwise vscode selection from line1.pos1 to line2.pos2 and invoke vscode command.

💡 Functions with Notify in their name are non-blocking, the ones with Call are blocking. Generally use Notify unless you really need a blocking call.

Examples

Produce linewise/characterwise selection and show vscode commands (default binding):

function! s:openVSCodeCommandsInVisualMode() let mode = mode() if mode ==# 'V' let startLine = line('v') let endLine = line('.') call VSCodeNotifyRange('workbench.action.showCommands', startLine, endLine, 1) else let startPos = getpos('v') let endPos = getpos('.') call VSCodeNotifyRangePos('workbench.action.showCommands', startPos[1], endPos[1], startPos[2], endPos[2] + 1, 1) endif endfunction xnoremap <C-P> <Cmd>call <SID>openVSCodeCommandsInVisualMode()<CR>

Open definition aside (default binding):

nnoremap <C-w>gd <Cmd>call VSCodeNotify('editor.action.revealDefinitionAside')<CR>

Run Find in files for word under cursor in vscode:

nnoremap ? <Cmd>call VSCodeNotify('workbench.action.findInFiles', { 'query': expand('<cword>')})<CR>

⌨️ Bindings
Custom keymaps for scrolling/window/tab/etc management

💡 "With bang" refers to adding a "!" to the end of a command.

File management

Tab management

Similar to e[dit]. Open quickopen.
With argument: open the file in new tab.

Not supported. Doesn't make sense with vscode.

Close other tabs in vscode group (pane). This differs from vim where a tab is a like a new window, but doesn't make sense in vscode.

Switch to next (or count tabs if argument is given) in the active vscode group (pane).

tabp[revious] / gT

Switch to previous (or count tabs if argument is given) in the active vscode group (pane).

Buffer/window management

C-w s

Split editor horizontally.
With argument: open the specified file, e.g :sp $MYVIMRC. File must exist.

C-w v

Split editor vertically.
With argument: open the specified file. File must exist.

C-w n

Like sp[lit] but create new untitled file if no argument given.

Like vs[plit] but create new untitled file if no argument given.

C-w o

Without bang: merge all editor groups into the one. Don't close editors.
With bang: close all editors from all groups except current one.

C-w C-j/i/h/l

Move editor to group below/above/left/right.
Note: C-w C-i moves editor up. Ideally it should be C-w C-k but vscode has many commands mapped to C-k [key] and doesn't allow to use C-w C-k without unbinding them first.

💡 Split size distribution is controlled by workbench.editor.splitSizing setting. By default, it's distribute, which is equal to vim's equalalways and eadirection = 'both' (default).

To use VSCode command 'Increase/decrease current view size' instead of separate bindings for width and height:

workbench.action.increaseViewSize

workbench.action.decreaseViewSize

Copy this into init.vim

function! s:manageEditorSize(...) let count = a:1 let to = a:2 for i in range(1, count ? count : 1) call VSCodeNotify(to ==# 'increase' ? 'workbench.action.increaseViewSize' : 'workbench.action.decreaseViewSize') endfor endfunction " Sample keybindings. Note these override default keybindings mentioned above. nnoremap <C-w>> <Cmd>call <SID>manageEditorSize(v:count, 'increase')<CR> xnoremap <C-w>> <Cmd>call <SID>manageEditorSize(v:count, 'increase')<CR> nnoremap <C-w>+ <Cmd>call <SID>manageEditorSize(v:count, 'increase')<CR> xnoremap <C-w>+ <Cmd>call <SID>manageEditorSize(v:count, 'increase')<CR> nnoremap <C-w>< <Cmd>call <SID>manageEditorSize(v:count, 'decrease')<CR> xnoremap <C-w>< <Cmd>call <SID>manageEditorSize(v:count, 'decrease')<CR> nnoremap <C-w>- <Cmd>call <SID>manageEditorSize(v:count, 'decrease')<CR> xnoremap <C-w>- <Cmd>call <SID>manageEditorSize(v:count, 'decrease')<CR>

Insert mode special keys

Enabled by useCtrlKeysForInsertMode (default true).

Other keys are not supported in insert mode.

Normal mode control keys

Enabled by useCtrlKeysForNormalMode (default true).

Refer to vim manual for their use.

Cmdline special keys

Always enabled.

VSCode specific bindings

Editor command

gd / C-]

editor.action.revealDefinition
Also works in vim help.

Tab

togglePeekWidgetFocus
Switch between peek editor and reference list.

C-n / C-p

Navigate lists, parameter hints, suggestions, quick-open, cmdline history, peek reference list

💡 To specify the default peek mode, modify editor.peekWidgetDefaultFocus in your settings.

💡 To enable explorer list navigation, add "workbench.list.automaticKeyboardNavigation": false to your settings.json.

Explorer file manipulation

Custom keybindings

Control keys which are not in the above tables are not sent to neovim by default. To pass additional ctrl keys to neovim, for example C-Tab, add to your keybindings.json:

{ "command": "vscode-neovim.send", // the key sequence to activate the binding "key": "ctrl+tab", // don't activate during insert mode "when": "editorTextFocus && neovim.mode != insert", // the input to send to neovim "args": "<C-Tab>" }

To disable existing an ctrl key sequence, for example C-A add to your keybindings.json:

{ "command": "-vscode-neovim.send", "key": "ctrl+a" }

🤝 Vim Plugins

Most vim plugins will work out of the box, but certain plugins may require some fixes to work properly.

vim-easymotion

While the original vim-easymotion functions as expected, it works by replacing your text with markers then restoring back, which leads to broken text and many errors reported in VSCode.

For this reason I created the special vim-easymotion fork which doesn't touch your text and instead use vscode text decorations. Just add my fork to your vim-plug block or by using your favorite vim plugin installer and delete original vim-easymotion. Also overwin motions won't work (obviously) so don't use them.

By default, text decorations will appear behind of the associated text as shown in the screenshot. To show the decorations on top of the text, set vscode-neovim.textDecorationsAtTop to true.

Happy jumping!

You can use vim-commentary if you like it. But vscode already has such functionality so why don't use it? Add to your init.vim/init.nvim:

xmap gc <Plug>VSCodeCommentary nmap gc <Plug>VSCodeCommentary omap gc <Plug>VSCodeCommentary nmap gcc <Plug>VSCodeCommentaryLine

Similar to vim-commentary, gcc is comment line (accept count), use gc with motion/in visual mode. VSCodeCommentary is just a simple function which calls editor.action.commentLine.

quick-scope

quick-scope plugin uses default vim HL groups by default but they are normally ignored. To fix, add

highlight QuickScopePrimary guifg='#afff5f' gui=underline ctermfg=155 cterm=underline highlight QuickScopeSecondary guifg='#5fffff' gui=underline ctermfg=81 cterm=underline

to your init.vim. The underline color can be changed by the guisp tag.

📑 How it works

VScode connects to neovim instance

When opening a some file, a scratch buffer is created in nvim and being init with text content from vscode

Normal/visual mode commands are being sent directly to neovim. The extension listens for buffer events and applies edits from neovim

When entering the insert mode, the extensions stops listen for keystroke events and delegates typing mode to vscode (no neovim communication is being performed here)

After pressing escape key from the insert mode, extension sends changes obtained from the insert mode to neovim

❤️ Credits & External Resources

# data[].attributes.attachment_link.title
VSCode Neovim - Visual Studio Marketplace

# data[].attributes.attachment_link.description
VSCode Neovim Integration Neovim is a fork of VIM to allow greater extensibility and integration. This extension uses a full embedded Neovim instance, no more half-complete VIM emulation! VSCode's native functionality is used for insert mode and editor commands, making the best use of both editors.

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

# data[].attributes.attachment_link.readable_text
Integrates the HTMLHint static analysis tool into Visual Studio Code.

Configuration

The HTMLHint extension will attempt to use the locally installed HTMLHint module (the project-specific module if present, or a globally installed HTMLHint module). If a locally installed HTMLHint isn't available, the extension will use the embedded version (current version 0.11.0).

To install a version to the local project folder, run npm install --save-dev htmlhint. To install a global version on the current machine, run npm install --global htmlhint.

Usage

The HTMLHint extension will run HTMLHint on your open HTML files and report the number of errors on the Status Bar with details in the Problems panel ( View > Problems).

Errors in HTML files are highlighted with squiggles and you can hover over the squiggles to see the error message.

Note: HTMLHint will only analyze open HTML files and does not search for HTML files in your project folder.

Rules

The HTMLHint extension uses the default rules provided by HTMLHint.

{ "tagname-lowercase": true, "attr-lowercase": true, "attr-value-double-quotes": true, "doctype-first": true, "tag-pair": true, "spec-char-escape": true, "id-unique": true, "src-not-empty": true, "attr-no-duplication": true, "title-require": true }

.htmlhintrc

If you'd like to modify the rules, you can provide a .htmlhintrc file in the root of your project folder with a reduced ruleset or modified values.

You can learn more about rule configuration at the HTMLHint Usage page.

Additional file types

By default, HTMLHint will run on any files associated with the "html" language service (i.e., ".html" and ".htm" files). If you'd like to use the HTMLHint extension with additional file types, you have two options:

Option 1: Treating your file like any other html file

If you would like the file type to be treated as any other html file (including syntax highlighting, as well as HTMLHint linting), you'll need to associate the extension with the html language service. Add the following to your VS Code settings, replacing "*.ext" with your file extension.

{ "files.associations": { "*.ext": "html", } }

Option 2: Associating HTMLHint extension with your file type

If your file type already has an associated language service other than "html", and you'd like HTMLHint to process those file types, you will need to associate the HTMLHint extension with that language service. Add the following to your VS Code settings, replacing "mylang" with your language service. For example, if you want HTMLHint to process .twig files, you would use "twig". Note that with this configuration, you need to open an html file first to activate the HTMLHint extension. Otherwise, you won't see any linter errors, (the extension is hard-coded to activate when the html language service activates).

{ "htmlhint.documentSelector": [ "html", "mylang" ] }

Settings

The HTMLHint extension provides these settings:

htmlhint.enable - disable the HTMLHint extension globally or per workspace.

htmlhint.documentSelector - specify additional language services to be linted

htmlhint.options - provide a rule set to override on disk .htmlhintrc or HTMLHint defaults.

htmlhint.configFile - specify a custom HTMLHint configuration file. Please specify either 'htmlhint.configFile' or 'htmlhint.options', but not both.

You can change settings globally ( File > Preferences > User Settings) or per workspace ( File > Preferences > Workspace Settings). The Preferences menu is under Code on macOS.

Here's an example using the htmlhint.documentSelector and htmlhint.options settings:

"htmlhint.documentSelector: [ "html", "htm", "twig" ], "htmlhint.options": { "tagname-lowercase": false, "attr-lowercase": true, "attr-value-double-quotes": true, "doctype-first": true }

Note that in order to have the linter apply to addi

# data[].attributes.attachment_link.description
Integrates the HTMLHint static analysis tool into Visual Studio Code. The HTMLHint extension will attempt to use the locally installed HTMLHint module (the project-specific module if present, or a globally installed HTMLHint module). If a locally installed HTMLHint isn't available, the extension will use the embedded version (current version 0.11.0).

# data[].attributes.attachment_link.readable_text
Live Server loves 💘 your multi-root workspace

Live Server for server side pages like PHP. Check Here

Launch a local development server with live reload feature for static & dynamic pages.

Shortcuts to Start/Stop Server
[NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.]

1. Open a project and click to Go Live from the status bar to turn the server on/off.

2. Right click on a HTML file from Explorer Window and click on Open with Live Server. .

3. Open a HTML file and right-click on the editor and click on Open with Live Server.

4. Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C]

5. Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open With Live Server to start a server or type Live Server: Stop Live Server to stop a server.

Features

A Quick Development Live Server with live browser reload.

Start or Stop server by a single click from status bar.

Open a HTML file to browser from Explorer menu.[Quick Gif Demo].

Support for excluding files for change detection.

Hot Key control.

Customizable Port Number, Server Root, default browser.

Support for any browser (Eg: Firefox Nightly) using advance Command Line.

Support for Chrome Debugging Attachment (). [Quick Gif Demo].

Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]

Use preferable host name (localhost or 127.0.0.1).

Customizable Supporting Tag for Live Reload feature. (Default is Body or head)

SVG Support

https Support.

Support for proxy.

CORS Enabled

Multi-root workspace supported.

Support for any file even dynamic pages through Live Server Web Extension.

Installation

Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver.

Settings

All settings are now listed here Settings Docs.

FAQs
All FAQs are now listed here FAQ Docs
What's new ?

Changelog

To check full changelog click here.

Special Thanks To Maintainers

A special thanks to Max Schmitt, Joydip Roy & Ayo Adesugba for contributing their valueable time on this project.

LICENSE

This extension is licensed under the MIT License

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

# data[].attributes.attachment_link.readable_text
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

Additionally, unlike traditional pair programming, Visual Studio Live Share allows developers to work together, while retaining their personal editor preferences (e.g. theme, keybindings), as well as having their own cursor. This allows you to seamlessly transition between following one another, and being able to explore ideas/tasks on your own. In practice, this ability to work together and independently provides a collaboration experience that is potentially more natural for many common use cases.

Installation

1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux ( details).

2. Download and install the Visual Studio Live Share extension for Visual Studio Code.

If you're interested in integrated voice calling as well, then you can install the VS Live Share Extension Pack, which includes both the Live Share and Live Share Audio extensions.

3. Wait for the extension to finish downloading and then reload VS Code when prompted.

4. Wait for Visual Studio Live Share to finish installing dependencies (you'll see progress updates in the status bar).

5. Once complete, you'll see Live Share appear in your status bar. You can now begin collaborating with others immediately! Check out the quickstart below for information on how to get started.

Linux users: You may see a notification about installing missing libraries:

1. If you'd prefer not to run an automated script, you may install the libraries manually.

2. To auto-install, click Install in the notification.

3. A terminal window will appear and run a script. Your OS will ask you to enter your admin (sudo) password for the run package install commands. While the script is in the extension for security reasons, you can review the latest script contents here.

4. Restart VS Code when done.

Quickstart (Sharing)

After installing VS Live Share, it only takes a few steps to instantly share your currently open project:

1. Click the Live Share button in your status bar, which will share your project, and copy a unique session URL to your clipboard.

You'll be asked to sign in the first time you share (using a GitHub or Microsoft account), which allows others to identity you when collaborating.

On Windows, you may be asked to allow Live Share to open a firewall port, in order to enable peer-to-peer connections.

2. Send the session URL (that is copied to your clipboard) to the developers you'd like to collaborate with, using e-mail, Skype, Slack, etc. Once received, all they'll need to do is click the link in order to get started.

3. That's it! Once an invited "guest" joins, you'll get a notification, and will see their cursor appear in your currently opened file. All guests will start out "following" you, which means that as you scroll or navigate between files, they will track those actions as well. This makes it easy to orient them with the issue/question/task you're about to start collaborating on.

4. To get the most out of Live Share, check out the Session Details viewlet, by clicking the Live Share logo in your activity bar. From there, you can follow/focus participants, see which file/line everyone is currently editing, and even share localhost servers and terminals.

Want to evaluate VS Live Share but don't have anyone to collaborate with? No problem! You can actually share with yourself from another instance of VS Code. Simply open the session URL in your browser to get started.

Quickstart (Joining)

After installing VS Live Share, joining a collaboration session only requires a few steps:

1. Click the session URL the "host" sent you, which will open it up in a browser. When prompted, allow your browser to launch VS Code

2. You'll be asked to sign in the first time you share (using a GitHub or Microsoft account), which allows others to identity you when collaborating.

3. That's it! After you join, you'll be immediately presented with the file that the "host" has open, and can see their cursor and any edits they make.

Additionally, you start out "following" the host, so as they scroll or navigate between files, you'll follow along with them. This makes it easy to orient yourself with the issue/question/task you're about to start collaborating on.

4. To get the most out of Live Share, check out the Session Details viewlet, by clicking the Live Share logo in your activity bar. From there, you can follow/focus participants, see which file/line everyone is currently editing, and open any localhost servers and terminals that have been shared as part of the collaboration session.

If you have any trouble joining, see the "joining manually" section in our docs for more information.

By downloading and using Visual Studio Live Share, you agree to the license terms and privacy statement. See troubeshooting if you run into problems.

More Information

# data[].attributes.attachment_link.description
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

# data[].attributes.attachment_link.readable_text
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Sponsored by

If you find GitLens useful, please consider sponsoring it. And if you use GitLens for work, please encourage your employer to sponsor it. Also please write a review, star it on GitHub, and follow me on Twitter

GitLens is an open-source extension for Visual Studio Code created, developed, and maintained by Eric Amodio.

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

GitLens is powerful, feature rich, and highly customizable to meet your needs. Do you find code lens intrusive or the current line blame annotation distracting - no problem, quickly turn them off or change how they behave via the interactive GitLens Settings editor. For advanced customizations, refer to the GitLens docs and edit your user settings.

Here are just some of the features that GitLens provides,

effortless revision navigation (backwards and forwards) through the history of a file

an unobtrusive current line blame annotation at the end of the line showing the commit and author who last modified the line, with more detailed blame information accessible on hover

authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks

a status bar blame annotation showing the commit and author who last modified the current line

on-demand file annotations in the editor gutter, including

blame - shows the commit and author who last modified each line of a file

changes - highlights any local (unpublished) changes or lines changed by the most recent commit

heatmap - shows how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)

many rich Side Bar views

a Git Command Palette to provide guided (step-by-step) access to many common Git commands, as well as quick access to

a user-friendly interactive rebase editor to easily configure an interactive rebase session

terminal links - ctrl+click on autolinks in the integrated terminal to quickly jump to more details for commits, branches, tags, and more

rich remote provider integrations - GitHub, GitLab, Gitea, Bitbucket, Azure DevOps

issue and pull request auto-linking

rich hover information provided for linked issues and pull requests (GitHub only)

associates pull requests with branches and commits (GitHub only)

many powerful commands for navigating and comparing revisions and more

customizable menus & toolbars for control over where menu and toolbar items are shown

user-defined modes for quickly toggling between sets of settings

and so much more 😁

Adds an Open Changes with Previous Revision command (gitlens.diffWithPrevious) to compare the current file or revision with the previous commit revision

Adds an Open Changes with Next Revision command (gitlens.diffWithNext) to compare the current file or revision with the next commit revision

Adds an Open Line Changes with Previous Revision command (gitlens.diffLineWithPrevious) to compare the current file or revision with the previous line commit revision

Adds an Open Changes with Working File command (gitlens.diffWithWorking) to compare the current revision or most recent commit revision of the current file with the working tree

Adds an Open Line Changes with Working File command (gitlens.diffLineWithWorking) to compare the commit revision of the current line with the working tree

Adds an Open Changes with Branch or Tag... command (gitlens.diffWithRevisionFrom) to compare the current file or revision with another revision of the same file on the selected reference

Adds an Open Changes with Revision... command (gitlens.diffWithRevision) to compare the current file or revision with another revision of the same file

Current Line Blame #

Adds an unobtrusive, customizable, and themable, blame annotation at the end of the current line

Contains the author, date, and message of the current line's most recent commit (by default)

Adds a Toggle Line Blame Annotations command (gitlens.toggleLineBlame) to toggle the blame annotation on and off

Git Code Lens #

Adds Git authorship code lens to the top of the file and on code blocks ( optional, on by default)

Recent Change - author and date of the most recent commit for the file or code block

Click the code lens to show a commit file details quick pick menu with commands for comparing, navigating and exploring commits, and more (by default)

Authors - number of authors of the file or code block and the most prominent author (if there is more than one)

Click the code lens to toggle the file Git blame annotations on and off of the whole file (by default)

Will be hidden if the author of the most recent commit is also the only author of the file or block, to avoid duplicate information and reduce visual noise

Provides customizable click behavior for each code lens - choose between one of the following

Toggle file blame annotations on and off

Compare the commit with the previous commit

Show a quick pick menu with details and commands for the commit

Show a quick pick menu with file details and commands for the commit

Show a quick pick menu with the commit history of the file

Show a quick pick menu with the commit history of the current branch

Adds a Toggle Git Code Lens command ( gitlens.toggleCodeLens) with a shortcut of shift+alt+b to toggle the code lens on and off

Status Bar Blame #

Current Line Hovers

Adds customizable Git blame hovers accessible over the current line

Details Hover

Adds a details hover annotation to the current line to show more commit details (optional, on by default)

Provides automatic issue linking to Bitbucket, Gitea, GitHub, GitLab, and Azure DevOps in commit messages

Provides a quick-access command bar with Open Changes, Blame Previous Revision, Open on Remote, Invite to Live Share (if available), and Show More Actions command buttons

Click the commit SHA to execute the Show Commit command

Changes (diff) Hover

Adds a changes (diff) hover annotation to the current line to show the line's previous version (optional, on by default)

Click the Changes to execute the Open Changes command

Click the current and previous commit SHAs to execute the Show Commit command

Annotation Hovers

Adds customizable Git blame hovers accessible when annotating

Details Hover

Adds a details hover annotation to each line while annotating to show more commit details (optional, on by default)

Provides automatic issue linking to Bitbucket, Gitea, GitHub, GitLab, and Azure DevOps in commit messages

Provides a quick-access command bar with Open Changes, Blame Previous Revision, Open on Remote, Invite to Live Share (if available), and Show More Actions command buttons

Click the commit SHA to execute the Show Commit command

Changes (diff) Hover

Adds a changes (diff) hover annotation to each line while annotating to show the line's previous version (optional, on by default)

Click the Changes to execute the Open Changes command

Click the current and previous commit SHAs to execute the Show Commit command

Gutter Blame #

Adds on-demand, customizable, and themable, gutter blame annotations to show the commit and author who last modified each line of a file

Contains the commit message and date, by default

Adds a heatmap (age) indicator on right edge (by default) of the gutter to provide an easy, at-a-glance way to tell how recently lines were changed (optional, on by default)

Adds a Toggle File Blame Annotations command (gitlens.toggleFileBlame) with a shortcut of alt+b to toggle the blame annotations on and off

Press Escape to turn off the annotations

Gutter Changes #

Adds an on-demand, customizable and themable, gutter changes annotation to highlight any local (unpublished) changes or lines changed by the most recent commit

Adds Toggle File Changes command (gitlens.toggleFileChanges) to toggle the changes annotations on and off

Press Escape to turn off the annotations

Gutter Heatmap #

Adds an on-demand heatmap to the edge of the gutter to show how recently lines were changed

The indicator's customizable color will either be hot or cold based on the age of the most recent change (cold after 90 days by default)

The indicator's brightness ranges from bright (newer) to dim (older) based on the relative age, which is calculated from the median age of all the changes in the file

Adds Toggle File Heatmap Annotations command (gitlens.toggleFileHeatmap) to toggle the heatmap on and off

Press Escape to turn off the annotations

Side Bar Views #

GitLens adds many side bar views to provide additional rich functionality. The default layout (location) of these views can be quickly customized via the GitLens: Set Views Layout ( gitlens.setViewsLayout) command from the Command Palette.

Source Control Layout - shows all the views together on the Source Control side bar

GitLens Layout - shows all the views together on the GitLens side bar

Commits view #

A customizable view to visualize, explore, and manage Git commits

The Commits view lists all of the commits on the current branch, and additionally provides,

a toggle to switch between showing all commits or just your own commits

a toggle to change the file layout: list, tree, auto

a branch comparison tool (Compare <current branch> with <branch, tag, or ref>) - optionally shows a comparison of the current branch (or working tree) to a user-selected reference
# files changed - lists all of the files changed between the compared references

the current branch status - shows the upstream status of the current branch

Publish <current branch> to <remote> - shown when the current branch has not been published to a remote

Up to date with <remote> - shown when the current branch is up to date with the upstream remote

Changes to pull from <remote> - lists all of the commits waiting to be pulled when the current branch has commits that are waiting to be pulled from the upstream remote

Changes to push to <remote> - lists of all the files changed in the unpublished commits when the current branch has (unpublished) commits that waiting to be pushed to the upstream remote

Merging into <branch> or Resolve conflicts before merging into <branch> - lists any conflicted files. Conflicted files show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

Rebasing <branch> or Resolve conflicts to continue rebasing <branch> - shows the number of rebase steps left, the commit the rebase is paused at, and lists any conflicted files. Conflicted files show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

any associated pull request - shows any opened or merged pull request associated with the current branch

Repositories view #

A hidden by default, customizable view to visualize, explore, and manage Git repositories

The Repositories view lists opened Git repositories, and additionally provides,

a toggle to automatically refresh the repository on changes

a toggle to change the file layout: list, tree, auto

an icon overlay indicator to show the current branch's upstream status (if available)

No dot - no changes or the branch is unpushlished

Green dot - has changes unpushed (ahead)

Red dot - has changes unpulled (behind)

Yellow dot - both unpushed and unpulled changes

a branch comparison tool (Compare <current branch> with <branch, tag, or ref>) - optionally shows a comparison of the current branch (or working tree) to a user-selected reference

# files changed - optionally lists all of the files changed in the working tree

the current branch status - optionally shows the upstream status of the current branch

Publish <current branch> to remote - shown when the current branch has not been published to a remote

Up to date with <remote> - shown when the current branch is up to date with the upstream remote

Changes to pull from <remote> - lists all of the unpulled commits and all of the files changed in them, when the current branch has commits that are waiting to be pulled from the upstream remote

Changes to push to <remote> - lists of all the unpublished commits and all of the files changed in them, when the current branch has commits that waiting to be pushed to the upstream remote

Merging into <branch> or Resolve conflicts before merging into <branch> - lists any conflicted files. Conflicted files show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

Rebasing <branch> or Resolve conflicts to continue rebasing <branch> - shows the number of rebase steps left, the commit the rebase is paused at, and lists any conflicted files. Conflicted files show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

any associated pull request - optionally shows any opened or merged pull request associated with the current branch

Incoming Activity (experimental) - optionally shows any incoming activity, which lists the command, branch (if available), and date of recent incoming activity (merges and pulls) to your local repository

File History view #

A customizable view to visualize, navigate, and explore the revision history of the current file or just the selected lines of the current file

The file history view lists all of the commits that changed the current file on the current branch, and additionally provides,

a toggle to pin (pause) the automatic tracking of the current editor

a toggle to switch between file and line history, i.e. show all commits of the current file, or just the selected lines of the current file

the ability to change the current base branch or reference when computing the file or line history

(file history only) a toggle to follow renames across the current file

(file history only) a toggle to show commits from all branches rather than just from the current base branch or reference

merge conflict status when applicable
Merge Changes - show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

Line History view #

A hidden by default, customizable view to visualize, navigate, and explore the revision history of the selected lines of the current file

The line history view lists all of the commits that changed the selected lines of the current file on the current branch, and additionally provides,

a toggle to pin (pause) the automatic tracking of the current editor

the ability to change the current base branch or reference when computing the line history

merge conflict status when applicable
Merge Changes - show comparisons with the common base of the current and incoming changes to aid in resolving the conflict by making it easier to see where changes originated

Branches view #

A customizable view to visualize, explore, and manage Git branches

The Branches view lists all of the local branches, and additionally provides,

a toggle to change the branch layout: list or tree

a toggle to change the file layout: list, tree, auto

an icon overlay indicator to show the branch's upstream status (if available)

No dot - no changes or the branch is unpushlished

Green dot - has changes unpushed (ahead)

Red dot - has changes unpulled (behind)

Yellow dot - both unpushed and unpulled changes

status indicators (decorations), on the right, and themeable colorizations

✓ - indicates that the branch is the current branch

▲ + green colorization - indicates that the branch has unpushed changes (ahead)

▼ + red colorization - indicates that the branch has unpulled changes (behind)

▼▲ + yellow colorization - indicates that the branch has diverged from its upstream; meaning it has both unpulled and unpushed changes

▲+ + green colorization - indicates that the branch hasn't yet been published to an upstream remote

! + dark red colorization - indicates that the branch has a missing upstream (e.g. the upstream branch was deleted)

a branch comparison tool (Compare <branch> with <branch, tag, or ref>) - optionally shows a comparison of the branch to a user-selected reference
# files changed - lists all of the files changed between the compared references

the branch status - shows the upstream status of the branch

Publish <branch> to <remote> - shown when the current branch has not been published to a remote

Changes to push to <remote> - lists of all the files changed in the unpublished commits when the branch has (unpublished) commits that waiting to be pushed to the upstream remote

Changes to pull from <remote> - lists all of the commits waiting to be pulled when the branch has commits that are waiting to be pulled from the upstream remote

any associated pull request - shows any pull request associated with the branch

Remotes view #

A customizable view to visualize, explore, and manage Git remotes and remote branches

The Remotes view lists all of the remotes and their remote branches, and additionally provides,

a toggle to change the branch layout: list or tree

a toggle to change the file layout: list, tree, auto

a toggle to connect to a supported remote providers to enable a rich integration with pull requests, issues, avatars, and more

Stashes view #

A customizable view to visualize, explore, and manage Git stashes

The Stashes view lists all of the stashes, and additionally provides,

a toggle to change the file layout: list, tree, auto

A customizable view to visualize, explore, and manage Git tags

The Tags view lists all of the tags, and additionally provides,

a toggle to change the tag layout: list or tree

a toggle to change the file layout: list, tree, auto

Contributors view #

A hidden by default, customizable view to visualize, navigate, and explore contributors

The Contributors view lists all of the contributors, and additionally provides,

a toggle to change the file layout: list, tree, auto

Search & Compare view #

A hidden by default, customizable view to search and explore commit histories by message, author, files, id, etc, or visualize comparisons between branches, tags, commits, and more

The Search & Compare view lists pinnable (saved) results for searching commit histories or for comparison operations, and additionally provides,

a toggle to keep previous results when new results are added

a toggle to change the file layout: list, tree, auto

pinnable search - lists all of the commits that match the search query
Search results can be provided by the following commands

Search Commits command (gitlens.showCommitSearch) can search

by message - use <message> to find commits with messages that match <message> - See Git docs

or, by author - use @<pattern> to find commits with authors that match <pattern> - See Git docs

or, by commit SHA - use #<sha> to find a commit with SHA of <sha> - See Git docs

or, by files - use :<path/glob> to find commits with file names that match <path/glob> - See Git docs

or, by changes - use ~<pattern> to find commits with differences whose patch text contains added/removed lines that match <pattern> - See Git docs

Show File History command (gitlens.showQuickFileHistory)

Show Commit command (gitlens.showQuickCommitDetails)

pinnable comparison - shows a comparison of the two user-selected references

# files changed - lists all of the files changed between the compared references

Comparision results can be provided by the following commands

Compare with Upstream command (gitlens.views.compareWithUpstream)

Compare with Working Tree command (gitlens.views.compareWithWorking)

Compare with HEAD command (gitlens.views.compareWithHead)

Compare with Selected command (gitlens.views.compareWithSelected)

Compare Ancestry with Working Tree command (gitlens.views.compareAncestryWithWorking)

Git Command Palette #

Adds a customizable Git Command Palette command ( gitlens.gitCommands) to provide guided (step-by-step) access to many common Git commands, as well as quick access to commit history and search, stashes, and more

Quickly navigate and execute Git commands through easy-to-use menus where each command can require an explicit confirmation step before executing

Quick Commit Access #

Adds a Show Branch History command (gitlens.showQuickBranchHistory) to show a quick pick menu to explore the commit history of the selected branch

Adds a Show Current Branch History command (gitlens.showQuickRepoHistory) to show a quick pick menu to explore the commit history of the current branch

Adds a Show File History command (gitlens.showQuickFileHistory) to show quick pick menu to explore the commit history of the current file

Adds a Search Commits command (gitlens.showCommitSearch) to show quick pick menu to search for commits

by message - use <message> to find commits with messages that match <message> - See Git docs

or, by author - use @<pattern> to find commits with authors that match <pattern> - See Git docs

or, by commit SHA - use #<sha> to find a commit with id of <sha> - See Git docs

or, by files - use :<path/glob> to find commits with file names that match <path/glob> - See Git docs

or, by changes - use ~<pattern> to find commits with differences whose patch text contains added/removed lines that match <pattern> - See Git docs

Adds a Show Commit command (gitlens.showQuickCommitDetails) to show a quick pick menu to explore a commit and take action upon it

Adds a Show Line Commit command (gitlens.showQuickCommitFileDetails) to show a quick pick menu to explore a file of a commit and take action upon it

Quick Stash Access #

Adds a Show Stashes command (gitlens.showQuickStashList) to show a quick pick menu to explore your stashes

Quick Status Access #

Adds a Show Repository Status command (gitlens.showQuickRepoStatus) to show a quick pick menu to for visualizing the current repository status

Interactive Rebase Editor #

Adds a user-friendly interactive rebase editor to more easily configure an interactive rebase session

Quickly re-order, edit, squash, and drop commits

Includes drag & drop support!

To use this directly from your terminal, e.g. when running git rebase -i,

set VS Code as your default Git editor
git config --global core.editor "code --wait"

or, to only affect rebase, set VS Code as your Git rebase editor
git config --global sequence.editor "code --wait"

To use the Insiders edition of VS Code, replace code in the above with code-insiders

Optionally adds autolinks for branches, tags, and commit ranges in the integrated terminal to quickly explore their commit history

Optionally adds autolinks for commits in the integrated terminal to quickly explore the commit and take action upon it

Remote Provider Integrations #

GitLens provides rich integrations with many remote providers, including GitHub, GitHub Enterprise, GitLab, Gitea, Bitbucket, Bitbucket Server, Azure DevOps. You can also define custom remote providers or remote providers with custom domains as well.

Basic integrations provide issue and pull request auto-linking, while richer integrations (e.g. GitHub) can provide rich hover information provided for auto-linked issues and pull requests, associate pull requests with branches and commits, and provide avatars.

Additionally, these integrations provide commands to copy the url of or open, files, commits, branches, and the repository on the remote provider.

Open File from Remote command (gitlens.openFileFromRemote) - opens the local file from a url of a file on a remote provider

Open File on Remote command (gitlens.openFileOnRemote) - opens a file or revision on the remote provider

Copy Remote File Url command (gitlens.copyRemoteFileUrlToClipboard) - copies the url of a file or revision on the remote provider

Open File on Remote From... command (gitlens.openFileOnRemoteFrom) - opens a file or revision on a specific branch or tag on the remote provider

Copy Remote File Url From... command (gitlens.copyRemoteFileUrlFrom) - copies the url of a file or revision on a specific branch or tag the remote provider

Open Commit on Remote command (gitlens.openCommitOnRemote) - opens a commit on the remote provider

Copy Remote Commit Url command (gitlens.copyRemoteCommitUrl) - copies the url of a commit on the remote provider

Open Branch on Remote command (gitlens.openBranchOnRemote) - opens the branch on the remote provider

Copy Remote Branch Url command (gitlens.copyRemoteBranchUrl) - copies the url of a branch on the remote provider

Open Branches on Remote command (gitlens.openBranchesOnRemote) - opens the branches on the remote provider

Copy Remote Branches Url command (gitlens.copyRemoteBranchesUrl) - copies the url of the branches on the remote provider

Open Comparison on Remote command (gitlens.openComparisonOnRemote) - opens the comparison on the remote provider

Copy Remote Comparison Url command (gitlens.copyRemoteComparisonUrl) - copies the url of the comparison on the remote provider

Open Pull Request command (gitlens.openPullRequestOnRemote) - opens the pull request on the remote provider

Copy Pull Request Url command (gitlens.copyRemotePullRequestUrl) - copies the url of the pull request on the remote provider

Open Repository on Remote command (gitlens.openRepoOnRemote) - opens the repository on the remote provider

Copy Remote Repository Url command (gitlens.copyRemoteRepositoryUrl) - copies the url of the repository on the remote provider

Powerful Commands #

GitLens provides customizable menu and toolbar contributions to put you in control over where GitLens' commands are shown. The easiest way to configure these settings is via the GitLens interactive settings editor.

For example, if you uncheck the Add to the editor group toolbar you will see the following items removed from the toolbar:

You can also expand each group to control each area more granularly.

GitLens supports user-defined modes for quickly toggling between sets of settings.

Adds Switch Mode command (gitlens.switchMode) to quickly switch the active mode

Adds a Zen mode which for a zen-like experience, disables many visual features
Adds Toggle Zen Mode command (gitlens.toggleZenMode) to toggle Zen mode

Adds a Review mode which for reviewing code, enables many visual features
Adds Toggle Review Mode command (gitlens.toggleReviewMode) to toggle Review mode

Adds the active mode to the status bar (optional, on by default)

GitLens provides a rich interactive settings editor, an easy-to-use interface, to configure many of GitLens' powerful features. It can be accessed via the GitLens: Open Settings ( gitlens.showSettingsPage) command from the Command Palette.

For more advanced customizations, refer to the settings documentation below.

GitLens is highly customizable and provides many configuration settings to allow the personalization of almost all features.

Current Line Blame Settings #

Git Code Lens Settings #

Status Bar Settings #

Hover Settings #

View Settings #

Commits View Settings #

See also View Settings

Repositories View Settings #

See also View Settings

File History View Settings #

See also View Settings

Line History View Settings #

See also View Settings

Branches View Settings #

See also View Settings

Remotes View Settings #

See also View Settings

Stashes View Settings #

See also View Settings

See also View Settings

Contributors View Settings #

See also View Settings

Search & Compare View Settings #

See also View Settings

Gutter Blame Settings #

Gutter Changes Settings #

Gutter Heatmap Settings #

Git Command Palette Settings #

Remote Provider Integration Settings #

gitlens.remotes
Specifies custom remote services to be matched with Git remotes to detect custom domains for built-in remote services or provide support for custom remote services

Supported Types (e.g. "type": "GitHub"):Example:
"gitlens.remotes": [{ "domain": "git.corporate-url.com", "type": "GitHub" }]

Example:
"gitlens.remotes": [{ "regex": "ssh://(my\.company\.com):1234/git/(.+)", "type": "GitHub" }]

Example:
"gitlens.remotes": [{
"domain": "git.corporate-url.com",
"type": "Custom",
"name": "My Company",
"protocol": "https",
"urls": {
"repository": "https://git.corporate-url.com/${repo}",
"branches": "https://git.corporate-url.com/${repo}/branches",
"branch": "https://git.corporate-url.com/${repo}/commits/${branch}",
"commit": "https://git.corporate-url.com/${repo}/commit/${id}",
"file": "https://git.corporate-url.com/${repo}?path=${file}${line}",
"fileInBranch": "https://git.corporate-url.com/${repo}/blob/${branch}/${file}${line}",
"fileInCommit": "https://git.corporate-url.com/${repo}/blob/${id}/${file}${line}",
"fileLine": "#L${line}",
"fileRange": "#L${start}-L${end}"
}
}]

Example:
"gitlens.remotes": [{
"regex": "ssh:\\/\\/(my\\.company\\.com):1234\\/git\\/(.+)",
"type": "Custom",
"name": "My Company",
"protocol": "https",
"urls": {
"repository": "https://my.company.com/projects/${repoBase}/repos/${repoPath}",
"branches": "https://my.company.com/projects/${repoBase}/repos/${repoPath}/branches",
"branch": "https://my.company.com/projects/${repoBase}/repos/${repoPath}/commits/${branch}",
"commit": "https://my.company.com/projects/${repoBase}/repos/${repoPath}/commit/${id}",
"file": "https://my.company.com/projects/${repoBase}/repos/${repoPath}?path=${file}${line}",
"fileInBranch": "https://my.company.com/projects/${repoBase}/repos/${repoPath}/blob/${branch}/${file}${line}",
"fileInCommit": "https://my.company.com/projects/${repoBase}/repos/${repoPath}/blob/${id}/${file}${line}",
"fileLine": "#L${line}",
"fileRange": "#L${start}-L${end}"
}
}]

gitlens.fileAnnotations.command
Specifies whether the file annotations button in the editor title shows a menu or immediately toggles the specified file annotations
null (default) - shows a menu to choose which file annotations to toggle
blame - toggles gutter blame annotations
heatmap - toggles gutter heatmap annotations
changes - toggles gutter changes annotations

Keyboard Shortcut Settings #

gitlens.keymap
Specifies the keymap to use for GitLens shortcut keys

alternate - adds an alternate set of shortcut keys that start with Alt (⌥ on macOS)
chorded - adds a chorded set of shortcut keys that start with Ctrl+Shift+G ( ⌥⌘G on macOS)
none - no shortcut keys will be added

Modes Settings #

gitlens.modes
Specifies the user-defined GitLens modes

Example - adds heatmap annotations to the Reviewing mode
"gitlens.modes": { "review": { "annotations": "heatmap" } }

Example - adds a new Annotating mode with blame annotations
"gitlens.modes": {
"annotate": {
"name": "Annotating",
"statusBarItemName": "Annotating",
"description": "for root cause analysis",
"annotations": "blame",
"codeLens": false,
"currentLine": false,
"hovers": true
}
}

gitlens.autolinks
Specifies autolinks to external resources in commit messages. Use <num> as the variable for the reference number

Example to autolink Jira issues: (e.g. JIRA-123 ⟶ https://jira.company.com/issue?query=123)
"gitlens.autolinks": [{ "prefix": "JIRA-", "url": "https://jira.company.com/issue?query=<num>" }]

Misc Settings #

Themable Colors #

GitLens defines a set of themable colors which can be provided by vscode themes or directly by the user using workbench.colorCustomizations.

A big thanks to the people that have contributed to this project:

Also special thanks to the people that have provided support, testing, brainstorming, etc:

And of course the awesome vscode team!

# data[].attributes.attachment_link.title
GitLens - Git supercharged - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Supercharge the Git capabilities built into Visual Studio Code - Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

# data[].attributes.attachment_link.readable_text
GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork and star gists and repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulling anything. It's like your very own developer library for building and referencing code snippets, commonly-used config/scripts, programming-related notes, knowledge bases and interactive samples.

Table of Contents

Getting Started

1. Install this extension from the marketplace and then reload VS Code

2. Open the GistPad tab (look for the notebook icon in the activity bar). From there, you can open a Gist or GitHub repo by ID/URL, or sign in with a GitHub account in order to manage your gists and repositories.

To sign-in, simply click the Sign In button and follow the provided flow in order to authenticate with your GitHub account.

From here, you can create and edit gists, repositories, wikis and runnable code samples. Have fun and let us know how we can make your knowledge management experience even more awesome 🙌

Gist Management

In order to create a new gist, simply open up the Gists tree in the GistPad tab, and click the + icon in the toolbar and specify the description and files to seed it with (including support for directories!). Additionally, you can create gists from local files or snippets, by right-clicking them in the Explorer tree, or right-clicking an editor window/tab, and selecting Copy File to Gist, Add Selection to Gist or Paste Gist File Contents ( details)

Alternative, you can run the GistPad: New Gist and GistPad: New Secret Gist commands to create gists.

From here, you can edit gist files by expanding the gist and clicking the desired file. Furthermore, you can open, rename, delete, etc. gists by right-clicking them in the tree and using one of the provided commands.

Sorting and Grouping

By default, the Gists tree sorts gist by their update-time, which allows you to focus on the most recently used gists. However, if you'd like to sort your gists alphabetically, you can click the sort toggle button on the Gists tree's toolbar.

Additionally, by default, your gists are displayed as a flat list. However, if you'd like to group them by type, you can click the group toggle button on the Gists tree's toolbar.

Gist Types

When grouping is enabled, gists are grouped into the following built-in types:

note - Gists that are composed of nothing but .txt, .md/.markdown or .adoc files

notebook - Gists that are compose of nothing by Jupyter Notebook files (.ipynb)

code-swing - Gists that include either a codeswing.json file and/or an index.html file. Read more about swings here.

code-swing-template - Swings whose codeswing.json file sets the template property to true. Read more about swing templates here.

code-swing-tutorial - Swings whose codeswing.json file specifies a tutorial property. Read more about tutorials here.

code-tour - Gists that include a main.tour file, and were created by exporting a CodeTour.

diagram - Gists that include a .drawio file.

flash-code - Gists that include a .deck file.

code-snippet - Gists that don't match any of the above more-specific types.

Files and Directories

When you create a gist via the New Gist (or New Secret Gist) command, you can specify a comma-separated list of file names to seed the gist with. Furthermore, you could add / to your filenames, in order to add them to a sub-directory within the gist. For example, if you create a new gist, and specify todos/personal.txt,todos/work.txt,reminders.txt, the gist will include a reminders.txt file at the root of the gist, and personal.txt and reminders.txt files within a new directory called todos.

Gist comments are exposed within the editor at the bottom of any opened Gist files. If a Gist includes multiple files, then the comment thread will be displayed at the bottom of them all (duplicated and synchronized).

If you're not authenticated, you can view existing comments, but you can't reply to them. If you are authenticated, you can add/reply, as well as edit/delete your own comments. In order to control the behavior of how Gist comment threads are displayed, refer to the GistPad > Comments: Show Thread config setting.

Pasting Images

In order to make it easy to author markdown and HTML/Pug files that include image assets, you can copy images into your clipboard (e.g. taking a screenshot, clicking Copy Image in your browser, etc.) and then paste them directly into a gist file by right-clicking the editor and selecting Paste Image, or using one of the following keyboard shortcuts: ctrl + shift + v (Windows/Linux), cmd + shift + v (macOS).

By default, when you paste an image into a Gist file, it's uploaded as a .png to the gist, and the appropriate reference is added to it from the document (e.g. inserting an <img />). However, this behavior can be changed by using the GistPad > Images: Paste Format and/or GistPad > Images: Paste Type settings. Refer to the config settings section below for more details.

Following Users

GitHub Gists already allows you to star other user's gists, and when you do that, those will appear in the Gists tree, underneath a Starred Gists node. However, if you want to follow a GitHub user, and easily browse all of their current and future gists (without having to star each one!), you can run the GistPad: Follow User command and specify their GitHub user name. Once you've done that, you'll see a new node in the Gists tree which displays all of their public gists, and allows you to open/fork/clone/star them just like any other gist.

Exporting to Repositories

At some point, your code/notes might outgrow the feature set offered by Gists (e.g. when you want to start collaborating on the content with other developers). In that event, you can simply right-click the gist, and select the Export to Repository command in order to create a new GitHub repository, that contains the content of your gist. The created repo will be public or private, depending on the public/private state of the exported gist.

Scratch Notes

To make it easy to capture ephemeral/fleeting notes as you learn new things throughout the day, GistPad allows you to create "scratch notes" by clicking the New scratch note... command under the Scratch Notes node in the Gists tree (or running the GistPad: New Scratch Note command). A scratch note is simply a text document, whose name is formatted based on the day/time it was created.

In order to help differentiate scratch notes from your "permanent notes", scratch notes appear as children of a top-level Scratch Notes node in the Gists tree. This makes it easy to view your outstanding scratch notes, so you can periodically audit them, in order to migrate any meaningful content to a more appropriate location (e.g. a new or existing gist).

You can create as many scratch notes as you need, and when you're done with them, you can delete individual notes and/or clear all of your notes by right-clicking the Scratch Notes node in the tree and selecting Clear Scratch Notes.

Behind the scenes, scratch notes are simply files that are managed within a "special" secret gist on your behalf. This way, you can focus entirely on the ephemeral nature of the notes, and not worry about creating/deleting gists.

Showcase

In order to illustrate what you can do with gists and code swings, as well as keep up-to-date with the cool stuff that folks in the community are building, you can check out the Showcase view in the GistPad tab. This shows a list of categories, which are meant to highlight different use cases for gists, along with some examples. Simply click the Open button for any gist in order to explore it, or expand the gist to see its file contents. If you have a gist that you think is worth showcasing, please open an issue and let us know about it. Otherwise, we'll keep the showcase updated periodically, to highlight new and interesting things. So stay tuned!

GistLog

In addition to being able to use Gists to share code snippets/files, you can also use it as a mini-blog, thanks to integration with GistLog. In order to start blogging, simply run the GistPad: New GistLog command, which will create a new Gist that includes two files: blog.md and gistlog.yml.

The blog.md file will be automatically opened for editing, and as soon as you're ready to publish your post, open gistlog.yml and set the published property to true. Then, right-click your Gist and select the Open Gist in GistLog menu. This will open your browser to the URL that you can share with others, in order to read your new post.

In addition to being able to view individual posts on GistLog, you can also open your entire feed by right-clicking the Your Gists tree node and selecting the Open Feed in GistLog menu item. This will launch your GistLog landing page that displays are published GistLog posts.

Repositories

After running this command, you'll see a new Repositories tree in the GistPad tab, which displays the selected repo(s). From here, you can add/upload/edit/delete/rename files, and behind the scenes, your edits will be translated into commits on the respective repo. GistPad will automatically keep your data in sync with GitHub, so you never have to think about pushing or pulling. You can just focus on editing 🚀

Note: Once you're managing at least one repository, you can create/manage new repositories by clicking the + icon in the toolbar of the Repositories tree.

Directories

Repo Templates

In addition to creating a new repo "from scratch", you can also create a repository from a repo template. To do this, simply run the GistPad: Open Repository command and select the Create new repo from template or Create new private repo from template options. You'll be presented with some "well-known" repo templates to select from, but you can also specify the name of an arbitrary repo template as well.

Branches

By default, when you create/manage a repository, GistPad will assume you're interested in editing the master branch. However, when managing a repo, you can specify a different branch by appending #<branch> to the specified repo name (e.g. vsls-contrib/gistpad#featureA). When you're managing a non-master branch, the repo node in the Repositories tree will display the branch name.

If at any time, you want to switch branches, simply right-click the repo node in the Repositories tree and select Switch Branch. This will let you pick one of the repo's remote branches, as well as create a new branch. When you're done with a branch, simply right-click the repo and select either Delete Branch or Merge Branch. The later will perform a "squash merge" against master. Using branches allows you to "batch" change sets together, and then apply them in a single/semantic commit.

Pasting Images

Just like gists, you can copy images into your clipboard (e.g. taking a screenshot, clicking Copy Image in your browser, etc.) and then paste them directly into a markdown file by right-clicking the editor and selecting Paste Image, or using one of the following keyboard shortcuts: ctrl+shift+v (Windows/Linux), cmd+shift+v (macOS).

By default, when you paste an image into a repo file, it's uploaded as a .png to the repo, and the appropriate reference is added to it from the document (e.g. an [title](https://github.com/lostintangent/gistpad/blob/HEAD/url) link). However, this behavior can be changed by using the GistPad > Images: Paste Format and/or GistPad > Images: Paste Type settings. Refer to the config settings section below for more details. Furthermore, when you paste an image, it is uploaded to a directory called images within the gist. However, if you'd like to change this (e.g. to assets instead), you can set the GistPad > Images: Directory Name setting.

Wikis

By default, when you create/manage a GitHub repository, GistPad will let you edit it like a remotely-accessible "file system". However, if you'd like to use the repo as a Roam/Obsidian-like wiki, that's composed of bi-directionally linked markdown pages, then you can indicate that the repo is a wiki in one of the following ways:

1. Including wiki in the repo's name (e.g. lostintangent/gistpad-wiki)

2. Adding a gistpad.json or .vscode/gistpad.json file to the repo itself

Note: For interoperability with Foam, GistPad will also identify a repo as a wiki if it includes a .vscode/foam.json file.

Pages

Additionally, to make it really simple to add a new wiki page, you can either run the GistPad: Add Wiki Page command, or click the notebook icon in your status bar.

Note: While wikis add a "pages" abstraction layer on top of repos, they are still repos behind the scenes. As a result, if you like to add an arbitrary file or directory to your wiki, you can right-click it's node in the tree and select Add New File.

Daily Pages

Additionally, to make it really simple to open your "today page", you can either run the GistPad: Open Today Page command, or click the calendar icon in your status bar.

If you'd like to change the name of the directory that daily pages are stored in, you can set the GistPad > Wikis > Daily: Directory Name setting. Furthermore, if you want to change the format that is used to title daily pages, you can set the GistPad > Wikis > Daily: Title Format setting.

In order to create connections between pages, you can add [[links]] to a page. When you type [[, GistPad will display a completion list of the name of all existing pages. Furthermore, you can type a new topic/page title, and GistPad will automatically create that page for you.

Furthermore, when you open a page that contains backlinks, the set of backlinks will be displayed at the bottom of the page, including a line preview of the backlink. This makes it possible to have pages that don't actually include content themselves, but rather, are simply "topic aggregators" to view the connections between pages in the same wiki.

Embedding Files

In addition to adding links to pages, it's sometimes valuable to embed the contents of another page directly into a note, so that you can easily read them together. To do this, you can use the ![[link]] syntax, where you'll recieve auto-completion support just like regular links. When you use an embed link, the target page's contents will be displayed within the note whenever you view it's markdown preview.

CodeSwing

If you're building web applications, and want to create a quick playground environment in order to experiment with HTML, CSS or JavaScript (or Sass/SCSS, Less, Pug and TypeScript), you can install the CodeSwing extension, in order to have a CodePen-like web experience, integrated into VS Code. GistPad provides an integration with CodeSwing, and so once it's installed, you can right-click the Your Gists node in the GistPad tree and select New CodeSwing or New Secret CodeSwing. This will create a new gist, seeded with the selected template fiels, and then provide you with a live preview Webview, so that you can iterate on the code and visually see how it behaves.

When you create a new swing, you'll be asked to select a template, which is simply a way to get started quickly, using the libraries and languages you intend to use (e.g. React.js, Vue.js). Since the swing is backed by a Gist, your changes are saved and shareable with your friends. Additionally, as you find other swings that you'd like to use, simply fork them and create your own swings. That way, you can use Gists as "templates" for swing environments, and collaborate on them with others just like you would any other gist. When you're done with a swing, simply close the preview window and all other documents will be automatically closed. If you no longer need the swing, then delete it just like any other gist 👍

Contributed Commands (File Explorer)

Contributed Commands (Editor)

In addition to the Explorer file tree commands, GistPad also contributes the following commands to the editor's context menu:

Add Selection to Gist - Allows you to add a snippet/selection of code to a Gist, instead of the entire document

Paste Gist File - Allows you to paste the contents of a Gist file into the active editor

Paste Image - Allows you to paste an image from your clipboard into a markdown, HTML or Pug file. The command will automatically upload the image and then add a reference to it.

The Copy File to Gist command is also available on the editor tab's context menu.

Contributed Commands (Editor Title Bar)

In addition to the commands added to the editor context menu, GistPad also contributes the following commands to the editor's title bar menu (click the ... in the upper right section of an editor window):

Rename File - Allows you to rename the current file.

Contributed Commands (Command Palette)

In addition to the Gists view, this extension also provides the following commands:

GistPad: Delete Gist - Allows you to delete one of your Gists. If you have a Gist workspace open, it will delete that and then close the folder

GistPad: Fork Gist - Forks the currently opened Gist, and then opens it as a virtual workspace.

GistPad: New Gist - Creates a new public Gist, and then opens its associated files. If you'd like to seed the gist with multiple files, you can specify a comma-separated list of names (e.g. foo.txt,bar.js).

GistPad: New Scratch Note - Creates a new "scratch note", which is a file whose name is derived from the GistPad > Scratch Notes: Extension and Gist > Scratch Notes: Format settings.

GistPad: New Secret Gist - Same behavior as the GistPad: New Gist (Public) command, except that it creates a secret Gist.

GistPad: New CodeSwing - Creates a new CodeSwing.

GistPad: New GistLog - Creates a GistLog.

GistPad: Sign In - Sign-in with a GitHub account, in order to view/edit/delete your Gists.

GistPad: Starred Gists - Lists your starred Gists, and then opens the files for the selected one.

`GistPad: Paste Gist File - Allows you to paste the contents of a Gist file into the active editor

Configuration Settings

Gistpad: Tree Icons - Specifies whether to show the gist type icons in the gists tree.

GistPad > Comments: Show Thread - Specifies when to show the comment thread UI whenever you open a Gist file. Can be set to one of the following values:

always: Always display the comment thread whenever you open a Gist file. You can manually collapse it as needed.

never: Never automatically open the comment thread when you open a Gist file. You can manually expand it as needed.

whenNotEmpty (default): Automatically display the comment thread whenever there are actually comments in a Gist file. Otherwise, leave it collapsed.

Gistpad > Images: Paste Format: Specifies the markup format to use when pasting an image into a gist file. Can be set to one of the following values:

markdown (default): Pastes the image reference using Markdown format (e.g. ![image](https://github.com/lostintangent/gistpad/raw/HEAD/link)).

html: Pastes the image reference using HTML format (e.g. <img src="https://github.com/lostintangent/gistpad/raw/HEAD/link" />). Note, when you paste an image into an HTML file, it will always use this format type, regardless what the setting is.

Gistpad > Images: Paste Type: Specifies the method to use when pasting an image into a gist file. Can be set to one of the following values:

file (default): The pasted image is uploaded as a .png to the gist, and a reference is added to file it's pasted into.

base64: The pasted image is base64-encoded and then embedded into the gist file.

GistPad > Scratch Notes: Directory Format - Specifies the moment.js format string to use when generating directories for new scratch notes. Defaults to LL (e.g. March 6, 2020).

GistPad > Scratch Notes: File Format - Specifies the moment.js format string to use when generating new scratch notes. Defaults to LT (e.g. 2:52 PM).

GistPad > Showcase URL - Specifies the URL to use when displaying the showcase entry. This allows teams/classrooms/etc. to create their own showcase and share it amongst themselves.

# data[].attributes.attachment_link.description
GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork and star gists and repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulling anything.

# data[].attributes.attachment_link.readable_text
[If you found any bug or if you have any suggestion, feel free to report or suggest me.]

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

Usage/Shortcuts

1. Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation .

2. Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

3. Press F1 or ctrl+shift+P and type Live Sass: Compile Sass - Without Watch Mode to compile Sass or Scss for one time.

Features

Live SASS & SCSS Compile.

Customizable file location of exported CSS.

Customizable exported CSS Style (expanded, compact, compressed, nested).

Customizable extension name (.css or .min.css).

Quick Status bar control.

Exclude Specific Folders by settings.

Live Reload to browser (Dependency on Live Server extension).

Autoprefix Supported (See setting section)

Installation

Open VSCode Editor and Press ctrl+P, type ext install live-sass.

Settings

All settings are now listed here Settings Docs.

FAQ
All FAQs are now listed here FAQ Docs
Extension Dependency

This extension has dependency on Live Server extension for live browser reload.

What's new ?

Version 3.0.0 (11.07.2018)

Upgrade sass.js library that included fixes for 8 digit Hex code & grid name. [Fixes #39, #40, #78]

Changelog

To check full changelog click here changelog.

LICENSE

This extension is licensed under the MIT License

# data[].attributes.attachment_link.title
Live Sass Compiler - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.

# data[].attributes.attachment_link.title
Prettier - Code formatter - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - VS Code plugin for prettier/prettier

# data[].attributes.body
VueJS for syntax highlighting

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Vue tooling for VS Code

# data[].attributes.attachment_link.readable_text
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Increase your coding productivity with Tabnine's AI code completions! Tabnine is a free powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices - without ever leaving the comfort of VS Code.
Tabnine is trusted by more than a million developers worldwide. Get it now.

Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your keybindings, and other IDE favorites.
Learn more

Track and prioritise tech debt and maintenance issues, straight from your IDE. Bookmark code while you work, organise TODOs and share codebase knowledge with your team. Try it out for free today.

Bored of trawling through the docs? Get JS and TS code examples from documentation and Open Source right in your IDE. Learn more.

Book for VS Code

《Visual Studio Code 权威指南》 ：带你深入浅出 VS Code！

❤️ Contributors

Kudos to @SimonSiefke for rewriting the logic of this extension!

Features

When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag

Usages

Configuration

Add entry into auto-rename-tag.activationOnLanguage to set the languages that the extension will be activated. By default, it is["*"] and will be activated for all languages.

{ "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"] }

The setting should be set with language id defined in VS Code. Taking javascript definition as an example, we need to use javascript for .js and .es6, use javascriptreact for .jsx. So, if you want to enable this extension on .js file, you need to add javascript in settings.json.

Note

From 1.44, VS Code offers the built-in auto update tags support for HTML and Handlebars that can be enabled with the setting editor.linkedEditing. If this setting is enabled, this extension will skip HTML and Handlebars files regardless of the languages listed in auto-rename-tag.activationOnLanguage

Change Log

See Change Log here

Issues

Submit the issues if you find any bug or have any suggestion.

Contribution

Fork the repo and submit pull requests.

# data[].attributes.attachment_link.title
Auto Rename Tag - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Auto rename paired HTML/XML tag

# data[].attributes.attachment_link.readable_text
Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Big thanks to everyone who has used this over the years. If you have found this helped at all, feel free to buy me a coffee! ( https://www.buymeacoffee.com/steoates)

Configuration

filesToScan - Glob for which files in your workspace to scan, defaults to '**/*.{ts, tsx}'

showNotifications - Controls if the annoying notifications should be shown, defaults to false

doubleQuotes - Use double quotes rather than single

spaceBetweenBraces - Difference between import {test} and import { test }

autoComplete - Adds found items to intellisense and automatically imports then

useSemiColon - Use ; at the end of a line e.g Import * from ./app or Import * from ./app; - Default True

# data[].attributes.attachment_link.description
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX. Big thanks to everyone who has used this over the years. If you have found this helped at all, feel free to buy me a coffee!

# data[].attributes.attachment_link.readable_text
Get the Material Design icons into your VS Code.

Sponsored by

File icons

Folder icons

Customize folder color

You can change the color of the default folder icon using the command palette:

or via user settings:

"material-icon-theme.folders.color": "#ef5350",

Folder themes

You can change the design of the folder icons using the command palette:

or via user settings:

"material-icon-theme.folders.theme": "specific"

Custom icon opacity

You can set a custom opacity for the icons:

"material-icon-theme.opacity": 0.5

Custom icon saturation

If colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0:

"material-icon-theme.saturation": 0.5

Custom icon associations

You can customize the icon associations directly in the user settings.

File associations

With the *.[extension] pattern you can define custom file icon associations. For example you could define an icon for *.sample and every file that ends with .sample will have the defined icon. However, not all files with the same file extension always have the same icon. For some specific file names there is a special icon. In order to overwrite all the specific file icons as well, two asterisks must be set instead of one, i.e. **.[extension].

If there's no leading * it will be automatically configured as filename and not as file extension.

"material-icon-theme.files.associations": { "*.ts": "typescript", "**.json": "json", "fileName.ts": "angular" }

Custom SVG icons

It's possible to add custom icons by adding a path to an SVG file which is located relative to the extension's dist folder. However, the restriction applies that the directory in which the custom icons are located must be within the extensions directory of the .vscode folder in the user directory.

For example a custom SVG file called sample.svg can be placed in an icons folder inside of VS Code's extensions folder:

.vscode ┗ extensions ┗ icons ┗ sample.svg

In the settings.json the icon can be associated to a file name or file extension like this:

"material-icon-theme.files.associations": { "fileName.ts": "../../icons/sample" }
Note: The custom file name must be configured in the settings without the file ending .svg as shown in the example above.
Folder associations

The following configuration can customize the folder icons. It is also possible to overwrite existing associations and create nice combinations. For example you could change the folder theme to "classic" and define icons only for the folder names you like.

"material-icon-theme.folders.associations": { "customFolderName": "src", "sample": "dist" }

Custom SVG folder icons

Similar to the files, it is also possible to reference your own SVG icons for folder icons. Here it's important to provide two SVG files: one for the folder if it's closed and another one for the opened state. These two files - let's call them "folder-sample.svg" and "folder-sample-open.svg" - have to be placed into a directory which is relative to the extensions dist folder. This directory has to be somewhere inside of the .vscode/extensions folder.

In our example we place them into an icons folder inside of the .vscode/extensions folder:

.vscode ┗ extensions ┗ icons ┣ folder-sample.svg ┗ folder-sample-open.svg

In the settings.json the folder icons can be associated to a folder name (e.g. "src") like this:

"material-icon-theme.folders.associations": { "src": "../../../../icons/folder-sample" }

Language associations

With the following configuration you can customize the language icons. It is also possible to overwrite existing associations.

"material-icon-theme.languages.associations": { "languageId": "iconName", "json": "json" }

Available language ids:
https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers
You can see the available icon names in the overview above.

One-click activation

After installation or update you can click on the 'Activate'-button to activate the icon theme, if you haven't already. The icons will be visible immediately.

Commands

Press Ctrl-Shift-P to open the command palette and type Material Icons.

Icon sources

Contributors

Would you like to contribute?
Take a look at the contribution guidelines and open a new issue or pull request on GitHub.

# data[].attributes.attachment_link.title
Material Icon Theme - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Get the Material Design icons into your VS Code.

# data[].attributes.headline
Lorem Barnack(inserts Quebec swears in Lorem Ipsum)

# data[].attributes.subject
Lorem Barnack(inserts Quebec swears in Lorem Ipsum)

# data[].attributes.body
Name: Lorem Barnak
Id: hechtaxel.lorem-barnak
Description: Lorem Barnak is a Visual Studio Code extension. It inserts Quebecer swears inside your code like Lorem Ipsum.
Version: 1.2.1
Publisher: HECHT Axel
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=HECHTAxel.lorem-barnak