My Text Editor of Choice: Visual Studio Code

I’ve used a few different text editors and IDEs (Integrated Development Environments) since I first began learning web development. The first text editor I used (not counting Notepad) was Notepad++. It’s what I used all throughout my first web development courses. It is very basic but I stuck with it for a while because it was what I knew, and for some reason it didn’t occur to me that there may be something better out there.

Then I began attending university, where we used a variety of different programs: BlueJ for Java, then later Visual Studio when we were learning C++. BlueJ is made for beginners and it shows, but I did like using Visual Studio for a while. Then some friends told me I should use Eclipse, and others told me I should use NetBeans, so I tried both and NetBeans became my IDE of choice for a while. I was primarily coding in Java at the time.

Now that I’m trying to focus on web development I’ve begun using Visual Studio Code, a text editor that has a lot of similar functionality to an IDE, especially when there are so many useful extensions available. I have to say that I really like it. I particularly enjoy how easy it is to push updates to Github using the integrated Git functionality. It stopped me from having to actually learn the proper commands for quite some time! (I don’t actually recommend you use these shortcuts until you are familiar with using Git via the command prompt.)

One thing I find particularly useful for web development is the fact I can use Emmet, which is already integrated into Visual Studio Code, to easily create HTML. For example, if I want to start a new HTML file, all I have to write is ! followed by the tab key. This will create the HTML boilerplate which gets tedious to type out by hand after a while. You can also create HTML tags by just writing the tag name and selecting the one you want from the drop-down list that appears. For example if I type ‘div’ I can change that into a set of div tags in this way. There are many other things you can do with Emmet but to be honest this is all I’ve been doing with it at this point. If you’re interested in reading more about Emmet then you can check out the documentation.

Extensions

I use a number of extensions, some of which I’d rather not try and code without. I use HTML, CSS, JavaScript and Python so the extensions I use are centered around them.

  • Bracket Colorizer – One of my biggest problems with JavaScript is how many sets of brackets you sometimes end up with. Bracket Colorizer makes it easy to see which sets of brackets go together by color coding them. I feel this is a must-have.
  • ESLint – This can auto format your code and will also tell you if there are any linting errors, which could be bugs or stylistic errors among other things.
  • JavaScript (ES6) Code Snippets – This makes it easier to do many things in JavaScript, and since I hate JavaScript I love using this. All you need to do it type a few letters representing the snippet you want and press tab to have it written out for you.
  • Open-In-Browser – Lets you easily view an HTML document in your browser using a shortcut.
  • Python – Obviously I have the Python extension, which provides a range of features to make coding with Python easier such as debugging and formatting.
  • Dracula Official – This definitely isn’t a must have. This is the theme I’m currently using and I just wanted to make sure everyone’s aware that there are many different themes you can apply to your editor using extensions.

These aren’t necessarily all of the best extensions, just the ones I find useful at the moment. I’m sure at some point I’ll find others I like, especially if I learn other languages or start having to actually use Git with other people.

One thought on “My Text Editor of Choice: Visual Studio Code

  1. I’ve been using VS Code for my Lambda School projects too. I really like it. Our tech lead recommended some extensions for us and I wrote a blog post about it a week ago. If you like the Bracket Colorizer, you might also like Indent-Rainbow, which colorizes nested start and end tags in HTML (and maybe other languages). I also like Highlight Matching Tag, because it helps me to easily see where containers start and end.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s