Visual Studio Code editor

Visual Studio Code editor +17 Best Plugins And Themes

Visual Studio Code is a code editor from Microsoft that has actually everything you need to comfortably work with JavaScript, React, Angular, Vue and lots of other frameworks and languages. Available for Mac, Linux and Windows.

Download Visual Studio Code here

What makes it so great?

  • It’s fast and simple – it’s a code editor, not fully featured IDE and I think of it as an advantage!
  • Built in IntelliSense – very effective code complete system
  • Built in debugger, so you can use a plugin, connect VIsual Studio Code to Chrome and debug code nicely (as a Front End developer) or just use an internal debugging system for Back End
  • Built in Git
  • Built in Emmet
  • Hundreds of plugins and themes and very fast development going into right direction

Visual Studio Code Twitter (if you want to be up-to-date)
https://twitter.com/code

Guide for new people, various tips and tricks
https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Well, people move to this editor from Brackets, Sublime Text, Atom and even PhpStorm/WebStorm so it’s definitely worth to test it!

 

22 Best Visual Studio Code Extensions for Web Development

If you have used Visual Studio Code before (even for a moment), you know it’s highly customizable, through extensions and themes.

Here are some of the best plugins for web development (and not only!).

If you want to find more, here are the VS Code plugins on the Marketplace.

1. Emmet

Built in plugin that lets you write HTML and CSS code using shortcuts. I don’t imagine myself not using it right now for any web development (HTML/CSS).

2. Debugger for Chrome

Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

This plugin allows you to debug your code directly inside Visual Studio Code, and in the same time in Google Chrome. Debugging with it becomes really easy and comfortable, no need to jump through windows again.

Today’s JavaScript debugging is much more than writing console.log() statements, printing out values and checking them. Google Chrome has a lot of great built in features Chrome has features that make debugging a nice experience, and now you can move all of it to Visual Studio Code!

3. Javascript (ES6) Code Snippets

Link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Don’t tell me you want to write everything by hand. I will never believe you. Even beginners don’t do it!

JavaScript snippets allow you to quickly create an import statement, anonymous function, module require and many other popular pieces of ES6 JavaScript code. You won’t have to retype the same code over and over again.

4. Path Intellisense

Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Really useful extension that helps Visual Studio Code recognize the paths to files and directiories in your project. As you start typing, you will get suggestions for file and directory names. You will save a lot of time spent for searching inside your project. It can get tricky especially in large projects.

5. Project Manager

Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Switching between projects in VS Code using the default feature (workspaces) doesn’t work very well. You have to save the workspace somewhere on your computer, then find it and open again.

This issue is nicely resolved with Project Manager extension. You get a new options in your command line and sidebar. Now you will be able to quickly switch between the projects, save them or delete directly from the command line.

So simple, yet a great way to improve your workflow and avoid distractions.

6. Prettier

Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

One of the most popular tools to format your code. I used to think a human will write the highest quality code… I think NO MORE when I saw what this tool can do and how can it improve your workflow.

It’s really easy to set up and has many configuration options which can also be project-based.

7. Import cost

Link: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Super simple extension that tells you how much space (normal and gzipped) will the specific package take in your project.

8. Faker

Link: https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker

Everybody needs some dummy data from time to time. With this extension you no longer have to generate yourself lorem ipsum, cut the sentences and paste them in specific places.

With faker you can generate random, real looking details, like first and last name, full address, city, email address, countries, dummy images, financial informations and much more. A huge timesaver and also makes your project look more natural!

9. Bracket Pair Colorizer

Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

One of these extensions that will make reading code much easier. If you have lots of nested code, it’s often difficult to understand which brackets match with each other. Now you will see them colored and will find the pair without any waste of time!

10. Indent rainbow

Link: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Rainbow? Maybe a unicorn nearbye? No worries, this extension just colorizes indentations in Visual Studio Code, so it’s a lot easier to read the code.

11. Auto Rename Tag

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

If you need to rename a tag in HTML, you no longer have to do it manually. With Auto Rename Tag you can change one part of it and the other one will be updated automatically.

12. ESLint

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Popular tool to lint your code and format it. Widely used on multi-person projects where you should thrive to keep the code like it was written by one person.

13. Quokka

Link: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

With Quokka you get a scratchpad directly in Visual Studio Code. No need to go to Google Chrome, open the console etc.

14. Git Lens

Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

With Git Lens you get all the informations you need during your work. Commit author, searching, file history, blame and much more that will improve your Git workflow.

Also have a look at Git History. It allows you to check the history of commits in your repository, in a readable way.

15. Live server

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

If you need a quick way to check how your app looks like on the server, this is the extension to use. The server will automatically refresh if there are any changes in Visual Studio Code.

Your app will run on a localhost server.

16. Better Comments

Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

As it says, you will be able to write various types of comments in much better and easier way. It also has color codes for todos, alerts, highlights etc. Definitely worth trying if you comment a lot.

17. VS Code Icons

Link: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

With this plugin you can easily customize default VS Code icons. It just lookes nice and has been downloaded by over 10 million people.

 

Top 5 Visual Studio Code Themes for Web Development

  • Shades of Purple – one of the best themes for Visual Studio Code, professionally looking, detailed and very pleasant to use
  • One Dark Pro – Visual Studio Code theme directly from Atom editor
  • Monokai Pro – from the author of the original Monokai color scheme
  • Material Theme – theme created in a popular Material Design
  • Noctis – collection of light & dark themes with a well balanced blend of warm and cold colors

and muuuch more (over 2000+ VS Code themes available now) which are available here: https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads

Leave a Comment

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Share
Share
Reddit