LucasAlt

Posted on Mar 31, 2019 • Edited on Mar 8, 2020

VSCode extensions

#vscode #productivity

Original article in French on my blog, translated with Deepl

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

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

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

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

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

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

Palenight Theme

Sublime Material Theme

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.

vscode-icons

Like Material Icon Theme, the extension offers a wide range of icons but is developed by a Microsoft team.

Various extensions

Polacode

Polacode allows you to take "photos" of your code just like carbon but directly in VSCode.

colorize

colorize allows you to view colors directly in your css/sass/scss/scss/stylus/...

Setting 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.

Top comments (9)

Luka • Apr 1 '19

colorize seems nice! I've had to add the setting below to get the variables to be colorized also.

"colorize.colorized_variables": [
        "SASS",
        "CSS",
        "LESS",
        "STYLUS"
    ]

LucasAlt • Apr 2 '19

It's work very well for me, I just need to add this for my JS files

Nina • Apr 1 '19

Polacode doesn't seem to work :(

Thomas Bnt • Apr 1 '19 • Edited

Hi !

1) Select code
2) F1 and search polacode
3) Enter, and save the picture

LucasAlt • Apr 2 '19

Or just press F1, search Polacode and paste your code 😉

Olamide Agboola • Apr 29 '19

tapping on Polacode and expecting it to open up but nothing. So no where to enter or save anything

LucasAlt • Apr 30 '19

You can copy and paste your code when Polacode is already open or you can select your code and open polacode.
Then, just press ctrl + s to save the image.