VSCode extensions
Tags: vscode, productivity
Published: 2019-03-31 16:01:52

Original article in French on [my blog](https://lucasalt.fr/blog/extensions-vscode/), translated with [Deepl](https://deepl.com)

If you are a developer or you are interested in development, you can't have missed Visual Studio Code. In this article, I will introduce you to some extensions that improve your workspaces from a technical or aesthetic point of view.

### Technical improvements
#### [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vetur is an extension used for application or website development with **VueJS**. It allows you to enable syntax highlighting for `.vue` files, to have an auto-completion system specific to VueJS and proposes to enable formatting and debugging of your applications by installing **Node.js** modules.


#### [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
Developed by Microsoft, the extension offers full support for the Python language in VSCode. Like Vetur, the extension offers a system for auto-completion, debugging, formatting your files, and more.

#### [StandardJS - Javascript Standard Style](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs)
To facilitate the development of an application within a team, guides have been created to agree on fixed rules. There are several such as **Airbnb** or **Standard**. With this extension, when you do not comply with a rule in the guide, an error message and an explanation will be displayed so that the error can be corrected. Thanks to the command palette, you can also format the entire file so that all correctable errors are corrected.

#### [EditorConfig for VSCode](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
Just like **StandardJS - Javascript Standard Style**, the **EditorConfig for VSCode** extension allows you to set up different code rules depending on the projects. With this extension, when you have an `.editorconfig` file in your project, it will override the settings you have in your configuration. For example, you have configured VSCode to indent your code with 4 spaces and in your `.editorconfig` file, you do not indent the code with 4 spaces but not 1 tab. The extension will load this to modify your configuration only in the current project to follow this rule.

### Visual improvements
#### [Beautiful UI](https://marketplace.visualstudio.com/items?itemName=swashata.beautiful-ui)
The extension offers a collection of 32 themes of different colors based on various sources such as _Monokai Classic_, _Base16_, _One Dark_, and more.

#### [Andromeda](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda)
![](https://lucasalt.fr/assets/images/blog/extensions-vscode/andromeda.png)

#### [Palenight Theme](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)
![](https://i.imgur.com/1mYWEP4.png)

#### [Sublime Material Theme](https://marketplace.visualstudio.com/items?itemName=jprestidge.theme-material-theme)
![](https://lucasalt.fr/assets/images/blog/extensions-vscode/sublime_material_theme.png)

#### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
**Material Icon Theme** offers up to 400 different icons for your files and folders while respecting the standards agreed by Google with **[Material Design](https://material.io/)**.

#### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
Like **Material Icon Theme**, the extension offers a wide range of icons but is developed by a Microsoft team.


### Various extensions
#### [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
**Polacode** allows you to take "photos" of your code just like **[carbon](https://carbon.now.sh)**  but directly in VSCode.
![](https://lucasalt.fr/assets/images/blog/extensions-vscode/polacode.gif)

#### [colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)
**colorize** allows you to view colors directly in your css/sass/scss/scss/stylus/...
![](https://lucasalt.fr/assets/images/blog/extensions-vscode/colorize.gif)

#### [Setting Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
If you work on several computers and want to have the same configuration and extensions on each one of them, **Setting Sync** is for you! Each time extensions are added or VSCode settings are changed, the extension updates a set of files on Gist. When you change computers, simply install **Setting Sync** and connect the extension to your Gist containing all your configuration files.