# data[].attributes.attachment_link.readable_text
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Install

1. Open Extensions sideBar panel in Visual Studio Code and choose the menu options for View → Extensions

2. Search for Peacock

3. Click Install

4. Click Reload, if required

Documentation

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Quick Usage

Let's see Peacock in action!

1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)

2. Press F1 to open the command palette

3. Type Peacock

4. Choose Peacock: Change to a favorite color

5. Choose one of the pre-defined colors and see how it changes your editor

Now enjoy exploring the rest of the features explained in the docs!

Resources

Credits

Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!

Code of Conduct

Code of Conduct.

Problems or Suggestions
Open an issue here
Contributors
Contribution guidelines are located here
Thanks goes to these wonderful people ( emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

# data[].attributes.attachment_link.description
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

# data[].attributes.attachment_link.readable_text
Laravel blade snippets and syntax highlight support for Visual Studio Code.

Suggest Laravel related extension: Laravel Snippets

Screenshot

User Settings

Open Preferences -> Settings

"emmet.triggerExpansionOnTab": true, // enable tab to expanse emmet tags "blade.format.enable": true, // if you would like to enable blade format

Specific settings for blade language

"[blade]": { "editor.autoClosingBrackets": "always" },

Features

Blade syntax highlight

Blade snippets

Emmet works in blade template

Blade formatting

Blade Syntax Hightlight

Auto detected with .blade.php extension

Manually switch language mode to Blade (Ctrl + K, M or ⌘ + K, M)

Laravel Blade Snippets

$loop variable (Laravel v5.3+)

Laravel Helper Snippets for Blade

Blade extensions (register in the boot method of ServiceProvider)

Please file any issues or have a suggestion please tweet me @onecentlin.

Credits

License

Please read License for more information

# data[].attributes.attachment_link.title
Laravel Blade Snippets - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Laravel blade snippets and syntax highlight support for Visual Studio Code.

# data[].attributes.attachment_link.title
Theme - Oceanic Next - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Oceanic Next theme for VSCode + dimmed bg version for better looking UI

# 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.attachment_link.readable_text
Bring icons to your Visual Studio Code ( minimum supported version: 1.40.2)

Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Installation

To install the extension just execute the following command in the Command Palette of Visual Studio Code:

ext install vscode-icons

Some people have reported that they cannot find the extension when they insert the installation command.

If you find yourself in the same position, try:

ext install icons # or ext install "vscode-icons"

Security

vscode-icons utilizes NSRI for its subresources integrity check and protection against code injection.

Usage

Once installed and after reloading vscode, you will be presented with a message to Activate the icons.

In case this doesn't happen, navigate to:

Features

vscode-icons is being shipped with a lot of features, like:

Globalization

vscode-icons uses Crowdin to provide translations for vscode supported languages.

We are looking for translators and proofreaders for all vscode supported languages.

If you'd like to contribute, checkout the translation section.

Contributing

If you like to get involved with the source code, checkout the build section.

For those using Docker checkout the docker section.

On the other hand, if you want to show the world your artistic side, checkout the contributing section.

In any case, please follow our contribution guidelines.

Documentation

In our wiki you can find info, like:

and more.

Credits

Kudos to all contributors that made this extension what it is.

License

The source code is licensed under the MIT license.

The icons are licensed under the Creative Commons - ShareAlike (CC BY-SA) license.

Branded icons are licensed under their copyright license.

Versioning

vscode-icons follows Semantic Versioning 2.0.0.

Change Log

You can checkout all our changes in our change log.

Acknowledgements

We like to express our "Special Thanks" to:

All users that made us their favorite Icons theme. We wouldn't be where we are without you.
Enjoy!

# data[].attributes.attachment_link.title
vscode-icons - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Bring icons to your Visual Studio Code ( minimum supported version: 1.40.2 ) Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.

# data[].attributes.attachment_link.readable_text
What has changed since version 1?

This extension does not have HTML Intellisense. If you need HTML Intellisense (which can be quite useful), please download my other Twig Language extension: https://github.com/mblode/vscode-twig-language.

I have created a new extension to fix the issues that I (and all of you) were having with file association, commenting and VS Code UI issues.

Simply add these lines to your VS Code settings to get emmet working and also to associate HTML files as twig syntax.

"files.associations": { "*.html": "twig" }, "emmet.includeLanguages": { "twig": "html" },

Installation

Install through Visual Studio Code extensions. Search for Twig Language 2
Visual Studio Code Market Place: Twig Language 2
Documentation

Twig Language 2 is a Visual Studio Code extension that provides snippets, syntax highlighting, hover, and formatting for the Twig file format.

Twig syntax highlighting and language support

This extension provides language support for the Twig syntax.

Code formatter/beautifier for Twig files

Using PrettyDiff, this extension implements the only working code formatter for Twig files in VS Code.

Information about Twig code on hover

VS Code Twig language 2 shows information about the symbol/object that's below the mouse cursor when you hover within Twig files.

Craft CMS/Twig code snippets

Adds a set of Craft CMS/Twig code snippets to use in your Twig templates.

Generic Triggers

 do {% do ... %} extends {% extends 'template' %} from {% from 'template' import 'macro' %} import {% import 'template' as name %} importself {% import _self as name %} inc, include {% include 'template' %} incp {% include 'template' with params %} inckv {% include 'template' with { key: value } %} use {% use 'template' %} autoescape {% autoescape 'type' %}...{% endautoescape %} block, blockb {% block name %} ... {% endblock %} blockf {{ block('...') }} embed {% embed "template" %}...{% endembed %} filter, filterb {% filter name %} ... {% endfilter %} macro {% macro name(params) %}...{% endmacro %} set, setb {% set var = value %} spaceless {% spaceless %}...{% endspaceless %} verbatim {% verbatim %}...{% endverbatim %} if, ifb {% if condition %} ... {% endif %} ife {% if condition %} ... {% else %} ... {% endif %} for {% for item in seq %} ... {% endfor %} fore {% for item in seq %} ... {% else %} ... {% endfor %} else {% else %} endif {% endif %} endfor {% endfor %} endset {% endset %} endblock {% endblock %} endfilter {% endfilter %} endautoescape {% endautoescape %} endembed {% endembed %} endfilter {% endfilter %} endmacro {% endmacro %} endspaceless {% endspaceless %} endverbatim {% endverbatim %}

Craft Triggers

asset craft.assets.one() assets, assetso craft.assets loop categories, categorieso craft.categories loop entries, entrieso craft.entries loop feed craft.app.feeds.getFeedItems loop t | t replace | replace('search', 'replace') replacex | replace('/(search)/i', 'replace') split | split('\n') tags, tagso craft.tags loop users, userso craft.users loop cache {% cache %}...{% endcache %} children {% children %} exit {% exit 404 %} ifchildren {% ifchildren %}...{% endifchildren %} css {% css %}...{% endcss %} registercssfile {% do view.registerCssFile("/resources/css/global.css") %} js {% js %}...{% endjs %} registerjsfile {% do view.registerJsFile("/resources/js/global.js") %} matrix, matrixif Basic Matrix field loop using if statements matrixifelse Basic Matrix field loop using if/elseif matrixswitch Basic Matrix field loop using switch nav {% nav item in items %}...{% endnav %} paginate Outputs example of pagination and prev/next links redirect {% redirect 'login' %} requirelogin {% requireLogin %} requirepermission {% requirePermission "spendTheNight" %} switch {% switch variable %}...{% endswitch %} csrf {{ csrfInput() }} endbody {{ endBody() }} head {{ head() }} getparam craft.app.request.getParam() getbodyparam craft.app.request.getBodyParam() getqueryparam craft.app.request.getQueryParam() getsegment craft.app.request.getSegment() case {% case "value" %} endcache {% endcache %} endifchildren {% endifchildren %} endcss {% endcss %} endjs {% endjs %} endnav {% endnav %} ceil ceil() floor floor() max max() min min() shuffle shuffle() random random() round num | round() url, urla url('path'), url('path', params, 'http', false) rss Example rss feed dd <pre>{{ dump() }}</pre>{% exit %} dump <pre>{{ dump() }}</pre>

Example Forms

 formlogin Example login form formuserprofile Example user profile form formuserregistration Example user registration form formforgotpassword Example forgot password form formsetpassword Example set password form formsearch Example search form formsearchresults Example search form results

Reference Hints

 info All craft.assets properties and template tags info All craft.crategories properties and template tags info All craft.config properties and template tags info All craft.entries properties and template tags info All craft.feeds properties and template tags info All craft.fields properties and template tags info All craft.globals properties and template tags info All craft.request properties and template tags info All craft.sections properties and template tags info All craft.session properties and template tags info All craft.tags properties and template tags info All craft.users properties and template tags info All craft globals (site info, date, users, template tags)

Author

👤 Matthew Blode

🤝 Contributing

Contributions, issues and feature requests are welcome !
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you !

📝 License

Copyright © 2019 Matthew Blode.
This project is MIT licensed.

# data[].attributes.attachment_link.title
Twig Language 2 - Visual Studio Marketplace

# data[].attributes.attachment_link.description
This extension does not have HTML Intellisense. If you need HTML Intellisense (which can be quite useful), please download my other Twig Language extension: https://github.com/mblode/vscode-twig-language. I have created a new extension to fix the issues that I (and all of you) were having with file association, commenting and VS Code UI issues.

# data[].attributes.attachment_link.readable_text
The Remote Development extension pack allows you to open any folder in a container, on a remote machine, or in the Windows Subsystem for Linux (WSL) and take advantage of VS Code's full feature set. Since this lets you set up a full-time development environment anywhere, you can:

Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.

Quickly swap between different, separate development environments and make updates without worrying about impacting your local machine.

Help new team members / contributors get productive quickly with easily spun up, consistent development containers.

Take advantage of a Linux based tool-chain right from the comfort of Windows from a full-featured development tool.

No source code needs to be on your local machine to gain these benefits since Remote Development runs commands and extensions directly on the remote machine.

This Remote Development extension pack includes three extensions:

Remote - SSH - Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts.

Remote - Containers - Work with a separate toolchain or container based application by opening any folder mounted into or inside a container.

Remote - WSL - Get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux.

The Remote SSH extension at work:

System Requirements

Local: See the minimum requirements for VS Code. For Windows, Remote - Containers requires Windows 10 Pro/Enterprise or Home 2004+ with WSL2 enabled due to Docker requirements. See installation steps for additional details for each extension.
Remote host / container / WSL support:

x86_64 / ARMv8l (AArch64) / ARM7l (AArch32) Debian/Raspbian 9+, Ubuntu 16.04+, Ubuntu IoT 18.04+, CentOS / RHEL 7+ SSH hosts, containers, or WSL distributions.

x86_64 Alpine Linux 3.7+ containers or WSL distributions (no SSH support yet).

Additional SSH support:
Other glibc based Linux SSH Hosts, containers, or WSL distributions may work if they have needed prerequisites.

Some extensions installed on ARMv7l (AArch32) and ARMv8l (AArch64) devices may not work due to the use of x86 native code in the extension. Similarly, extensions installed in Alpine Linux containers or the Alpine WSL distribution may not work due to glibc dependencies in native code inside the extension. See the Remote Development and Linux article for details.

Installation

1. Install VS Code or VS Code Insiders and this extension pack. On Windows, be sure to check Add to PATH when asked to Select Additional Tasks during installation.

2. Remote - SSH: Install an OpenSSH compatible SSH client.

3. Remote - WSL: Install the Windows Subsystem for Linux along with your preferred Linux distribution. (Note that WSL2 support is experimental.)

4. Remote - Containers: Install and configure Docker for your operating system.
Windows / macOS:

1. Install Docker Desktop 2.0+ for Mac/Windows. Windows 10 Home (2004+) requires Docker Desktop 2.2+ and the WSL2 back-end. (Docker Toolbox is not supported.)

2. If not using WSL2 on Windows, right-click on the Docker task bar item, select Settings / Preferences and update Resources > File Sharing with any locations your source code is kept. See tips and tricks for troubleshooting.

3. To enable the Windows WSL2 back-end: Right-click on the Docker taskbar item and select Settings. Check Use the WSL2 based engine and verify your distribution is enabled under Resources > WSL Integration.

Linux:

1. Follow the official install instructions for Docker CE/EE 18.06+. If you use Docker Compose, follow the Docker Compose 1.21+ install directions.

2. Add your user to the docker group by using a terminal to run: sudo usermod -aG docker $USER Sign out and back in again so this setting takes effect.

Working with Git? Here are three tips to consider:

If you are working with the same repository folder in Windows and WSL or a container, be sure to set up consistent line endings. See tips and tricks to learn how.

In WSL, you can also avoid passwords by configuring WSL to use the Windows Git credential manager. See tips and tricks to for details.

For containers, if you clone using a Git credential manager, your container should already have access to your credentials! If you use SSH keys, you can also opt-in to sharing them. See Sharing Git credentials with your container for details.

Getting started

Check out one of the following quick starts to get going.

Available commands

Another way to learn what you can do with the Remote Development extensions is to browse the commands each of them provide. Press F1 to bring up the Command Palette and type in Remote- for a full list of commands.

You can also click on the Remote "Quick Access" status bar item in the lower left corner to get a list of the most common commands.

For more information, please see the extension pack documentation.

Release Notes

While an optional install, the Remote Development extensions release with VS Code. VS Code release notes include a summary of changes with a link to detailed release notes.

As with VS Code itself, the extensions update during a development iteration with changes that are only available in VS Code Insiders Edition.

Questions, Feedback, Contributing

Have a question or feedback?

Or connect with the community...

Telemetry

The Visual Studio Code Remote Development extension pack and its related extensions collect telemetry data to help us build a better experience working remotely from VS Code. We only collect data on which commands are executed. We do not collect any information about image names, paths, etc. The extension respects the telemetry.enableTelemetry setting which you can learn more about in the Visual Studio Code FAQ.

License

By downloading and using the Visual Studio Remote Development extension pack and its related components, you agree to the product license terms and privacy statement.

# data[].attributes.attachment_link.title
Remote Development - Visual Studio Marketplace

# data[].attributes.attachment_link.description
The Remote Development extension pack allows you to open any folder in a container, on a remote machine, or in the Windows Subsystem for Linux (WSL) and take advantage of VS Code's full feature set.

# data[].attributes.attachment_link.readable_text
PHPStan extension for VSCode.

Analyzes your PHP project manually or on every file change with PHPStan and shows the result in the VSCode problems tab.

Features

Activates the extension if it detects phpstan.neon/phpstan.neon.dist file on the project root dir.

Runs PHPStan analyse on every PHP file change.

Shows all PHPStan problems of the whole project.

Parses PHPStan config for file watching.

Commands:

phpstan.showOutput: show output.

phpstan.analyse: analyse.

phpstan.analyseCurrentPath: analyse current path.
Also available in the explorer context menu.

phpstan.pauseFileWatcher: pause file watcher.

phpstan.resumeFileWatcher: resume file watcher.

phpstan.toggleFileWatcher: toggle file watcher.

phpstan.clearProblems: clear problems.

phpstan.clearCache: clear cache.

Usage

1. Install PHPStan extension.

2. Provide a phpstan.neon file on the project root dir.

3. Install PHPStan on the project.

composer require phpstan/phpstan --dev

Contributing

To contribute to the project, follow these steps:

1. Fork this repository.

2. Create a branch: git checkout -b <branch_name>.

3. Make your changes and check them: npm run prepare.

4. Commit your changes: git commit -m '<commit_message>'.

5. Push to the original branch: git push origin <branch_name>.

6. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.

License

Distributed under the MIT License. See LICENSE for more information.

# data[].attributes.attachment_link.description
PHPStan extension for VSCode. Analyzes your PHP project manually or on every file change with PHPStan and shows the result in the VSCode problems tab. Activates the extension if it detects phpstan.neon/phpstan.neon.dist file on the project root dir. Runs PHPStan analyse on every PHP file change. Shows all PHPStan problems of the whole project.

# data[].attributes.attachment_link.readable_text
PHP Namespace Resolver can import and expand your class. You can also sort your imported classes by line length or in alphabetical order.

Demo

Commands

Search these commands by the title on command palette.

[ { "title": "Import Class", "command": "namespaceResolver.import" }, { "title": "Import All Classes", "command": "namespaceResolver.importAll" }, { "title": "Expand Class", "command": "namespaceResolver.expand" }, { "title": "Sort Imports", "command": "namespaceResolver.sort" }, { "title": "Highlight Not Imported Classes", "command": "namespaceResolver.highlightNotImported" }, { "title": "Highlight Not Used Classes", "command": "namespaceResolver.highlightNotUsed" }, { "title": "Generate namespace for this file", "command": "namespaceResolver.generateNamespace" } ]

Settings

You can override these default settings according to your needs.

{ "namespaceResolver.exclude": "**/node_modules/**", // Exclude glob pattern while finding files "namespaceResolver.showMessageOnStatusBar": false, // Show message on status bar instead of notification box "namespaceResolver.autoSort": true, // Auto sort after imports "namespaceResolver.sortOnSave": false, // Auto sort when a file is saved "namespaceResolver.sortAlphabetically": false, // Sort imports in alphabetical order instead of line length "namespaceResolver.sortNatural": false, // Sort imports using a 'natural order' algorithm "namespaceResolver.leadingSeparator": true, // Expand class with leading namespace separator "namespaceResolver.highlightOnSave": false, // Auto highlight not imported and not used when a file is saved "namespaceResolver.highlightOnOpen": false // Auto highlight not imported and not used when a file is opened }

Keybindings

You can override these default keybindings on your keybindings.json.

[ { "command": "namespaceResolver.import", "key": "ctrl+alt+i", "when": "editorTextFocus" }, { "command": "namespaceResolver.importAll", "key": "ctrl+alt+a", "when": "editorTextFocus" }, { "command": "namespaceResolver.expand", "key": "ctrl+alt+e", "when": "editorTextFocus" }, { "command": "namespaceResolver.sort", "key": "ctrl+alt+s", "when": "editorTextFocus" }, { "command": "namespaceResolver.highlightNotImported", "key": "ctrl+alt+n", "when": "editorTextFocus" }, { "command": "namespaceResolver.highlightNotUsed", "key": "ctrl+alt+u", "when": "editorTextFocus" }, { "command": "namespaceResolver.generateNamespace", "key": "ctrl+alt+g", "when": "editorTextFocus" } ]

Author

License

MIT License.

Copyright (c) 2017 Mehedi Hassan

# data[].attributes.attachment_link.title
PHP Namespace Resolver - Visual Studio Marketplace

# data[].attributes.attachment_link.description
PHP Namespace Resolver can import and expand your class. You can also sort your imported classes by line length or in alphabetical order. Search these commands by the title on command palette.

# data[].attributes.attachment_link.readable_text
Fast generator of getters and setters for your PHP class properties.

Features

This extension allows you to quickly generate getters and setters with one single command.

Features:

Detects indentation. No matter if you use spaces or tabs.

Uses configuration options to show doc blocks as you like them.

Generates method's descriptions based on the property description.

Detects valid type hints to use them in the setter.

It adds 3 comands to vscode's command palette:

Insert PHP getter.

Insert PHP setter.

Insert PHP getter and setter.

You can also access commands from contextual menu when clicking on a class property:

Extension Settings

This extension contributes the following settings:

phpGettersSetters.spacesAfterParam: Number of spaces to insert between @param tag and variable name in doc blocks. Default: 2

phpGettersSetters.spacesAfterParamVar: Number of spaces to insert after the variable name in the @param tag line. Default: 2

phpGettersSetters.spacesAfterReturn: Number of spaces to insert after the @return tag. Default: 2

phpGettersSetters.redirect: Redirect editor to generated functions after generating them? Default: true

phpGettersSetters.templatesDir: Folder where custom templates are stored

phpGettersSetters.getterTemplate: File to use as template for getters. Default: getter.js

phpGettersSetters.setterTemplate: File to use as template for setters. Default :setter.js

Custom Templates

By default this extension will use a custom function to generate your getters & setters but you can fully customise the markup used to generate them. By default templates are stored in:

Linux: ~/.config/Code/User/phpGettersSetters

OSX: ~/Library/Application Support/Code/User/phpGettersSetters

Windows: Users\{User}\AppData\Roaming\Code\User\phpGettersSetters

You can also set a custom templates dir entering a custom folder in phpGettersSetters.templatesDir setting.

Template Literals are used for templating because the flexibility they provide. With them you can easily create a custom template with no knowledge and also invest some time for complex things. For advanced usage you will have to google about template literals but here are 2 sample templates.

Sample getter.js template:

module.exports = (property) => ` /** * ${property.getterDescription()} * * @return ${property.getType() ? property.getType() : 'mixed'} */ public function ${property.getterName()}() { return $this->${property.getName()}; } `

Sample setter.js template:

module.exports = (property) => ` /** * ${property.setterDescription()} * * @param ${property.getType() ? property.getType() : 'mixed'} \$${property.getName()} ${property.getDescription() ? property.getDescription() : ''} * * @return self */ public function ${property.setterName()}(${property.getTypeHint() ? property.getTypeHint() + ' ' : '' }\$${property.getName()}) { $this->${property.getName()} = \$${property.getName()}; return $this; } `

As you can see a Property object is passed to templates so you can access any public method there. I also like the idea of adding more stuff as users find limits. Open an issue if you find something you cannot achieve.

Release Notes

Relevant releases:

1.2.0

Added support for custom templates

1.1.0

Added support for multiple cursor

1.0.5

Fixed No property found when switching between editors. Thanks for reporting Carlos Alfonso Pérez Rivera!

1.0.3

1.0.0

# data[].attributes.attachment_link.title
PHP Getters & Setters - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Fast generator of getters and setters for your PHP class properties. This extension allows you to quickly generate getters and setters with one single command. Features: Detects indentation. No matter if you use spaces or tabs. Uses configuration options to show doc blocks as you like them.

# data[].attributes.attachment_link.readable_text
PHP code intelligence for Visual Studio Code.

Intelephense is a high performance PHP language server packed full of essential features for productive PHP development.

Fast camel/underscore case code completion (IntelliSense) for document, workspace and built-in symbols and keywords with automatic addition of use declarations.

Detailed signature (parameter) help for document, workspace and built-in constructors, methods, and functions.

Rapid workspace wide go to definition support.

Workspace wide find all references.

Fast camel/underscore case workspace symbol search.

Full document symbol search that also powers breadcrumbs and outline UI.

Multiple diagnostics for open files via an error tolerant parser and powerful static analysis engine.

Lossless PSR-12 compatible document/range formatting. Formats combined HTML/PHP/JS/CSS files too.

Embedded HTML/JS/CSS code intelligence.

Detailed hover with links to official PHP documentation.

Smart highlight of references and keywords.

Reads PHPStorm metadata for improved type analysis and suggestions.

Easy rename of symbols. When appropriate, files/folders are automatically renamed too. PREMIUM

Accurate code folding of definitions, blocks, use declarations, heredoc, comments, and custom regions. PREMIUM

Quickly find all implementations of interfaces and abstract classes and associated methods. PREMIUM

Fast go to type definition of typed variables and parameters. PREMIUM

Fast go to declaration for methods implementing an interface or abstract method declaration. PREMIUM

Configurable auto PHPDoc creation that infers return types and identifies thrown exceptions. PREMIUM

Syntax tree driven smart select to intelligently expand/shrink selection. PREMIUM

Helpful code actions to import symbols, add PHPDoc, and implement all abstract methods. PREMIUM

Licence

Purchase a licence at https://intelephense.com to access PREMIUM features. Licence keys grant a single user access to all current and future premium features on multiple devices forever. Licence keys must be activated (automatically) via https before use. Features not marked as PREMIUM are free and always will be free.

The language server client (vscode-intelephense) is open source and licensed under the MIT licence.

The language server (intelephense) is proprietary. Please see here for details.

Quick Start

1. Disable the built-in VSCode PHP Language Features.

Go to Extensions.

Search for @builtin php

Disable PHP Language Features. Leave PHP Language Basics enabled for syntax highlighting.

Note that other (3rd party) PHP extensions which provide similar functionality should also be disabled for best results.

2. Add glob patterns for non standard php file extensions to the files.associations setting.

For example: "files.associations": { "*.module": "php" }.

3. Optionally purchase and enter your licence key by opening the command pallete -- ctrl + shift + p -- and searching for Enter licence key.

Further configuration options are available in the intelephense section of settings.

Support

Found a bug? Got a feature request? Create an issue.

Acknowledgements

A big thank you to supporters who have bought a premium licence and have enabled the continued development and maintenance of this extension.

Intelephense uses the following open source libraries. Please see the following links for source code and licences.

# data[].attributes.attachment_link.title
PHP Intelephense - Visual Studio Marketplace

# data[].attributes.attachment_link.description
PHP code intelligence for Visual Studio Code. Intelephense is a high performance PHP language server packed full of essential features for productive PHP development. Fast camel/underscore case code completion (IntelliSense) for document, workspace and built-in symbols and keywords with automatic addition of use declarations.

# data[].attributes.attachment_link.readable_text
Basic PHP DocBlocking extension.

We now have a set of unit tests and some full coverage on the parsing of signatures as well as continuous integration. This should ensure the extension remains stable as development progresses.

Features

Completion snippet after /** above a class, function, class property

Continuation of DocBlock when pressing enter when in a DocBlock

Completion of DocBlock tags such as @param, @return, @throws

Inferring of param and return types from signatures

Configuration of template for each type of docblock completion

Requirements

This extension has no dependencies.

Extension Settings

This extension contributes the following settings:

php-docblocker.gap: set to false to disable the gap between the description and tags

php-docblocker.returnGap: set to true to add a gap between the param and return tags

php-docblocker.returnVoid: set to false to turn off the automatic void return type when it can't be determined

php-docblocker.extra: an array of extra tags to add to each DocBlock (These can include tabstops and snippet variables)

php-docblocker.useShortNames: Whether we should use short type names. e.g. bool or boolean

php-docblocker.qualifyClassNames: When adding type hints for class names search namespace use statements and qualify the class

php-docblocker.alignParams: set to true to align params vertically and add appropriate spaces after param names

php-docblocker.alignReturn: set to true to align return vertically with above params statements, this setting requires align params to also be active

php-docblocker.varDescription: set to true to include a description placeholder for @var completions. If you specify a string this will be the default placeholder text

php-docblocker.paramDescription: set to true to include a description placeholder for @param completions. If you specify a string this will be the default placeholder text

php-docblocker.returnDescription: set to true to include a description placeholder for @return completions. If you specify a string this will be the default placeholder text

php-docblocker.author: An object containing your default author tag settings

php-docblocker.functionTemplate: See below for how to set up docblock templates

php-docblocker.propertyTemplate: See below for how to set up docblock templates

php-docblocker.classTemplate: See below for how to set up docblock templates

Templating

If you want more control over the order or gap settings on your docblocks or you want different things for properties vs class templates you can start customising the template configuration objects. These are the config options functionTemplate, propertyTemplate and classTemplate.

Default set up for function

The below is the default set up for a function. The order of the keys represents the output order. There are no specific options in each config option per key to add additional control.

 { "message": {}, "param": {}, "return": {}, "extra": {} }

Supported template keys

Supported template config options

Configured function template example

In the example below we have added some gap configuration and removed the return tag for our template as well as changing the default order. This means we'll never have a @return tag and extra comes before the params. It's also worth pointing out that the gapAfter in the message is the same as setting the gap config option in the main config to true.

 { "message": { "gapAfter": true }, "extra": {}, "param": { "gapBefore": true }, }

Configured function with extra content and placeholders

The example below won't have a return tag and will add in an author tag with correct placeholders depending on how many options you have. You can put in placeholders by using ### in place of the tab stop number and it will be calculated at generation time.

 { "message": { "gapAfter": true }, "param": { "gapBefore": true }, "author": { "content": "@author ${###:Neil Brayfield} <${###:neil@test.com}>" } }

Please see below for a list of supported tags and their snippets. These tags are available within a DocBlock and can be triggered by typing @ then another characted (Provided your vscode settings allow).

@afterClass

@afterClass

@backupGlobals

@backupGlobals ${1:switch}

@backupStaticAttributes

@backupStaticAttributes ${1:switch}

@beforeClass

@beforeClass

@category

@category ${1:description}

@codeCoverageIgnore

@codeCoverageIgnore

@codeCoverageIgnoreEnd

@codeCoverageIgnoreEnd

@codeCoverageIgnoreStart

@codeCoverageIgnoreStart

@copyright

@copyright ${1:2021} ${2:Name}

@coversDefaultClass

@coversDefaultClass ${1:fqcn}

@coversNothing

@coversNothing

@dataProvider

@dataProvider ${1:methodName}

@depends

@depends ${1:methodName}

@deprecated

@deprecated ${1:version}

@doesNotPerformAssertions

@doesNotPerformAssertions

@example

@example ${1:location} ${2:description}

@filesource

@filesource

@ignore

@ignore ${1:description}

@inheritDoc

@inheritDoc

@internal

@internal ${1:description}

@method

@method ${1:mixed} ${2:methodName()}

@package

@package ${1:category}

@param

@param ${1:mixed} $${2:name}

@preserveGlobalState

@preserveGlobalState ${1:switch}

@property

@property ${1:mixed} $${2:name}

@property-read

@property-read ${1:mixed} $${2:name}

@property-write

@property-write ${1:mixed} $${2:name}

@requires

@requires ${1:mixed}

@runInSeparateProcess

@runInSeparateProcess

@runTestsInSeparateProcesses

@runTestsInSeparateProcesses

@source

@source ${1:location} ${2:description}

@subpackage

@subpackage ${1:category}

@testdox

@testdox ${1:description}

@testWith

@testWith ${1:elements}

@throws

@throws ${1:Exception}

@uses

@uses ${1:MyClass::function} ${2:Name}

@psalm-var (Psalm)

@psalm-var ${1:mixed}

@psalm-param (Psalm)

@psalm-param ${1:mixed} $${2:name}

@psalm-return (Psalm)

@psalm-return ${1:mixed}

@psalm-suppress (Psalm)

@psalm-suppress ${1:IssueName}

@psalm-assert (Psalm)

@psalm-assert ${1:[assertion]} $${2:var}

@psalm-assert-if-true (Psalm)

@psalm-assert-if-true ${1:[assertion]} $${2:var}

@psalm-assert-if-false (Psalm)

@psalm-assert-if-false ${1:[assertion]} $${2:var}

@psalm-ignore-nullable-return (Psalm)

@psalm-ignore-nullable-return

@psalm-ignore-falsable-return (Psalm)

@psalm-ignore-falsable-return

@psalm-seal-properties (Psalm)

@psalm-seal-properties

@psalm-internal (Psalm)

@psalm-internal ${1:Namespace}

@psalm-readonly (Psalm)

@psalm-readonly

@psalm-mutation-free (Psalm)

@psalm-mutation-free

@psalm-external-mutation-free (Psalm)

@psalm-external-mutation-free

@psalm-immutable (Psalm)

@psalm-immutable

@psalm-pure (Psalm)

@psalm-pure

@phan-suppress (Phan)

@phan-suppress ${1:IssueName}

@suppress (Phan)

@suppress ${1:IssueName}

@phan-suppress-current-line (Phan)

@phan-suppress-current-line ${1:IssueName, IssueName}

@phan-suppress-next-line (Phan)

@phan-suppress-next-line ${1:IssueName, IssueName}

@phan-file-suppress (Phan)

@phan-file-suppress ${1:IssueName}

@override (Phan)

@override

@inherits (Phan)

@inherits

@phan-assert (Phan)

@phan-assert ${1:[assertion]} $${2:var}

@phan-assert-true-condition (Phan)

@phan-assert-true-condition ${1:[assertion]} $${2:var}

@phan-assert-false-condition (Phan)

@phan-assert-false-condition ${1:[assertion]} $${2:var}

@phan-closure-scope (Phan)

@phan-closure-scope

@phan-read-only (Phan)

@phan-read-only

@phan-write-only (Phan)

@phan-write-only

@phan-pure (Phan)

@phan-pure

@phan-phan-output-reference (Phan)

@param ${1:mixed} $${2:name} @phan-phan-output-reference

@phan-phan-ignore-reference (Phan)

@param ${1:mixed} $${2:name} @phan-phan-ignore-reference

@phan-var (Phan)

@phan-var ${1:mixed}

@phan-param (Phan)

@phan-param ${1:mixed} $${2:name}

@phan-return (Phan)

@phan-return ${1:mixed}

@phan-return (Phan)

@phan-return ${1:mixed}

@phan-method (Phan)

@phan-method ${1:mixed} ${2:methodName()}

@template (Phan)

@template

Future development

It probably wouldn't be too much work to expand this to work with multiple languages. If this is something you are interested in, please pop over to github and add your feedback to the issue neild3r/vscode-php-docblocker#17.

Please also feel free to suggest new configuration options, I appreciate at this time the extension is mostly set up for my own DocBlock style requirements but more options could be added for other use cases.

# data[].attributes.attachment_link.title
PHP DocBlocker - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Basic PHP DocBlocking extension. We now have a set of unit tests and some full coverage on the parsing of signatures as well as continuous integration. This should ensure the extension remains stable as development progresses.

# data[].attributes.attachment_link.readable_text
A simple extension to make indentation more readable

If you use this plugin a lot, please consider a donation:

This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.

Note: This will also work with vscode-web (github.dev) since version 8.0.0.

Get it here: Visual Studio Code Marketplace

It uses the current editor window tab size and can handle mixed tab + spaces (not recommended). In addition, it visibly marks lines where the indentation is not a multiple of the tab size. The visualization can help to find problems with the indentation in some situations.

Configuration

Although you can use it as it is, there is the possibility to configure some aspects of the extension:

 // For which languages indent-rainbow should be activated (if empty it means all). "indentRainbow.includedLanguages": [] // for example ["nim", "nims", "python"] // For which languages indent-rainbow should be deactivated (if empty it means none). "indentRainbow.excludedLanguages": ["plaintext"] // The delay in ms until the editor gets updated. "indentRainbow.updateDelay": 100 // 10 makes it super fast but may cost more resources
Notice: Defining both includedLanguages and excludedLanguages does not make much sense. Use one of both!
You can configure your own colors by adding and tampering with the following code:

 // Defining custom colors instead of default "Rainbow" for dark backgrounds. "indentRainbow.colors": [ "rgba(255,255,64,0.07)", "rgba(127,255,127,0.07)", "rgba(255,127,255,0.07)", "rgba(79,236,236,0.07)" ] // The indent color if the number of spaces is not a multiple of "tabSize". "indentRainbow.errorColor": "rgba(128,32,32,0.6)" // The indent color when there is a mix between spaces and tabs. // To be disabled this coloring set this to an empty string. "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)"

Notice: errorColor was renamed from error_color in earlier versions.

Light mode (new since v8.3.0)

There is a (new) alternate mode that uses lines (with a customizable width) instead of the background coloring of the whitespace. Here is an example configuration I like:

 // Using the light mode "indentRainbow.indicatorStyle": "light", // we use a simple 1 pixel wide line "indentRainbow.lightIndicatorStyleLineWidth": 1, // the same colors as above but more visible "indentRainbow.colors": [ "rgba(255,255,64,0.3)", "rgba(127,255,127,0.3)", "rgba(255,127,255,0.3)", "rgba(79,236,236,0.3)"

For this addition, a big thank you goes to Christian Hoock wk1. He also added the editor window reload on config changes.

Hiding error highlighting

Skip error highlighting for RegEx patterns. For example, you may want to turn off the indent errors for JSDoc's valid additional space (disabled by default), or comment lines beginning with //

 // Example of regular expression in JSON (note double backslash to escape characters) "indentRainbow.ignoreLinePatterns" : [ "/[ \t]* [*]/g", // lines begining with <whitespace><space>* "/[ \t]+[/]{2}/g" // lines begininning with <whitespace>// ]

Skip error highlighting for some or all languages. For example, you may want to turn off the indent errors for markdown and haskell (which is the default)

 "indentRainbow.ignoreErrorLanguages" : [ "markdown", "haskell" ]

If error color is disabled, indent colors will be rendered until the length of rendered characters (white spaces, tabs, and other ones) is divisible by tabsize. Turn on this option to render white spaces and tabs only.

 "indentRainbow.colorOnWhiteSpaceOnly": true // false is the default

Build with:

npm install npm run vscode:prepublish

Running npm run compile makes the compiler recompile on file change.

# data[].attributes.attachment_link.title
indent-rainbow - Visual Studio Marketplace

# data[].attributes.attachment_link.description
If you use this plugin a lot, please consider a donation: This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.

# data[].attributes.attachment_link.title
GitHub Sharp Theme - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - A GitHub inspired color theme for VSCode code and interface

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Support for dotenv file syntax

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Flutter support and debugger for Visual Studio Code.

# data[].attributes.attachment_link.readable_text
Beautiful syntax and scoped snippets for perfectionists with deadlines

Usage

Configure you file association for Django HTML in the Language Mode menu or drop this in your settings for more precision:

"files.associations": { "**/*.html": "html", "**/templates/**/*.html": "django-html", "**/templates/**/*": "django-txt", "**/requirements{/**,*}.{txt,in}": "pip-requirements" },

Emmet enthusiasts should have this to their configuration as well:

"emmet.includeLanguages": {"django-html": "html"},

Dealing with django.po files? Consider installing the gettext extension.

Manage GitHub PRs & GitLab MRs and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Features

Go to definition in templates

Ctrl-click or press F12 on the template path in a include or extends tag to jump to this template

Improved syntax

Adds the filetype django-html

Adds the filetype django-txt for email templates.

Better syntax with more operators and default keywords:

Known default tags and filters

Known templatetags namespace from contrib in the {% load %} tag

Known keywords in tags, like: as, asvar, with, trimmed...

Syntax highlighting everywhere in your HTML document:

In the HTML tag itself"

In the id, class or any attribute

In inline CSS or Javascript code

Snippets

No unnecessary new lines

Support for selected text (when inserting snippet from the menu)

Support for copied text

Contributing

Issues

Something odd? New feature request? Please create an issue on Github.

Setup

git clone https://github.com/vscode-django/vscode-django cd vscode-django npm install code .

It's better to have TSlint installed.

Launching the extension debugger

Make sure you have this snippet in .vscode/launch.json:

{ "version": "0.2.0", "configurations": [ { "name": "Extension", "type": "extensionHost", "request": "launch", "runtimeExecutable": "${execPath}", "args": [ "--extensionDevelopmentPath=${workspaceFolder}" ] } ] }

Press F5 or click on Debug then Start (▶️) to launch the extension host window.

Hack around

Press Ctrl + Shift + F5 or 🔄 to reload.

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Beautiful syntax and scoped snippets for perfectionists with deadlines

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, 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.description
Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

# data[].attributes.attachment_link.readable_text
View and search git log along with the graph and details.

View a previous copy of the file.

View and search the history

View the history of one or all branches (git log)

View the history of a file

View the history of a line in a file (Git Blame).

View the history of an author

Compare:

Compare branches

Compare commits

Compare files across commits

Miscellaneous features:

Github avatars

Cherry-picking commits

Create Tag

Create Branch

Reset commit (soft and hard)

Reverting commits

Create branches from a commits

View commit information in a treeview (snapshot of all changes)

Merge and rebase

Open the file to view the history, and then Press F1 and select/type "Git: View History", "Git: View File History" or "Git: View Line History".

Available Commands

View Git History (git log) (git.viewHistory)

View File History (git.viewFileHistory)

View Line History (git.viewLineHistory)

Keyboard Shortcuts

You can add keyboard short cuts for the above commands by following the directions on the website customization documentation.

NOTE: The file for which the history is to be viewed, must already be opened.

Source
GitHub
Big thanks to ole

License
MIT

# data[].attributes.attachment_link.description
View and search git log along with the graph and details. View a previous copy of the file. View and search the history View the history of one or all branches (git log) View the history of a file View the history of a line in a file (Git Blame).

# data[].attributes.attachment_link.title
Bootstrap 5 & Font Awesome Snippets - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Code snippets for Bootstrap 5

# data[].attributes.attachment_link.title
Babel JavaScript - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - VSCode syntax highlighting for today’s JavaScript

# data[].attributes.attachment_link.readable_text
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Angular development.

See the CHANGELOG for the latest changes

I am often asked, "What are your favorite VS Code extensions for Angular?". I decided it was time to share them via an extension pack.

Introducing my Angular Essentials extension pack for VS Code. By installing this extension pack you get a set of great extensions that are helpful with Angular development. You can check out the initial list below.

As web tools evolve, the usefulness of extensions come and go. I reserve the right to update the extension pack's contents up to my own discretion.

Recommended Settings

Here are some of my recommended settings. These are optional, but I get asked a lot for them, so here they are.

Editor settings

 "editor.autoIndent": "full", "editor.codeLens": false, "editor.cursorBlinking": "solid", "editor.cursorSmoothCaretAnimation": true, "editor.cursorStyle": "line", "editor.fontSize": 16, "editor.fontFamily": "Dank Mono, Operator Mono, Fira Code, Inconsolata", "editor.fontLigatures": true, "editor.formatOnPaste": true, "editor.formatOnType": false, "editor.formatOnSave": true, "editor.letterSpacing": 0.5, "editor.lineHeight": 25, "editor.minimap.enabled": false, "editor.multiCursorModifier": "ctrlCmd", "editor.suggestSelection": "first", "editor.tabCompletion": "on", "editor.tabSize": 2, "editor.wordWrap": "on",

File settings

 "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "files.hotExit": "onExit", "files.defaultLanguage": "", "files.trimTrailingWhitespace": true,

Prettier settings

 "prettier.printWidth": 120, "prettier.bracketSpacing": true, "prettier.singleQuote": true,

Included

This extension pack includes the following extensions:

# data[].attributes.attachment_link.title
Angular Essentials (Version 12) - Visual Studio Marketplace

# data[].attributes.attachment_link.description
This extension pack for Visual Studio Code adds extensions that are amazingly useful for Angular development. See the CHANGELOG for the latest changes I am often asked, "What are your favorite VS Code extensions for Angular?". I decided it was time to share them via an extension pack.

# data[].attributes.attachment_link.readable_text
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Screenshot:

F.A.Q.

Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

Settings

"bracket-pair-colorizer-2.colors"
Define the colors used to colorize brackets. Accepts valid color names, hex codes, and rgba() values.

"bracket-pair-colorizer-2.colors": [ "Gold", "Orchid", "LightSkyBlue" ]

"bracket-pair-colorizer-2.forceUniqueOpeningColor"

"bracket-pair-colorizer-2.forceIterationColorCycle"

"bracket-pair-colorizer-2.colorMode"
Consecutive brackets share a color pool for all bracket types
Independent brackets allow each bracket type to use its own color pool

"bracket-pair-colorizer-2.highlightActiveScope"
Should the currently scoped brackets always be highlighted?

"bracket-pair-colorizer-2.activeScopeCSS"
Choose a border style to highlight the active scope. Use{color} to match the existing bracket color
It is recommended to disable the inbuilt editor.matchBrackets setting if using this feature

"bracket-pair-colorizer-2.activeScopeCSS": [ "borderStyle : solid", "borderWidth : 1px", "borderColor : {color}", "opacity: 0.5" ]

"bracket-pair-colorizer-2.showBracketsInRuler"
Show active scope brackets in the ruler

"bracket-pair-colorizer-2.rulerPosition"
Decoration position in the ruler

"bracket-pair-colorizer-2.scopeLineCSS"
Choose a border style to highlight the active scope. Use{color} to match the existing bracket color

"bracket-pair-colorizer-2.scopeLineCSS": [ "borderStyle : solid", "borderWidth : 1px", "borderColor : {color}", "opacity: 0.5" ]

"bracket-pair-colorizer-2.excludedLanguages"
Exclude a language from being colorized

Commands

These commands will expand/undo the cursor selection to the next scope

"bracket-pair-colorizer-2.expandBracketSelection"
"bracket-pair-colorizer-2.undoBracketSelection"

Quick-start:

{ "key": "shift+alt+right", "command": "bracket-pair-colorizer-2.expandBracketSelection", "when": "editorTextFocus" }, { "key": "shift+alt+left", "command": "bracket-pair-colorizer-2.undoBracketSelection", "when": "editorTextFocus" }

# data[].attributes.attachment_link.title
Bracket Pair Colorizer 2 - Visual Studio Marketplace

# data[].attributes.attachment_link.description
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use. Screenshot: Differences between v1 and v2? v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

# data[].attributes.attachment_link.title
Search node_modules - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Quickly search the node_modules folder.

# data[].attributes.attachment_link.readable_text
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.

Notice The validation is done by running npm and it is not run when the modules are managed by yarn.

The package.json validation reports warnings for modules:

that are defined in the package.json, but that are not installed

that are installed but not defined in the package.json

that are installed but do not satisfy the version defined in the package.json.

Quick fixes to run npm are provided for reported warnings.

Commands for running scripts are available the npm category.

Run npm install, also available in the context menu of the explorer when the package.json file

Run a script (npm run-script) defined in the package.json by picking a script defined in thescripts section of the package.json.

Rerun the last npm script you have executed using this extension.

Terminate a running script

The scripts can be run either in the integrated terminal or an output window.

Support for Macbook Pro touch bar. You can run the following commands:

Settings

npm.validate.enable validate the dependencies in the package.json file, the default is true.

npm.runInTerminal defines whether the command is run in a terminal window or whether the output form the command is shown in theOutput window. The default is to show the output in the terminal.

npm.includeDirectories define additional directories that include a package.json.

npm.useRootDirectory define whether the root directory of the workspace should be ignored, the default is false.

npm.runSilent run npm commands with the --silent option, the default is false.

npm.bin custom npm bin name, the default is npm.

npm.enableTouchbar Enable the npm scripts on macOS touchbar.

Example

{ "npm.runInTerminal": false, "npm.includeDirectories": [ "subdir1/path", "subdir2/path" ] }

Keyboard Shortcuts

The extension defines a chording keyboard shortcut for the R key. As a consequence an existing keybinding for R is not executed immediately. If this is not desired, then please bind another key for these commands, see the customization documentation.

# data[].attributes.attachment_link.description
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json. Notice The validation is done by running npm and it is not run when the modules are managed by yarn.

# data[].attributes.attachment_link.readable_text
Support

While being free and open source, if you find it useful, please consider supporting it by donating via PayPal or Open Collective. If you are using it in office as a team, please ask your company to support us via Open Collective from just 2$ per month!

*2$ Per Month

Type Sync in command Palette in order to view all commands.
Key Features

1. Use your GitHub account token and Gist. 2. Easy to Upload and Download on one click. 3. Show a summary page at the end with details about config and extensions effected. 4. Auto download Latest Settings on Startup. 5. Auto upload Settings on file change. 6. Share the Gist with other users and let them download your settings. 7. Supports GitHub Enterprise 8. Support pragmas with @sync keywords: host, os and env are supported. 9. GUI for changing settings / logging in 10. Allows you to Sync any file across your machines.

It Syncs

All extensions and complete User Folder that Contains 1. Settings File 2. Keybinding File 3. Launch File 4. Snippets Folder 5. VSCode Extensions & Extensions Configurations 6. Workspaces Folder

Shortcuts

1. Upload Key : Shift + Alt + U 2. Download Key : Shift + Alt + D (on macOS: Shift + Option + U / Shift + Option + D)

Configure Settings Sync

Settings Sync Configuration page will be opened automatically on code start and requires two things to setup:

GitHub Token needs to be retrived by your GitHub account while Settings Sync creates GIST if you are first time user.

Following are the steps you need to perform to configure.

Click on Login with GitHub .

Login GitHub on Browser and close the browser tab once you get Success message.

If you are using Settings Sync first time GIST will be created automatically when you upload your settings.

If you already have GitHub Gist, new window will be opened to allow you to select the GitHub Gist or Skip to create new Gist.

You can always verify created gist by going to https://gist.github.com and checking for a gist named cloudSettings

Upload Your Settings

Press Shift + Alt + U (macOS: Shift + Option + U)

Type ">Sync" In Command Palette into order download / upload

When downloading or uploading for the first time, the welcome page will automatically open, where you can configure the Settings Sync.

Once you select upload, after uploading the settings. You will see the Summary details with the list of each files and extensions uploaded.

Download your Settings

Press Shift + Alt + D (macOS: Shift + Option + D)

Type ">Sync" In Command Palette into order download / upload

When downloading or uploading for the first time, the welcome page will automatically open, where you can configure the Settings Sync.

Once you select download, after downloading. Settings Sync will display you Summary containing the list of each files and extension being downloaded.

New popup will be opened to allow you to restart the code to apply the settings.

Reset Extension Settings

Select "> Sync : Reset Extension Settings" in the Command Palette to reset your settings

Settings

Settings can be changed through the settings page, which can be accessed through "> Sync : Advanced Options > Open Settings Page"

There are two types of settings in Settings Sync. I will recommend you to read the configurations details here.

Gist Settings

Gist Settings are stored in settings.json file of Code. You can customize the settings in gist settings like:

1. Configure Gist Id (Environment) 2. Configure auto upload / download for GitHub Gist 3. Configure extension sync behaviour 4. Configure force download 4. Configure force upload 6. Configure quiet sync

 "sync.gist": "0c929b1a6c51015cdc9e0fe2e369ea4c", "sync.autoDownload": false, "sync.autoUpload": false, "sync.forceDownload": false, "sync.forceUpload": false, "sync.quietSync": false, "sync.removeExtensions": true, "sync.syncExtensions": true

Global Settings

Global settings are present in syncLocalSettings.json inside User folder. These settings will be shared across multiple Gist Environments.

You can customize the sync:

1. Options by which files / folders and settings to exclude from upload. 2. Configure default Gist Environment name. 3. Replace the code settings after downloading. 4. Change the Gist description while creating new one in github. 5. Configure GitHub Enterprise Url

{ "ignoreUploadFiles": [ "state.*", "syncLocalSettings.json", ".DS_Store", "sync.lock", "projects.json", "projects_cache_vscode.json", "projects_cache_git.json", "projects_cache_svn.json", "gpm_projects.json", "gpm-recentItems.json" ], "ignoreUploadFolders": [ "workspaceStorage" ], "ignoreExtensions": [], "gistDescription": "Visual Studio Code Settings Sync Gist", "version": 340, "token": "YOUR_GITHUB_TOKEN", "downloadPublicGist": false, "supportedFileExtensions": [ "json", "code-snippets" ], "openTokenLink": true, "disableUpdateMessage": false, "lastUpload": null, "lastDownload": null, "githubEnterpriseUrl": null, "askGistDescription": false, "customFiles": {}, "hostName": null, "universalKeybindings": false, "autoUploadDelay": 20 }

I will recommend you to read the configurations details here.

Features

Toggle Auto-Upload on change

Auto-upload is disabled by default. When the settings are changed and saved this feature will automatically start the upload process and save the settings online.

Please make sure you have valid github Token and Gist available to make it work properly.

Select Command "Sync : Advanced Options > Toggle Auto-Upload on Settings Change" command to Turn ON / OFF the auto-upload.

Toggle Auto Download

Auto Download is disabled by default. It will sync all the setting by default when the editor starts. Please make sure you have valid github Token and Gist available to make it work properly.

Select Command "Sync : Advanced Options > Toggle Auto-Download On Startup" command to Turn ON / OFF the auto download.

Toggle Force Download

Force Download is disabled by default. By default, extension won't download the latest settings if you already have the latest downloaded version, but sometimes when you delete some extension locally and don't upload the settings it will still show that you have latest versions by date or time checks, by turning this ON it will always download the cloud settings on startup.

Please make sure you have valid github Token and Gist available to make it work properly.

Select Command "Sync : Advanced Options > Toggle Force Download" command to Turn ON / OFF the force download.

Toggle Force Upload

Force Upload is disabled by default. By default, extension won't upload the settings if the gist has newer or identical content. By turning this ON it will always upload without checking for newer settings in the gist.

Please make sure you have valid github Token and Gist available to make it work properly.

Select Command "Sync : Advanced Options > Toggle Force Upload" command to Turn ON / OFF the force upload.

Toggle Summary

Summary is enabled by default which shows all files and extensions that are added or deleted on a single page. You may turn it off in order to make a upload and download process clean and quiet.

Select Command "Sync : Advanced Options > Show Summary Page On Upload / Download" command to Turn ON / OFF the auto download.

Custom Sync

Settings Sync allows you to sync the files other from User folder. For example, your workspace settings and much more. Its upon you to utilize the full potential of Settings Sync across your machines or your teams machines. Read about custom sync here.

Sync Pragmas

You can even manage which settings you want to ignore from being upload or download. Settings Sync even allows you to manage your home and office computer specific settings even OS related settings in single GitHub Gist. Read details about Sync Pragmas here.

If you are looking to share your settings. Read the details here. Settings Sync needs to create new Public GitHub Gist to share your settings with other users.

Troubleshooting

If you ever get into problem while setting up the Settings Sync. You can check our troubleshooting guide that cover those scenarios here, you can also add your solution there if its not available there to help other users.

How To Contribute

You can contribute in different ways. Read the details here

Fix and Earn - You can also earn money by fixing the issues - Check the issues under bounty program here.

Credits

Contributors

Thank you to all the people who have already contributed to Settings Sync!

Backers

Thank you to all our backers! [ Become a backer]

Thank you to all our sponsors! (please ask your company to also support this open source project by becoming a sponsor)

# data[].attributes.attachment_link.title
Settings Sync - Visual Studio Marketplace

# data[].attributes.attachment_link.description
While being free and open source, if you find it useful, please consider supporting it by donating via PayPal or Open Collective. If you are using it in office as a team, please ask your company to support us via Open Collective from just 2$ per month!

# data[].attributes.attachment_link.title
Markdown All in One - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

# data[].attributes.attachment_link.title
Better Comments - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!

# data[].attributes.attachment_link.readable_text
Docker for Visual Studio Code

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

Check out the Working with containers topic on the Visual Studio Code documentation site to get started.

The Docker extension wiki has troubleshooting tips and additional technical information.

Installation

Install Docker on your machine and add it to the system path.

On Linux, you should enable rootless Docker (more secure) or enable Docker CLI for the non-root user account (less secure) that will be used to run VS Code.

To install the extension, open the Extensions view, search for docker to filter results and select Docker extension authored by Microsoft.

Overview of the extension features

Editing Docker files

You can get IntelliSense when editing your Dockerfile and docker-compose.yml files, with completions and syntax help for common commands.

In addition, you can use the Problems panel (Ctrl+Shift+M on Windows/Linux, Shift+Command+M on Mac) to view common errors for Dockerfile and docker-compose.yml files.

Generating Docker files

You can add Docker files to your workspace by opening the Command Palette (F1) and using Docker: Add Docker Files to Workspace command. The command will generate Dockerfile and .dockerignore files and add them to your workspace. The command will also query you if you want the Docker Compose files added as well; this is optional.

The extension recognizes workspaces that use most popular development languages (C#, Node.js, Python, Ruby, Go, and Java) and customizes generated Docker files accordingly.

Docker view

The Docker extension contributes a Docker view to VS Code. The Docker view lets you examine and manage Docker assets: containers, images, volumes, networks, and container registries. If the Azure Account extension is installed, you can browse your Azure Container Registries as well.

The right-click menu provides access to commonly used commands for each type of asset.

You can rearrange the Docker view panes by dragging them up or down with a mouse and use the context menu to hide or show them.

Docker commands

Many of the most common Docker commands are built right into the Command Palette:

You can run Docker commands to manage images, networks, volumes, image registries, and Docker Compose. In addition, the Docker: Prune System command will remove stopped containers, dangling images, and unused networks and volumes.

Docker Compose

Docker Compose lets you define and run multi-container applications with Docker. Visual Studio Code's experience for authoring docker-compose.yml is very rich, providing IntelliSense for valid Docker compose directives:

For the image directive, you can press ctrl+space and VS Code will query the Docker Hub index for public images:

VS Code will first show a list of popular images along with metadata such as the number of stars and description. If you continue typing, VS Code will query the Docker Hub index for matching images, including searching public profiles. For example, searching for 'Microsoft' will show you all the public Microsoft images.

Using image registries

You can display the content and push/pull/delete images from Docker Hub and Azure Container Registry:

An image in an Azure Container Registry can be deployed to Azure App Service directly from VS Code; see Deploy images to Azure App Service page. For more information about how to authenticate to and work with registries see Using container registries page.

Debugging services running inside a container

You can debug services built using Node.js, Python, or .NET (C#) that are running inside a container. The extension offers custom tasks that help with launching a service under the debugger and with attaching the debugger to a running service instance. For more information see Debug container application and Extension Properties and Tasks pages.

Azure CLI integration

You can start Azure CLI (command-line interface) in a standalone, Linux-based container with Docker Images: Run Azure CLI command. This allows access to full Azure CLI command set in an isolated environment. See Get started with Azure CLI page for more information on available commands.

Contributing

See the contribution guidelines for ideas and guidance on how to improve the extension. Thank you!

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Telemetry

VS Code collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more. If you don't wish to send usage data to Microsoft, you can set the telemetry.enableTelemetry setting to false. Learn more in our FAQ.

License

# data[].attributes.attachment_link.description
The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container. Check out the Working with containers topic on the Visual Studio Code documentation site to get started.

# data[].attributes.attachment_link.readable_text
Main Functionality

This extension make debugging much easier by automating the operation of writing meaningful log message.

Features

I) Insert meaningful log message automatically

Two steps:

The log message will be inserted in the next line relative to the selected variable like this:

console.log("SelectedVariableEnclosingClassName -> SelectedVariableEnclosingFunctionName -> SelectedVariable", SelectedVariable)

Multiple cursor support:

Properties:

turboConsoleLog.wrapLogMessage (boolean): Whether to wrap the log message or not.

turboConsoleLog.logMessagePrefix (string): The prefix of the log message (default one is 🚀 ).

turboConsoleLog.addSemicolonInTheEnd (boolean): Whether to put a semicolon in the end of the log message or not.

turboConsoleLog.insertEnclosingClass (boolean): Whether to insert or not the enclosing class of the selected variable in the log message.

turboConsoleLog.insertEnclosingFunction (boolean): Whether to insert or not the enclosing function of the selected variable in the log message.

turboConsoleLog.delemiterInsideMessage (string): The delimiter that will separate the different log message elements (file name, line number, class, function and variable)

turboConsoleLog.includeFileNameAndLineNum (boolean): Whether to include the file name and the line number of the log message.

turboConsoleLog.quote (enum): Double quotes (""), single quotes ('') or backtick(``).

A wrapped log message :

II) Comment all log messages, inserted by the extension, from the current document

All it takes to comment all log messages, inserted by the extension, from the current document is to press alt + shift + c

III) Uncomment all log messages, inserted by the extension, from the current document

All it takes to uncomment all log messages, inserted by the extension, from the current document is to press alt + shift + u

IV) Delete all log messages, inserted by the extension, from the current document

All it takes to delete all log messages, inserted by the extension, from the current document is to press alt + shift + d

Release Notes

1.0.0

Initial release of Turbo Console Log

1.1.0

New feature: The possibility of wrapping the log message is added

1.2.0

New feature: Comment all log messages inserted by the extension

New feature: Uncomment all log messages inserted by the extension

When requested, only the log messages inserted by the extension will be commented, uncommented or deleted

1.3.0

1.4.0

The extension will comment, uncomment and delete all log messages in the current file whether they have been inserted by it or not

2.0.0

The extension is rewrited with Typescript with a whole new architecture

2.1.0

File name and line number are added to the log message

The delimiter of elements inside the log message can be customised

Comment, uncomment and delete only the log messages inserted by the extension

Participate

You're more than welcome to participate in the development of the extension by creating pull requests and submitting issues, link of the project in github: https://github.com/Chakroun-Anas/turbo-console-log

You can contact me on the following mail: chakroun.anas@outlook.com

License

MIT © Chakroun Anas

Buying me a coffe will definitely help me to keep working in this project and other open source projects <3
Enjoy!

# data[].attributes.attachment_link.title
Turbo Console Log - Visual Studio Marketplace

# data[].attributes.attachment_link.description
This extension make debugging much easier by automating the operation of writing meaningful log message. I) Insert meaningful log message automatically Two steps: The log message will be inserted in the next line relative to the selected variable like this: console.log("SelectedVariableEnclosingClassName -> SelectedVariableEnclosingFunctionName -> SelectedVariable", SelectedVariable) Multiple cursor support: Properties: turboConsoleLog.wrapLogMessage (boolean): Whether to wrap the log message or not.

# data[].attributes.attachment_link.readable_text
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, and custom command

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.

Book for VS Code

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

WeChat Official Account

VS Code 的热门文章、使用技巧、插件推荐、插件开发攻略等，请关注" 玩转VS Code "公众号！

Donation

If you like this extension, you could become a backer or sponsor via , donate via , or scan below QR code to donate via Alipay. Any amount is welcome. It will encourage me to make this extension better and better!

Features

Run code file of current active Text Editor

Run code file through context menu of file explorer

Run selected code snippet in Text Editor

Run code per Shebang

Run code per filename glob

Run custom command

Stop code running

View output in Output Window

Set default language to run

Select language to run

Support REPL by running code in Integrated Terminal

Usages

To run code:

use shortcut Ctrl+Alt+N

or press F1 and then select/type Run Code,

or right click the Text Editor and then click Run Code in editor context menu

or click Run Code button in editor title menu

or click Run Code button in context menu of file explorer

To stop the running code:

use shortcut Ctrl+Alt+M

or press F1 and then select/type Stop Code Run

or click Stop Code Run button in editor title menu

or right click the Output Channel and then click Stop Code Run in context menu

To select language to run, use shortcut Ctrl+Alt+J, or press F1 and then select/type Run By Language, then type or select the language to run: e.g php, javascript, bat, shellscript...

To run custom command, then use shortcut Ctrl+Alt+K, or press F1 and then select/type Run Custom Command

Configuration

Make sure the executor PATH of each language is set in the environment variable. You could also add entry into code-runner.executorMap to set the executor PATH. e.g. To set the executor PATH for ruby, php and html:

{ "code-runner.executorMap": { "javascript": "node", "php": "C:\\php\\php.exe", "python": "python", "perl": "perl", "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe", "go": "go run", "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt" } }
Supported customized parameters

$workspaceRoot: The path of the folder opened in VS Code

$dir: The directory of the code file being run

$dirWithoutTrailingSlash: The directory of the code file being run without a trailing slash

$fullFileName: The full name of the code file being run

$fileName: The base name of the code file being run, that is the file without the directory

$fileNameWithoutExt: The base name of the code file being run without its extension

$driveLetter: The drive letter of the code file being run (Windows only)

$pythonPath: The path of Python interpreter (set by Python: Select Interpreter command)

Please take care of the back slash and the space in file path of the executor

Back slash: please use \\

If there ares spaces in file path, please use \" to surround your file path

You could set the executor per filename glob:

{ "code-runner.executorMapByGlob": { "pom.xml": "cd $dir && mvn clean package", "*.test.js": "tap", "*.js": "node" } }

Besides, you could set the default language to run:

{ "code-runner.defaultLanguage": "javascript" }

For the default language: It should be set with language id defined in VS Code. The languages you could set are java, c, cpp, javascript, php, python, perl, ruby, go, lua, groovy, powershell, bat, shellscript, fsharp, csharp, vbscript, typescript, coffeescript, swift, r, clojure, haxe, objective-c, rust, racket, ahk, autoit, kotlin, dart, pascal, haskell, nim, d, lisp

Also, you could set the executor per file extension:

{ "code-runner.executorMapByFileExtension": { ".vbs": "cscript //Nologo" } }

To set the custom command to run:

{ "code-runner.customCommand": "echo Hello" }

To set the the working directory:

{ "code-runner.cwd": "path/to/working/directory" }

To set whether to clear previous output before each run (default is false):

{ "code-runner.clearPreviousOutput": false }

To set whether to save all files before running (default is false):

{ "code-runner.saveAllFilesBeforeRun": false }

To set whether to save the current file before running (default is false):

{ "code-runner.saveFileBeforeRun": false }

To set whether to show extra execution message like [Running] ... and [Done] ... (default is true):

{ "code-runner.showExecutionMessage": true }

[REPL support] To set whether to run code in Integrated Terminal (only support to run whole file in Integrated Terminal, neither untitled file nor code snippet) (default is false):

{ "code-runner.runInTerminal": false }

To set whether to preserve focus on code editor after code run is triggered (default is true, the code editor will keep focus; when it is false, Terminal or Output Channel will take focus):

{ "code-runner.preserveFocus": true }

code-runner.ignoreSelection: Whether to ignore selection to always run entire file. (Default is false)

code-runner.showRunIconInEditorTitleMenu: Whether to show 'Run Code' icon in editor title menu. (Default is true)

code-runner.showRunCommandInEditorContextMenu: Whether to show 'Run Code' command in editor context menu. (Default is true)

code-runner.showRunCommandInExplorerContextMenu: Whether to show 'Run Code' command in explorer context menu. (Default is true)

code-runner.showStopIconInEditorTitleMenu: Whether to show 'Stop Code Run' icon in editor title menu when code is running. (Default is true)

code-runner.terminalRoot: For Windows system, replaces the Windows style drive letter in the command with a Unix style root when using a custom shell as the terminal, like Bash or Cgywin. Example: Setting this to /mnt/ will replace C:\path with /mnt/c/path (Default is "")

code-runner.temporaryFileName: Temporary file name used in running selected code snippet. When it is set as empty, the file name will be random. (Default is "tempCodeRunnerFile")

code-runner.respectShebang: Whether to respect Shebang to run code. (Default is true)

About CWD Setting (current working directory)

1. By default, use the code-runner.cwd setting

2. If code-runner.cwd is not set and code-runner.fileDirectoryAsCwd is true, use the directory of the file to be executed

3. If code-runner.cwd is not set and code-runner.fileDirectoryAsCwd is false, use the path of root folder that is open in VS Code

4. If no folder is open, use the os temp folder

Note

For Objective-C, it is only supported on macOS

To run C# script, you need to install scriptcs

To run TypeScript, you need to install ts-node

To run Clojure, you need to install Leiningen and lein-exec

Telemetry data

By default, telemetry data collection is turned on to understand user behavior to improve this extension. To disable it, update the settings.json as below:

{ "code-runner.enableAppInsights": false }

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.description
Extension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,

# data[].attributes.attachment_link.readable_text
VS Code JavaScript (ES6) snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Note
All the snippets include the final semicolon ; There is a fork of those snippets here made by @jmsv where semicolons are not included. So feel free to use them according to your needs.
Request and perform code reviews from inside your IDE. Review any code, even if it's a work-in-progress that hasn't been committed yet, and use jump-to-definition, your favorite keybindings, and other IDE tools.
Try it free

Installation

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones. Search for JavaScript (ES6) code snippets and install it.

Supported languages (file extensions)

JavaScript (.js)

TypeScript (.ts)

JavaScript React (.jsx)

TypeScript React (.tsx)

Html (.html)

Vue (.vue)

Snippets

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Import and export

Class helpers

Various methods

Console methods

# data[].attributes.attachment_link.title
JavaScript (ES6) code snippets - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - REST Client for Visual Studio Code

# data[].attributes.attachment_link.readable_text
The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can:

Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.

Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.

Access an existing development environment from multiple machines or locations.

Debug an application running somewhere else such as a customer site or in the cloud.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.

SSH Host Requirements

You can connect to a running SSH server on the following platforms.

Supported:

x86_64 Debian 8+, Ubuntu 16.04+, CentOS / RHEL 7+ Linux.

ARMv7l (AArch32) Raspbian Stretch/9+ (32-bit).

ARMv8l (AArch64) Ubuntu 18.04+ (64-bit).

Windows 10 / Server 2016/2019 (1803+) using the official OpenSSH Server.

macOS 10.14+ (Mojave) SSH hosts with Remote Login enabled.

Other glibc based Linux distributions for x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) should work if they have the needed prerequisites. See the Remote Development with Linux article for information prerequisites and tips for getting community supported distributions up and running.

While ARMv7l (AArch32) and ARMv8l (AArch64) support is available, some extensions installed on these devices may not work due to the use of x86 native code in the extension.

Security Note

Using Remote-SSH opens a connection between your local machine and the remote. Only use Remote-SSH to connect to secure remote machines that you trust and that are owned by a party whom you trust. A compromised remote could use the VS Code Remote connection to execute code on your local machine.

Installation

1. Install VS Code or VS Code - Insiders and this extension.

2. Install an OpenSSH compatible SSH client.

3. If you do not have a SSH host set up, follow the directions for Linux, Windows 10 / Server (1803+), or macOS or create a VM on Azure.

Getting started

Follow the step-by-step tutorial or if you have a simple SSH host setup, connect to it as follows:

1. Press F1 and run the Remote-SSH: Open SSH Host... command.

2. Enter your user and host/IP in the following format in the input box that appears and press enter: user@host-or-ip or user@domain@host-or-ip

3. If prompted, enter your password (but we suggest setting up key based authentication).

4. After you are connected, use File > Open Folder to open a folder on the host.

You can press F1 to bring up the Command Palette and type in Remote-SSH for a full list of available commands.

You can also click on the Remote "Quick Access" status bar item in the lower left corner to get a list of the most common commands.

For more information, please see the extension documentation.

Release Notes

While an optional install, this extension releases with VS Code. VS Code release notes include a summary of changes to all three Remote Development extensions with a link to detailed release notes.

As with VS Code itself, the extensions update during a development iteration with changes that are only available in VS Code Insiders Edition.

Questions, Feedback, Contributing

Have a question or feedback?

Or connect with the community...

Telemetry

Visual Studio Code Remote - SSH and related extensions collect telemetry data to help us build a better experience working remotely from VS Code. We only collect data on which commands are executed. We do not collect any information about image names, paths, etc. The extension respects the telemetry.enableTelemetry setting which you can learn more about in the Visual Studio Code FAQ.

License

By downloading and using the Visual Studio Remote - SSH extension and its related components, you agree to the product license terms and privacy statement.

# data[].attributes.attachment_link.title
Remote - SSH - Visual Studio Marketplace

# data[].attributes.attachment_link.description
The Remote - SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can: Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.

# data[].attributes.attachment_link.readable_text
A basic spell checker that works well with camelCase code.

The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Support Further Development

Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Functionality

Load a TypeScript, JavaScript, Text, etc. file. Words not in the dictionary files will have a squiggly underline.

Example

Suggestions

To see the list of suggestions:

After positioning the cursor in the word, any of the following should display the list of suggestions:

Install

Open up VS Code and hit F1 and type ext select install and type code-spell-checker hit enter and reload window to enable.

Supported Languages

English (US)

English (GB) - turn on by changing "cSpell.language": "en" to "cSpell.language": "en-GB"

Add-On Language Dictionaries

Add-On Specialized Dictionaries

Enabled File Types

Enable / Disable File Types

To Enable or Disable spell checking for a file type:

Click on the Spell Checker status in the status bar:

How it works with camelCase

The concept is simple, split camelCase words before checking them against a list of known English words.

camelCase -> camel case

HTMLInput -> html input -- Notice that the I is associated with Input and not HTML

snake_case_words -> snake case words

camel2snake -> camel snake -- (the 2 is ignored)

Special case with ALL CAPS words

There are a few special cases to help with common spelling practices for ALL CAPS words.

CURLs -> curls -- trailing s

CURLedRequest -> curled request -- trailing ed

Things to note

This spellchecker is case insensitive. It will not catch errors like english which should be English.

The spellchecker uses a local word dictionary. It does not send anything outside your machine.

The words in the dictionary can and do contain errors.

There are missing words.

Only words longer than 3 characters are checked. "jsj" is ok, while "jsja" is not.

All symbols and punctuation are ignored.

In Document Settings

It is possible to add spell check settings into your source code. This is to help with file specific issues that may not be applicable to the entire project.

All settings are prefixed with cSpell: or spell-checker:.

disable -- turn off the spell checker for a section of code.

enable -- turn the spell checker back on after it has been turned off.

ignore -- specify a list of words to be ignored.

words -- specify a list of words to be considered correct and will appear in the suggestions list.

ignoreRegExp -- Any text matching the regular expression will NOT be checked for spelling.

includeRegExp -- Only text matching the collection of includeRegExp will be checked.

enableCompoundWords / disableCompoundWords -- Allow / disallow words like: "stringlength".

Enable / Disable checking sections of code

It is possible to disable / enable the spell checker by adding comments to your code.

Disable Checking

Enable Checking

Example

// cSpell:disable const wackyWord = ['zaallano', 'wooorrdd', 'zzooommmmmmmm']; /* cSpell:enable */ // Nest disable / enable is not Supported // spell-checker:disable // It is now disabled. var liep = 1; /* cspell:disable */ // It is still disabled // cSpell:enable // It is now enabled const str = 'goededag'; // <- will be flagged as an error. // spell-checker:enable <- doesn't do anything // cSPELL:DISABLE <-- also works. // if there isn't an enable, spelling is disabled till the end of the file. const str = 'goedemorgen'; // <- will NOT be flagged as an error.

Ignore

Ignore allows you the specify a list of words you want to ignore within the document.

// cSpell:ignore zaallano, wooorrdd // cSpell:ignore zzooommmmmmmm const wackyWord = ['zaallano', 'wooorrdd', 'zzooommmmmmmm'];

Note: words defined with ignore will be ignored for the entire file.

Words

The words list allows you to add words that will be considered correct and will be used as suggestions.

// cSpell:words woorxs sweeetbeat const companyName = 'woorxs sweeetbeat';

Note: words defined with words will be used for the entire file.

Enable / Disable compound words

In some programing language it is common to glue words together.

// cSpell:enableCompoundWords char * errormessage; // Is ok with cSpell:enableCompoundWords int errornumber; // Is also ok.

Note: Compound word checking cannot be turned on / off in the same file. The last setting in the file determines the value for the entire file.

Excluding and Including Text to be checked.

By default, the entire document is checked for spelling. cSpell:disable/ cSpell:enable above allows you to block off sections of the document. ignoreRegExp and includeRegExp give you the ability to ignore or include patterns of text. By default the flags gim are added if no flags are given.

The spell checker works in the following way:

1. Find all text matching includeRegExp

2. Remove any text matching excludeRegExp

3. Check the remaining text.

Exclude Example

// cSpell:ignoreRegExp 0x[0-9a-f]+ -- will ignore c style hex numbers // cSpell:ignoreRegExp /0x[0-9A-F]+/g -- will ignore upper case c style hex numbers. // cSpell:ignoreRegExp g{5} h{5} -- will only match ggggg, but not hhhhh or 'ggggg hhhhh' // cSpell:ignoreRegExp g{5}|h{5} -- will match both ggggg and hhhhh // cSpell:ignoreRegExp /g{5} h{5}/ -- will match 'ggggg hhhhh' /* cSpell:ignoreRegExp /n{5}/ -- will NOT work as expected because of the ending comment -> */ /* cSpell:ignoreRegExp /q{5}/ -- will match qqqqq just fine but NOT QQQQQ */ // cSpell:ignoreRegExp /[^\s]{40,}/ -- will ignore long strings with no spaces. // cSpell:ignoreRegExp Email -- this will ignore email like patterns -- see Predefined RegExp expressions var encodedImage = 'HR+cPzr7XGAOJNurPL0G8I2kU0UhKcqFssoKvFTR7z0T3VJfK37vS025uKroHfJ9nA6WWbHZ/ASn...'; var email1 = 'emailaddress@myfancynewcompany.com'; var email2 = '<emailaddress@myfancynewcompany.com>';

Note: ignoreRegExp and includeRegExp are applied to the entire file. They do not start and stop.

Include Example

In general you should not need to use includeRegExp. But if you are mixing languages then it could come in helpful.

# cSpell:includeRegExp #.* # cSpell:includeRegExp /(["]{3}|[']{3})[^\1]*?\1/g # only comments and block strings will be checked for spelling. def sum_it(self, seq): """This is checked for spelling""" variabele = 0 alinea = 'this is not checked' for num in seq: # The local state of 'value' will be retained between iterations variabele += num yield variabele

Predefined RegExp expressions

Exclude patterns

HexValues -- Matches common hex format like #aaa, 0xfeef, \u0134

EscapeCharacters ¹ -- matches special characters: '\n', '\t' etc.

Base64 ¹ -- matches base64 blocks of text longer than 40 characters.

Email -- matches most email addresses.

Include Patterns

Everything ¹ -- By default we match an entire document and remove the excludes.

string -- This matches common string formats like '...', "...", and `...`

CStyleComment -- These are C Style comments /* */ and //

PhpHereDoc -- This matches PHPHereDoc strings.

1. These patterns are part of the default include/exclude list for every file.

Customization

The spell checker configuration can be controlled via VS Code preferences or cspell.json configuration file.

Order of precedence:

1. Workspace Folder cspell.json

2. Workspace Folder .vscode/cspell.json

3. VS Code Preferences cSpell section.

Adding words to the Workspace Dictionary

You have the option to add you own words to the workspace dictionary. The easiest, is to put your cursor on the word you wish to add, when you lightbulb shows up, hit Ctrl+. (windows) / Cmd+. (Mac). You will get a list of suggestions and the option to add the word.

You can also type in a word you want to add to the dictionary: F1 add word -- select Add Word to Dictionary and type in the word you wish to add.

cspell.json

Words added to the dictionary are placed in the cspell.json file in the workspace folder. Note, the settings in cspell.json will override the equivalent cSpell settings in VS Code's settings.json.

Example cspell.json file

// cSpell Settings { // Version of the setting file. Always 0.2 "version": "0.2", // language - current active spelling language "language": "en", // words - list of words to be always considered correct "words": [ "mkdirp", "tsmerge", "githubusercontent", "streetsidesoftware", "vsmarketplacebadge", "visualstudio" ], // flagWords - list of words to be always considered incorrect // This is useful for offensive words and common spelling errors. // For example "hte" should be "the" "flagWords": [ "hte" ] }

VS Code Configuration Settings

 //-------- Code Spell Checker Configuration -------- // The Language local to use when spell checking. "en", "en-US" and "en-GB" are currently supported by default. "cSpell.language": "en", // Controls the maximum number of spelling errors per document. "cSpell.maxNumberOfProblems": 100, // Controls the number of suggestions shown. "cSpell.numSuggestions": 8, // The minimum length of a word before checking it against a dictionary. "cSpell.minWordLength": 4, // Specify file types to spell check. "cSpell.enabledLanguageIds": [ "csharp", "go", "javascript", "javascriptreact", "markdown", "php", "plaintext", "typescript", "typescriptreact", "yml" ], // Enable / Disable the spell checker. "cSpell.enabled": true, // Display the spell checker status on the status bar. "cSpell.showStatus": true, // Words to add to dictionary for a workspace. "cSpell.words": [], // Enable / Disable compound words like 'errormessage' "cSpell.allowCompoundWords": false, // Words to be ignored and not suggested. "cSpell.ignoreWords": ["behaviour"], // User words to add to dictionary. Should only be in the user settings. "cSpell.userWords": [], // Specify paths/files to ignore. "cSpell.ignorePaths": [ "node_modules", // this will ignore anything the node_modules directory "**/node_modules", // the same for this one "**/node_modules/**", // the same for this one "node_modules/**", // Doesn't currently work due to how the current working directory is determined. "vscode-extension", // ".git", // Ignore the .git directory "*.dll", // Ignore all .dll files. "**/*.dll" // Ignore all .dll files ], // flagWords - list of words to be always considered incorrect // This is useful for offensive words and common spelling errors. // For example "hte" should be "the"` "cSpell.flagWords": ["hte"], // Set the delay before spell checking the document. Default is 50. "cSpell.spellCheckDelayMs": 50,

Dictionaries

The spell checker includes a set of default dictionaries.

General Dictionaries

wordsEn - Derived from Hunspell US English words.

wordsEnGb - Derived from Hunspell GB English words.

companies - List of well known companies

softwareTerms - Software Terms and concepts like "coroutine", "debounce", "tree", etc.

misc - Terms that do not belong in the other dictionaries.

Programming Language Dictionaries

Miscellaneous Dictionaries

Based upon the programming language, different dictionaries will be loaded.

Here are the default rules: "*" matches any language. "local" is used to filter based upon the "cSpell.language" setting.

{ "cSpell.languageSettings": [ { "languageId": '*', "local": 'en', "dictionaries": ['wordsEn'] }, { "languageId": '*', "local": 'en-US', "dictionaries": ['wordsEn'] }, { "languageId": '*', "local": 'en-GB', "dictionaries": ['wordsEnGb'] }, { "languageId": '*', "dictionaries": ['companies', 'softwareTerms', 'misc'] }, { "languageId": "python", "allowCompoundWords": true, "dictionaries": ["python"]}, { "languageId": "go", "allowCompoundWords": true, "dictionaries": ["go"] }, { "languageId": "javascript", "dictionaries": ["typescript", "node"] }, { "languageId": "javascriptreact", "dictionaries": ["typescript", "node"] }, { "languageId": "typescript", "dictionaries": ["typescript", "node"] }, { "languageId": "typescriptreact", "dictionaries": ["typescript", "node"] }, { "languageId": "html", "dictionaries": ["html", "fonts", "typescript", "css"] }, { "languageId": "php", "dictionaries": ["php", "html", "fonts", "css", "typescript"] }, { "languageId": "css", "dictionaries": ["fonts", "css"] }, { "languageId": "less", "dictionaries": ["fonts", "css"] }, { "languageId": "scss", "dictionaries": ["fonts", "css"] }, ]; }

How to add your own Dictionaries

Global Dictionary

To add a global dictionary, you will need change your user settings.

Define the Dictionary

In your user settings, you will need to tell the spell checker where to find your word list.

Example adding medical terms, so words like acanthopterygious can be found.

// A List of Dictionary Definitions. "cSpell.dictionaryDefinitions": [ { "name": "medicalTerms", "path": "/Users/guest/projects/cSpell-WordLists/dictionaries/medicalterms-en.txt"}, // To specify a path relative to the workspace folder use ${workspaceFolder} or ${workspaceFolder:Name} { "name": "companyTerms", "path": "${workspaceFolder}/../company/terms.txt"} ], // List of dictionaries to use when checking files. "cSpell.dictionaries": [ "medicalTerms", "companyTerms" ]

Explained: In this example, we have told the spell checker where to find the word list file. Since it is in the user settings, we have to use absolute paths.

Once the dictionary is defined. We need to tell the spell checker when to use it. Adding it to cSpell.dictionaries advises the spell checker to always include the medical terms when spell checking.

Note: Adding large dictionary files to be always used will slow down the generation of suggestions.

Project / Workspace Dictionary

To add a dictionary at the project level, it needs to be in the cspell.json file. This file can be either at the project root or in the .vscode directory.

Example adding medical terms, where the terms are checked into the project and we only want to use it for .md files.

{ "dictionaryDefinitions": [ { "name": "medicalTerms", "path": "./dictionaries/medicalterms-en.txt"}, { "name": "cities", "path": "./dictionaries/cities.txt"} ], "dictionaries": [ "cities" ], "languageSettings": [ { "languageId": "markdown", "dictionaries": ["medicalTerms"] }, { "languageId": "plaintext", "dictionaries": ["medicalTerms"] } ] }

Explained: In this example, two dictionaries were defined: cities and medicalTerms. The paths are relative to the location of the cSpell.json file. This allows for dictionaries to be checked into the project.

The cities dictionary is used for every file type, because it was added to the list to dictionaries. The medicalTerms dictionary is only used when editing markdown or plaintext files.

FAQ

# data[].attributes.attachment_link.title
Code Spell Checker - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Spelling checker for source code

# data[].attributes.attachment_link.readable_text
This package is intended for use with the Visual Studio Code editor and it displays the size of the focused file in the status bar of the editor.

Bonus: If you click on the status bar component it will display more information about the file!

Installation

In VS Code, press Ctrl-P or Cmd-P (Mac) and type in ext install vscode-filesize. Click install in the left bar. Once the extension is installed you will be prompted to restart Visual Studio Code.

Or you can just search for filesize in the extension search bar inside the editor.

Screenshots

filesize with the status bar component active in simple view:

NEW! Expanded view

filesize with the status bar component active in expanded view (with gzip enabled):

Detailed view

To open the detailed view for the current file in focus you can just click at the size in the status bar or use Crtl- shift-' or Cmd- shift-' if you are on a Mac.

filesize with the detailed info panel open:

Settings

This package has two user configurable settings:

useDecimal: set to true if you want your size data to be displayed according to the SI unit system or leave it at false to use IEC's format (default).

use24HourFormat: set to true to use the 24-hour clock, set to false to use the 12-hour clock. Default is true.

showGzip: set to true to show calculated gzip size in the detailed info view. Default is true.

showGzipInStatusBar: set to true to show calculated gzip size in the status bar. Default is false.

showBrotli: set to true to show calculated brotli compressed size in the detailed info view. Default is false.

displayInfoOnTheRightSideOfStatusBar: set to true to show the status bar info on the right side. Default is false (left side).

Contributing

You are welcome to send any issues or pull requests.

Please run eslint in the code and test it with Visual Studio Code before sending changes.

Any bugs? Please file an issue.

Did something nice with the code? Please send a pull request.

Authors

License

# data[].attributes.attachment_link.description
This package is intended for use with the Visual Studio Code editor and it displays the size of the focused file in the status bar of the editor. Bonus: If you click on the status bar component it will display more information about the file!

# data[].attributes.attachment_link.readable_text
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

Features

Calculates the size of imports and requires. Currently supports:

Default importing: import Func from 'utils';

Entire content importing: import * as Utils from 'utils';

Selective importing: import {Func} from 'utils';

Selective importing with alias: import {orig as alias} from 'utils';

Submodule importing: import Func from 'utils/Func';

Require: const Func = require('utils').Func;

Supports both Javascript and Typescript

Why & How

I detail the Why and How in this blog post: https://medium.com/@yairhaimo/keep-your-bundle-size-under-control-with-import-cost-vscode-extension-5d476b3c5a76

Configuration

The following properties are configurable:

 // Upper size limit, in KB, that will count a package as a small package "importCost.smallPackageSize": 50, // Upper size limit, in KB, that will count a package as a medium package "importCost.mediumPackageSize": 100, // Decoration color for small packages "importCost.smallPackageColor": "#7cc36e", // Decoration color for medium packages "importCost.mediumPackageColor": "#7cc36e", // Decoration color for large packages "importCost.largePackageColor": "#d44e40", // File extensions to be parsed by the Typescript parser "importCost.typescriptExtensions": [ "\\.tsx?$" ], // File extensions to be parsed by the Javascript parser "importCost.javascriptExtensions": [ "\\.jsx?$" ], // Which bundle size to display "importCost.bundleSizeDecoration": "both", // Display the 'calculating' decoration "importCost.showCalculatingDecoration": true, // Print debug messages in output channel "importCost.debug": false

Any package size above the mediumPackageSize limit will be considered large.

Known Issues

Importing two libraries with a common dependency will show the size of both libraries isolated from each other, even if the common library needs to be imported only once.

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Display import/require package size in the editor

# data[].attributes.attachment_link.readable_text
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

You'll need Visual Studio Code October 2018 Release 1.29.1 or later to use this extension. For each supported language, please refer to the "Getting Started" section below to understand any other pre-requisites you'll need to install and configure to get IntelliCode completions.

Intellicode extensiosn supports web from version 1.2.16.

Now only typescript and javascript completions are supported. We are working on enabling more features.

Ever wish you could easily access code examples for APIs you work with? IntelliCode API Usage Examples makes that a reality. Now with just one click you can access examples for over 100K different APIs!

IntelliCode API Usage Examples is a feature that lets you see real-world examples of how other developers have used a given function. Examples shown are from public open source repositories on GitHub.

This feature currently supports Python, JavaScript and TypeScript (including JSX and TSX files).

About IntelliCode

This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list. The example below shows this in action for Python code.

When it comes to overloads, rather than taking the time to cycle through the alphabetical list of member, IntelliCode presents the most relevant one first. In the example shown above, you can see that the predicted APIs that IntelliCode elevates appear in a new section of the list at the top with members prefixed by a star icon. Similarly, a member's signature or overloads shown in the IntelliSense tool-tip will have additional text marked by a small star icon and wording to explain the recommended status. This visual experience for members in the list and the tool-tip that IntelliCode provides is not intended as final - it is intended to provide you with a visual differentiation for feedback purposes only.

Contextual recommendations are based on practices developed in thousands of high quality, open-source projects on GitHub each with high star ratings. This means you get context-aware code completions, tool-tips, and signature help rather than alphabetical or most-recently-used lists. By predicting the most likely member in the list based on your coding context, AI-assisted IntelliSense stops you having to hunt through the list yourself.

Getting Started

Install the Visual Studio IntelliCode extension by clicking the install link on this page, or install from the Extensions tab in Visual Studio Code. Then follow the language-specific instructions below.

For TypeScript/JavaScript users:

That's it -- just open a TypeScript or JavaScript file, and start editing.

For Python users:

1. Set up the Python extension by following the steps in the Python tutorial

2. Make sure that you're using Pylance as the Python language server by opening the VSCode settings page (File -> Preferences -> Settings)

3. Start editing Python files

4. After the Python language server finishes initializing, you should now see recommended completions

For Java users:

1. Set up the Java extension for Visual Studio Code by following the steps in the Java Tutorial

2. Make sure that you have a minimum of Java 8 Update 151 installed

3. Reload Visual Studio Code after enabling the Java extension

4. After the Java language server finishes initializing, you should now see recommended completions

For T-SQL users:

1. Set up the mssql extension for Visual Studio Code by following the steps in the T-SQL Tutorial

2. Reload Visual Studio Code after enabling the mssql extension

3. After the mssql language server finishes initializing, you should now see recommended completions

How do I report feedback and issues?

You can file an issue on our IntelliCode for VS Code extension GitHub feedback repo.

You can also check out our FAQ

Future Plans

There is much more to come -- sign up here for future news and updates!

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - AI-assisted development

# data[].attributes.attachment_link.readable_text
Visual Studio Code plugin that autocompletes filenames.

Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your favorite keybindings, and other IDE tools.
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.

Installation

In the command palette (cmd-shift-p) select Install Extension and choose Path Intellisense.

To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:

{ "typescript.suggest.paths": false }

Usage

Node packages intellisense

Use npm intellisense

Contributing

Something missing? Found a bug? - Create a pull request or an issue. Github

Are you a windows user?

There is an issue on windows with the period key. See Issue https://github.com/ChristianKohler/NpmIntellisense/issues/12

Add this to the keybinding:

{ "key": ".", "command": "" }

TsConfig support

BaseUrl

Pathintellisense uses the ts.config.compilerOptions.baseUrl as a mapping. So no need to define it twice. There is no support for paths at the moment.

For example:

{ "baseUrl": "src", }

would allow to type:

{ import {} from "src/mymodule"; }

Settings

File extension in import statements

Path Intellisense removes the file extension by default if the statement is a import statement. To enable file extensions set the following setting to true:

{ "path-intellisense.extensionOnImport": true, }

Per default, hidden files are not displayed. Set this to true to show hidden files.

{ "path-intellisense.showHiddenFiles": true, }

If set to false, PathIntellisense ignores the default "files.exclude" as well:

{ "files.exclude": { "**/*.map.js": true } }

Per default, the autocompletion does not add a slash after a directory.

{ "path-intellisense.autoSlashAfterDirectory": false, }

Absolute paths

Per default, absolute paths are resolved within the current workspace root path. Set it to false to resolve absolute paths to the disk root path.

{ "path-intellisense.absolutePathToWorkspace": true, }

Mappings

Define custom mappings which can be useful for using absolute paths or in combination with webpack resolve options.

{ "path-intellisense.mappings": { "/": "${workspaceFolder}", "lib": "${workspaceFolder}/lib", "global": "/Users/dummy/globalLibs" }, }

Use ${workspaceFolder} when the path should be relative to the current root of the current project. V2.2.1 and lower used ${workspaceRoot}. Newer version support both placeholders.

History

See changelog

License

This software is released under MIT License

# data[].attributes.attachment_link.title
Path Intellisense - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Visual Studio Code plugin that autocompletes filenames. Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your favorite keybindings, and other IDE tools. Learn more Track and prioritise tech debt and maintenance issues, straight from your IDE.

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - JavaScript and TypeScript playground in your editor.

# data[].attributes.attachment_link.title
Snippet Creator - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Create snippets quickly. Auto-detects language.

# data[].attributes.attachment_link.readable_text
The essential collection of React Snippets and commands.

Features

Only what you need and nothing more. No Redux. No React Native.

Simply, simple React snippets.

These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here. This is a hand selected set of snippets that work the way that you would expect, not just a copy of the documentation.

Snippets

Full Expansions

imr - Import React

import * as React from 'react';

imrc - Import React, Component

import * as React from 'react'; import { Component } from 'react';

imrd - Import ReactDOM

import ReactDOM from 'react-dom';

imrs - Import React, useState

import * as React from 'react'; import { useState } from 'react';

imrse - Import React, useState, useEffect

import * as React from 'react'; import { useState, useEffect } from 'react';

impt - Import PropTypes

import PropTypes from 'prop-types';

impc - Import PureComponent

import * as React from 'react'; import { PureComponent } from 'react';

cc - Class Component

class | extends React.Component { render() { return <div>|</div> } } export default |;

ccc - Class Component With Constructor

class | extends Component { constructor(props) { super(props); this.state = { | }; } render() { return ( | ); } } export default |;

cpc - Class Pure Component

class | extends PureComponent { state = { | }, render() { return ( | ); } } export default |;

fc - Function Component

const | = props => { return ( | ); }; export default |;

cdm - componentDidMount

componentDidMount() { | }

uef - useEffect Hook

cwm - componentWillMount

//WARNING! To be deprecated in React v17. Use componentDidMount instead. componentWillMount() { | }

cwrp - componentWillReceiveProps

//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead. componentWillReceiveProps(nextProps) { | }

gds - getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) { | }

shouldComponentUpdate(nextProps, nextState) { | }

//WARNING! To be deprecated in React v17. Use componentDidUpdate instead. componentWillUpdate(nextProps, nextState) { | }

componentDidUpdate(prevProps, prevState) { | }

cwun - componentWillUnmount

componentWillUnmount() { | }

cdc - componentDidCatch

componentDidCatch(error, info) { | }

getSnapshotBeforeUpdate(prevProps, prevState) { | }

ss - setState

this.setState({ | : | });

ssf - Functional setState

this.setState(prevState => { return { | : prevState.| } });

usf - Declare a new state variable using State Hook

const [|, set|] = useState();
Hit Tab to apply CamelCase to function. e.g. [count, setCount]
ren - render

render() { return ( | ); }

rprop - Render Prop

class | extends Component { state = { | }, render() { return this.props.render({ |: this.state.| }); } } export default |;

hoc - Higher Order Component

function | (|) { return class extends Component { constructor(props) { super(props); } render() { return < | {...this.props} />; } }; }

cpf - Class Property Function

Commands

React: class to className

Changes all occurences of class in JSX to className. This transform is safe to run multiple times on any document. No text needs to be selected as the command is executed on the entire document.

Thank You! ❤️

Special thanks to the following individuals who have helped with this project in some way.

# data[].attributes.attachment_link.title
Simple React Snippets - Visual Studio Marketplace

# data[].attributes.attachment_link.description
The essential collection of React Snippets and commands. Only what you need and nothing more. No Redux. No React Native. Simply, simple React snippets. These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here.

# data[].attributes.attachment_link.readable_text
Backed By

An amazing tool I've used before and they didn't ask me to say that :) - Extension Author

Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:

Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)

Go To: jump directly to the css file or open it in a new editor (F12)

Hover: show the definition in a hover over the symbol (Ctrl+hover)

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name

Configuration

cssPeek.supportTags - Enable Peeking from HTML tags in addition to classnames and IDs. React components are ignored, but it's a good idea to disable this feature when using Angular.

cssPeek.peekFromLanguages - A list of vscode language names where the extension should be used.

cssPeek.peekToExclude - A list of file globs that filters out style files to not look for. By default, node_modules and bower_components

See editor docs for more details

Contributions are greatly appreciated. Please fork the repository and submit a pull request.

TODO: Keep the changelog upto date

4.2.0

Support VSCode Workspace Trust #107

4.1.1

3.0.2

Use Globs for configuration options instead of RegExp via #61 ❤ @arch-stack

2.2.0

2.1.1

(Temporarily) fix bug #19 by handling errors from findDocumentSymbols

2.1.0

Add support for Symbol Provider #18

2.0.3

Fix bug #14 that caused CSS Peek to fail after any HTML comments

2.0.2

Fix bug that limited the language support only to HTML. Now supports all languages provided by "activeLanguages" config

2.0.1

Fix an error wherby the Overview was missing on the Visual Studio Marketplace

2.0.0

A complete rewrite featuring the new Language Server Protocol

Added scss support

Added multi definition support (provides all CSS rules matching the selector)

Added support for HTML tag selectors

1.3.3

1.3.0

Add configuration option to ignore file from CSS lookup

1.2.4

1.2.3

Workaround for bug if large number of files exist

1.2.2

Better recognition of CSS selector word from cursor position

Optimize code for fewer file lookups

1.2.1

1.2.0

Add less support

Configure search file extensions using "css_peek.searchFileExtensions"

1.1.0

1.0.0

# data[].attributes.attachment_link.description
An amazing tool I've used before and they didn't ask me to say that :) - Extension Author Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.

# data[].attributes.attachment_link.readable_text
A VS Code extension that generates random ints, floats, strings, words, etc.

This is intended to be a feature to feature VS Code port of Random Everything for Sublime Text.

Demo

Useage

Command Palette

Bring up the command palette:

⇧⌘P (OSX)

Ctrl + Shift + P (Windows/Linux)

Type "random":

Random: Int - Requires a range from a-b separated with a: -. Default: 1-100

Random: Float - Requires a range from a-b separated with a: -. Default: 1-100

Random: Letters - Generatates a random string of lower and uppercase letters with a length between 5 and 20

Random: Letters and numbers - Generatates a random string of lower and uppercase letters and numbers with a length between 5 and 20

Random: Country - Picks a random country

Random: Word - Picks a random word

Random: Text - Picks 24 random words

Random: Date - Picks a random ISO-8601 Date

Random: First name - Picks a random first name

Random: Last name - Picks a random last name

Random: Full name - Picks a random full names

Random: E-mail - Picks a random E-mail address

Random: Url - Generates a URL using random words

Random: Hex Color - Generates a random hex color formatted "#abc123"

Random: IPv4 Address - Generates a random ipv4 ip address

Random: IPV6 Address - Generates a random ivp6 ip address

Random: GUID - Generates a random GUID

Extension Settings

randomeverything.enable: Enable/disable this extension.

See changelog.

@TODO

References

# data[].attributes.attachment_link.title
Random Everything - Visual Studio Marketplace

# data[].attributes.attachment_link.description
A VS Code extension that generates random ints, floats, strings, words, etc. This is intended to be a feature to feature VS Code port of Random Everything for Sublime Text. Bring up the command palette: ⇧⌘P (OSX) Ctrl + Shift + P (Windows/Linux) Type "random": Random: Int - Requires a range from a-b separated with a: -.

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - 📸 Polaroid for your code

# data[].attributes.attachment_link.readable_text
atom & vscode

If you are interested, please try out our new prototype web app: 0xGG/crossnote

Supporting this project

Markdown Preview Enhanced is an open source project released under the University of Illinois/NCSA Open Source License. Its ongoing development is made possible thanks to the support by these awesome backers. You can help make this project better by supporting us on GitHub Sponsors, PayPal, or 微信支付 Wechat Pay. Thank you!

Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

These GitHub Sponsors and Backers help push this project forward 🎉.

Introduction

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

Feel free to ask questions, post issues, submit pull request, and request new features.

For more information about this project and how to use this extension, please check out our documentation ⬇︎

Documentation

To check out the documentation, visit

Contact me if you are willing to help translate the documentation :)

Keybindings

The cmd key for Windows is ctrl.

Changelog

Please check the Releases page of this project.

License
University of Illinois/NCSA Open Source License

# data[].attributes.attachment_link.title
Markdown Preview Enhanced - Visual Studio Marketplace

# data[].attributes.attachment_link.description
atom & vscode If you are interested, please try out our new prototype web app: 0xGG/crossnote Markdown Preview Enhanced is an open source project released under the University of Illinois/NCSA Open Source License. Its ongoing development is made possible thanks to the support by these awesome backers.

# data[].attributes.attachment_link.readable_text
What is it

Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

To use, select one or many chunks of code and press "Alt + W" ("Option + W" for Mac).
Download it on the Visual Studio Marketplace
How to Use It

Select one or more blocks of text or strings of text.

Press Alt + W or Option + W for Mac.

Type the tag name you want.

By default, pressing spacebar will deselect the closing tags, so you can add attributes to the opening tags (you can turn this feature off, see below). If nothing is selected when you run htmltagwrap, it will add an opening and closing tag at the cursor position.

NOTE: This extension works best in files that either use tabs or spaces for indentation. It may not work as well with mixed tabs/spaces.

Settings

You can change the default behavior of htmltagwrap with the following settings.

To open VS Code settings, click the "gear" icon > then "Settings"

Available settings

htmltagwrap.tag - The default HTML tag to insert.

htmltagwrap.autoDeselectClosingTag - Automatically deselect the closing tag after inserting a space.

Defaults

{ "htmltagwrap.tag": "p", "htmltagwrap.autoDeselectClosingTag": true }

Known Issues

When using the default setting "htmltagwrap.autoDeselectClosingTag": true:

If you undo and then redo wrapping, entering a space will not remove the selection on the closing tag as it normally would.

After wrapping, if you press space (removes the closing tag cursor) and then backspace to the tag element name, you won't get your closing tag cursor back.

I haven't found good solutions to these issues using the current extension API.

Contributing

Please create an issue on GitHub if you experience a bug. I also welcome pull requests.

0.0.7

After wrapping, you can add attributes to just the opening tags.

Upon spacebar press, cursors in the closing tags go away.

(see previous updates in the changelog)

# data[].attributes.attachment_link.description
Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once). To use, select one or many chunks of code and press "Alt + W" ("Option + W" for Mac).

# data[].attributes.attachment_link.readable_text
Relative path support for Visual Studio Code

Now you can get the relative path to any file in the workspace.

Just press Ctrl+Shift+H (Mac: Cmd+Shift+H) and select a file. If your workspace has more than 1000 files, you will be prompted to filter that list first. Alternatively, you can press open command palette F1 and search for Relative Path.

How to use

First, you will need to install Visual Studio Code. In the command palette ( Ctrl-Shift-P or Cmd-Shift-P) select Install Extension and choose RelativePath.

Important

In Multi root workspaces:

Everytime you switch to a file from a different folder the files in that folder are indexed and cached to improve search performance. If you have multiple large folders part of a workspace frequent switches between folders might slow you down.

In Single project workspace:

The caching of the filelist in the project happens only once. If your workspace contains a lot of files please wait for the initial file list to be created.

Options

The following Visual Studio Code settings are available for the RelativePath extension. They can be set in user preferences ( ctrl+, or cmd+,) or workspace settings (.vscode/settings.json).

	// An array of glob keys to ignore when searching. "relativePath.ignore": [ "**/node_modules/**", "**/*.dll", "**/obj/**", "**/objd/**" ], // Excludes the extension from the relative path url (Useful for systemjs imports). "relativePath.removeExtension": false, // An array of extensions to exclude from the relative path url (Useful for used with Webpack or when importing files of mixed types) "relativePath.excludedExtensions": [ ".js" ],

Bugs

Report them here.

Licence

# data[].attributes.attachment_link.title
Relative Path - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Now you can get the relative path to any file in the workspace. Just press Ctrl+Shift+H (Mac: Cmd+Shift+H) and select a file. If your workspace has more than 1000 files, you will be prompted to filter that list first. Alternatively, you can press open command palette F1 and search for Relative Path.

# data[].attributes.attachment_link.title
Rainbow Brackets - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - A rainbow brackets extension for VS Code.

# 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.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
Like it? Please leave a review. Found something wrong? Report an issue.
A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at real-time.

Usage/Shortcuts

1. Click to Watch Sass from the status bar to turn on the live compilation and then click to Stop Watching Sass from the status bar to turn off 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, compressed).

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

Quick status bar control.

Exclude specific folders by settings.

Autoprefix support (See settings section)

Installation

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

Settings & Commands

All settings are now listed in the Settings & Commands Docs.

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

See the full changelog here.

LICENSE

This extension is licensed under the MIT License

Thank you Ritwick Dey

A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it.

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

# data[].attributes.attachment_link.description
Like it? Please leave a review. Found something wrong? Report an issue. A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at real-time. Click to Watch Sass from the status bar to turn on the live compilation and then click to Stop Watching Sass from the status bar to turn off live compilation .

# data[].attributes.attachment_link.readable_text
Boost your productivity and code quality with these tools and extensions!

Programming is complicated. There are many best practices to remember, guidelines to follow, and 'known issues' to avoid while maintaining productivity and code quality.

The modern development process is unimaginable without automation. If something can be automated and shifted to tools, it's worth doing.

In this article, I will discuss several VS Code automation tips that frontend developers should follow. Let's Jump in!

Usually, when you make a change in your code, you need to refresh your browser manually to see the changes, right? In other words, if you make 100 changes to your code, you need to refresh your browser 100 times ( Tiring and Time-consuming! 😫).

Live Server, the cool extension available in VSCode, automates this for you.

It takes your stress away from saving and refreshing the browser every time you want to see how your changes look.

Live Reload, a shiny feature that comes with the Live Server, ensures your changes are rendered immediately as soon as you save your work. This gets even more exciting if you've got VSCode's auto-save feature enabled. Pretty awesome, right?😋

Live Server Example

Ever felt the need to automate the process of writing meaningful log messages? Turbo Console Logis the perfect choice for that! 🎉 With the help of Turbo Console Log, you can:

Insert meaningful log messages automatically.

Comment and uncomment all the log messages in the current document, inserted by the extension.

Delete all the log messages inserted by the extension from the current document.

Turbo Console Log

Tip: Build better Component Libs and Design Systems

Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.

OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →

An independently source-controlled and shared "card" component. On the right => its dependency graph, auto-generated by Bit.

Now it is possible to auto compile your SASS or SCSS files into CSS easy and inside the code editor itself in real-time with the Live SASS compiler and automatically gives you a live preview of the app or the compiled styles in your browser, just like this;

Live SASS Compiler

Live SASS Compiler is a handy extension available in VSCode with a lot of cool features including:

Live SASS and SCSS compilation.

Quick status bar control.

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

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

The customizable file location of exported CSS.

Ever changed an HTML tag name and forgot or incorrectly renamed the other tag? 😣 In an application that carries hundreds of code lines, this kind of manual update is difficult and tedious.

Let me give you two options.

You can either spend your precious coding time and try to figure out where you went wrong or simply install an extension and let it rename the second tag for you.

Auto Rename Tag is a super useful VSCode extension for developers; as the name suggests, it auto renames the second tag as the first one is updated and vice versa.

Auto Rename Tag Example

Code linting is a static analysis used to check programmatic errors or code that doesn't adhere to specific style guidelines.

"Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it." - ESLint site.

ESLint, one of the most downloaded extensions in VS Code, with almost 13 million downloads to make sure you stick to standard practices like positioning, indentation, and many more. This extension requires you to install ESLint on your computer either locally or globally, and you can simply do it by running npm install eslint.

You can visit the Visual Studio Code extension marketplace page for more detailed installation and configuration instructions.

Want to see a simple example of how ESLint can help you?

ESLint Example

This error is evident when you have a small amount of code. But imagine your code contains hundreds of lines. By running ESLint, you can quickly identify issues in your code to increase the code's integrity and quality.😃

Developers spend a lot of time and mental energy formatting their code.

After all, you don't need to bother about styling anymore if Prettier formats everything for you, right?

Prettier, a trendy VSCode extension among frontend developers, with 11 million downloads and counting, takes your stress away. You can just press that magic key, and poof 💨, the code is formatted. Here's why Prettier is incredible:

When the style guide changes, Prettier can automatically apply it across the whole codebase.

No effort in fixing formatting.

No time wasted discussing styling in pull requests.

No need to look up rules in a style guide.

Prettier not only supports JavaScript, but it also supports a lot of different syntax out of the box, including TypeScript, CSS, JSON, JSX, GraphQL, and many more.

Prettier Example

There are other similar extensions, and one of the popular ones is, Beautify! With a few settings and configurations, you never have to worry about writing ugly codes. Beautify turns your code into a beautiful and consistent one.

So far, I have discussed different extensions in VSCode that you can use to uplift your productivity. As the final tip for this article, I am gonna discuss pre-commit hooks. So what is actually pre-commit hooks? Some may have heard about it before, and some may have not.

Git hooks are one of the most underrated features in git and can enhance your productivity as a developer.

Did you ever want to run a command every time you commit or push? Then git hooks are exactly what you've looked for! 😎

Git hooks are custom scripts that run before or after a git command to automate manual tasks. There several git hooks available, and the pre-commit hook is one of my favorites.

Some of the exciting features of the pre-commit hooks are:

They are run first, even before you type in a commit message

Exiting with anything other than zero aborts the commit.

A Pre-commit hook is used to inspect the snapshot that is about to be committed.

assure you have not forgotten anything, ensure tests run, or examine whatever you need to check in the code.

With the use of a pre-commit hook, you can check for code style, trailing white spaces, unwanted imports, or check for appropriate documentation on new methods.

Great tooling helps developers to write faster, cleaner, and more consistent code. Since the beginning of its launch, Visual Studio Code (VS Code) introduced by Microsoft has gradually won many hearts.

In this article, I have discussed different extensions and methods you can use in VSCode, which will boost your productivity and automate the development process.

There are many more VS Code extensions that you can explore for all kinds of use cases. If you find any extensions worth sharing, mention them in the comments below.

Thank you for reading!!

# data[].attributes.attachment_link.title
VSCode Automations for Frontend Developers

# data[].attributes.attachment_link.description
Programming is complicated. There are many best practices to remember, guidelines to follow, and 'known issues' to avoid while maintaining productivity and code quality. The modern development process is unimaginable without automation. If something can be automated and shifted to tools, it's worth doing.

# 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.description
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

# data[].attributes.attachment_link.description
One place for all extensions for Visual Studio, Azure DevOps Services, Azure DevOps Server and Visual Studio Code. Discover and install extensions and subscriptions to create the dev environment you need.

# data[].attributes.attachment_link.title
VSCodeThemes - Preview Visual Studio Code Themes.

# data[].attributes.attachment_link.description
Preview VSCode themes from the Visual Studio Marketplace. Browse by trending, dark, or light themes.

# data[].attributes.attachment_link.readable_text
Adds simple jsdoc comments for the parameters of a selected function signature

Using

In a typescript or javascript file, select a function signature, ideally one that contains one or more parameters. Select the whole function signature then invoke the Add Doc Comments extension (open the command palette (F1 on Windows) and look for the command 'Add doc comments'. Hit enter.)

The extension will parse the selected signature and add @param and @return tags for each parameter and any return type in the selected signature, directly above the signature.

Limitations

The extension does not support any other type of jsdoc tags. It only calculates @param and @return

Parameter types are not inferred based on usage. If a type is not specified, empty braces {} are returned.

Other extensions

Document This provides the same functionality but supports many more tags

# data[].attributes.attachment_link.title
Add jsdoc comments - Visual Studio Marketplace

# data[].attributes.attachment_link.description
Extension for Visual Studio Code - Adds jsdoc @param and @return tags for selected function signatures in JS and TS