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.