{"id":2703,"date":"2019-09-20T10:12:00","date_gmt":"2019-09-20T10:12:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2703"},"modified":"2019-08-25T10:31:36","modified_gmt":"2019-08-25T10:31:36","slug":"15-essential-plugins-for-visual-studio-code","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/15-essential-plugins-for-visual-studio-code\/","title":{"rendered":"15 Essential Plugins for Visual Studio Code"},"content":{"rendered":"\n

Visual Studio Code is a free, cross-platform text editor developed by Microsoft. It is quickly becoming a crowd favorite thanks to its excellent performance and the exuberant amount of features it offers.<\/p>\n\n\n\n

Just like most IDEs, VSCode has an extension marketplace containing thousands of plugins with varying quality. To help you pick out the ones worth downloading, we made this collection of the extensions we found most useful and fun.<\/p>\n\n\n\n

1. Open-In-Browser<\/a><\/h2>\n\n\n\n
\n
\nhttps:\/\/tutorialzine.com\/media\/2017\/06\/open-in-browser.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

VSCode doesn’t offer any built-in interface for opening files directly in the browser. This extension adds a\u00a0Open With Default Browser<\/em>\u00a0item to the contextual menu, as well as command palette options for opening in a client of your choice (Firefox, Chrome, IE).<\/p>\n\n\n\n

2. Quokka<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/quokka.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Quokka is a debugging tool that gives live feedback on the code you are writing. It shows you previews of the results of functions and calculated values for variables. The extension is easy to configure and works out of the box with JSX or TypeScript projects.<\/p>\n\n\n\n

3. Faker<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/faker.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Quickly insert placeholder data using the popular\u00a0Faker<\/a>\u00a0JavaScript library. You can generate random names, addresses, images, phone numbers, or just paragraphs of classic Lorem Ipsum. Each category has various subcategories so you can make the data fit your needs.<\/p>\n\n\n\n

4. CSS Peek<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/css-peek.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

WIth this extension you can trace the definitions of CSS classes and ids in your stylesheets. When you right click on a selector in your HTML files, choosing the options\u00a0Go to Definition<\/em>\u00a0and\u00a0Peek definition<\/em>\u00a0will send you to the CSS code in which you’ve styled them.<\/p>\n\n\n\n

5. HTML Boilerplate<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/html-boilerplate.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

The HTML boilerplate extension will save you from having to manually write the\u00a0head<\/code>\u00a0and\u00a0body<\/code>\u00a0tags of a new HTML document. Just type\u00a0html<\/code>\u00a0in an empty file, hit the Tab key, and a clean document structure will be generated.<\/p>\n\n\n\n

6. Prettier<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/prettier.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Prettier<\/a>\u00a0is the most popular code formatter in web dev right now. It allows your team’s code look the same, no matter who wrote it. This extension makes it possible to automatically apply Prettier and quickly format whole JS and CSS documents. If you also want to throw ESLint in the mix, there is\u00a0Prettier – Eslint<\/a>.<\/p>\n\n\n\n

7. Color Info<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/color-info.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Small plugin that gives you various information about the colors you’ve used in your CSS. By hovering on a color you can see a larger preview of how it looks, as well as info about its translation to all formats (hex, rgb, hsl, and cmyk).<\/p>\n\n\n\n

8. SVG Viewer<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/svgviewer.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

This extension adds a number of utilities for working with SVGs in Visual Studio Code. It makes it possible to render SVG files and see how they look like without having to leave the editor. There are also options for converting to PNG and generating data URI schemes.<\/p>\n\n\n\n

9. TODO Highlight<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/todo-highlight.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

This tool marks all TODO comments in your code, making it easier to track down any unfinished business before pushing to production. By default it looks for TODO and FIXME keywords but you can add your custom expressions as well.<\/p>\n\n\n\n

10. Icon Fonts<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/icon-fonts.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Tiny snippets for including icon fonts in your project (from a CDN) and then adding the icons themselves. The extension supports over 20 popular icon sets, including Font Awesome, Ionicons, Glyphicons, and Material Design Icons.<\/p>\n\n\n\n

11. Minify<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/minify.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Extension for minifying your code. It offers a ton of customization settings and the option to automatically minify on save and export to a .min file. Minify works with JavaScript, CSS, and HTML through\u00a0uglify-js<\/a>,\u00a0clean-css<\/a>, and\u00a0html-minifier<\/a>\u00a0respectively.<\/p>\n\n\n\n

12. Change Case<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/change-case.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

VSCode has limited options for transforming text. Out of the box it can only do lowercase and uppercase transforms. This plugin adds a lot more commands for modifying strings, including camelCase, kebab-case, snake_case, CONST_CASE, and others.<\/p>\n\n\n\n

13. Regex Previewer<\/a><\/h2>\n\n\n\n
\n
https:\/\/tutorialzine.com\/media\/2017\/06\/regex-previewer.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n

Useful tool for live testing your regular expressions. It works by applying the regex pattern over any text file opened to the side, highlighting all the matches. Kinda like\u00a0RegExr<\/a>\u00a0but right inside your editor!<\/p>\n\n\n\n

14. Language and Framework Packs<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

VSCode ships with support for a large number of languages. If for some reason your programming language of choice isn’t included, you can download an extension pack which will add autocompletion, proper indentation, and other utilities. Some web dev frameworks like\u00a0react native<\/a>\u00a0and\u00a0vue<\/a>\u00a0also offer language packs.<\/p>\n\n\n\n

15. Themes<\/a><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Of course, the most important of all extensions are the themes. You’ll be looking at your VSCode editor every day, why not make it more beautiful? There are tons of customization plugins that change the color scheme and the icons in the sidebar. Here are some of our favorites:<\/p>\n\n\n\n