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 (8)
colorize seems nice! I've had to add the setting below to get the variables to be colorized also.
It's work very well for me, I just need to add this for my JS files
Polacode doesn't seem to work :(
Hi !
1) Select code
2) F1 and search polacode
3) Enter, and save the picture
Or just press F1, search Polacode and paste your code 😉
tapping on Polacode and expecting it to open up but nothing. So no where to enter or save anything
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 + sto save the image.Andromeda. Yes!. This is what I've been looking for. Thanks!