An open API service indexing awesome lists of open source software.

https://github.com/minamarkham/yonce-essentials

Essential extensions for web development
https://github.com/minamarkham/yonce-essentials

extension extension-pack vs-code-extension-pack vscode vscode-extension vscode-extension-pack vscode-extensions yonce

Last synced: 15 days ago
JSON representation

Essential extensions for web development

Awesome Lists containing this project

README

          

# Yonce Essentials Extension Pack

[![Badge for version for Visual Studio Code extension](https://img.shields.io/visual-studio-marketplace/v/minamarkham.yonce-essentials?style=for-the-badge&color=blue)](https://marketplace.visualstudio.com/items?itemName=minamarkham.yonce-essentials)

## Introduction

This extension pack is a collection of extensions that are used to enhance the VS Code experience. It is intended to be used with the [Yoncé Theme](https://marketplace.visualstudio.com/items?itemName=minamarkham.yonce-theme) and [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) extensions.

## Installation

1. Install [Visual Studio Code](https://code.visualstudio.com/)
2. Launch Visual Studio Code
3. Click on the Extensions icon
4. Search for `Yoncé Essentials`
5. Click **Install** to install it
6. Click **Reload** to reload the Code
7. From the menu bar click: Code > Preferences > Color Theme > **Yoncé Theme**
8. From the menu bar click: Code > Preferences > File Icon Theme > **Material Icon Theme**

## Included Extensions

The following extensions are included as part of this extension pack, and therefore, will be automatically installed along with it:

### Theme and UI

| Extension | Stats | Description |
| ---- | ---- | ---- |
| [Yoncé Theme ](https://marketplace.visualstudio.com/items?itemName=minamarkham.yonce-theme) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/minamarkham.yonce-theme?style=for-the-badge&color=blue) | Vibrant syntax theme on a dark, flat UI. Queen Bey-inspired. |
| [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/PKief.material-icon-theme?style=for-the-badge&color=blue) | Material Design Icons for Visual Studio Code |

### Coding Essentials

| Extension | Stats | Description |
| ---- | ---- | ---- |
| [:emojisense:](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/bierner.emojisense?style=for-the-badge&color=blue) | Adds suggestions and autocomplete for emoji |
| [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/formulahendry.auto-close-tag?style=for-the-badge&color=blue) | Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text |
| [Auto Renae Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/formulahendry.auto-rename-tag?style=for-the-badge&color=blue) | Auto rename paired HTML/XML tag |
| [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/aaron-bond.better-comments?style=for-the-badge&color=blue) | Improve your code commenting by annotating with alert, informational, TODOs, and more! |
| [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/streetsidesoftware.code-spell-checker?style=for-the-badge&color=blue) | Spelling checker for source code |
| [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/naumovs.color-highlight?style=for-the-badge&color=blue) | Highlight web colors in your editor |
| [Color Info](https://marketplace.visualstudio.com/items?itemName=bierner.color-info) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/bierner.color-info?style=for-the-badge&color=blue) | Provides quick information about css colors |
| [Color Picker](https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/anseki.vscode-color?style=for-the-badge&color=blue) | Helper with GUI to generate color codes such as CSS color notations. |
| [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/usernamehw.errorlens?style=for-the-badge&color=blue) | Improve highlighting of errors, warnings and other language diagnostics. |
| [Formatting toggle](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/tombonnike.vscode-status-bar-format-toggle?style=for-the-badge&color=blue) | A VS Code extension that allows you to toggle formatting settings ON and OFF with a simple click. |
| [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/GitHub.copilot?style=for-the-badge&color=blue) | Your AI pair programmer |
| [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/GitHub.copilot-chat?style=for-the-badge&color=blue) | AI chat features powered by Copilot |
| [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/eamodio.gitlens?style=for-the-badge&color=blue) | GitLens **supercharges** the built-in Visual Studio Code Git capabilities. |
| [Gremlins tracker](https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/nhoizey.gremlins?style=for-the-badge&color=blue) | Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. |
| [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/vincaslt.highlight-matching-tag?style=for-the-badge&color=blue) | Highlights matching closing and opening tags |
| [Indenticator](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/SirTori.indenticator?style=for-the-badge&color=blue) | Highlights your current indent depth |
| [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/VisualStudioExptTeam.vscodeintellicode?style=for-the-badge&color=blue) | AI-assisted development |
| [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/christian-kohler.npm-intellisense?style=for-the-badge&color=blue) | Visual Studio Code plugin that autocompletes npm modules in import statements |
| [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/christian-kohler.path-intellisense?style=for-the-badge&color=blue) | Visual Studio Code plugin that autocompletes filenames |
| [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/esbenp.prettier-vscode?style=for-the-badge&color=blue) | Code formatter using prettier |
| [SVG Previewer](https://marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/vitaliymaz.vscode-svg-previewer?style=for-the-badge&color=blue) | Show SVG preview to the side panel |
| [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/wayou.vscode-todo-highlight?style=for-the-badge&color=blue) | highlight TODOs, FIXMEs, and any keywords, annotations... |
| [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/shardulm94.trailing-spaces?style=for-the-badge&color=blue) | Highlight trailing spaces and delete them in a flash! |
| [Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/pflannery.vscode-versionlens?style=for-the-badge&color=blue) | Shows the latest version for each package using code lens |
| [vscode-random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/jrebocho.vscode-random?style=for-the-badge&color=blue) | Generates random data directly into VS Code |

## Recommended Extensions

The following extensions aren't included as part of this extension pack, but are recommended for additional functionality and enhancements:

| Extension | Stats | Description |
| ---- | ---- | ---- |
| [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) | ![Installs](https://img.shields.io/visual-studio-marketplace/i/pnp.polacode?style=for-the-badge&color=blue) | 📸 Polaroid for your code |

## Credits

All credits goes to original authors of the above mentioned extensions.

## License

The source code for this extension is licensed under the [MIT][LICENSE] license.

---


made with :heart: by me

[LICENSE]: LICENSE