One Text Editor To Rule Them All

Photo by Redd Angelo on Unsplash

Alright, I'm sure you're thinking "the title can't be correct," and you know what?  You're right.  I don't think that there is any text editor that is the master of them all.  Competition is healthy and in open-source, does that word really even exist?

This week, I'm taking a look at different code editors to see what works best for my workflow.  The editors in question are Atom and Visual Studio Code.  Being someone who is interested more in function over form, I typically enjoy working on the server-side, using IDE's like Visual Studio 2013-2017 when working with languages like C++ (my favourite).  This past summer, I finally got my hands dirty working solely with Atom and funny enough, I wrote code for the server-side within it using Node.js and its robust frameworks.  However, none of that is important right now.  What is important is which is better for me?

Atom

Atom is an excellent text-editor (built by GitHub) that I really enjoy using. With integrated Git support right out of the box it just speeds up the workflow the minute you start using it.  Adding and/or removing projects is as simple as Ctrl+Shift+A and then choosing from the explorer in Windows. Navigating through the project structure is simple too, with a Tree View pane on the left and Ctrl+Shift+F, you can easily find what you're looking for in a matter of seconds.  The GIF below will demonstrate as I search for the 'process' variable across the project.



Visual Studio Code

Visual Studio Code utilizes many of the same key bindings.  The reason for this is likely because both editors are built on top of the Electron platform; consequently developed and built by GitHub.  Since I was already familiar with Atom, I decided that I would focus my time working with Visual Studio Code to get a feel for what else the world has to offer.

To get started, I downloaded the Best Resume Ever source code and added the project folder by using a different key binding (Ctrl+K Ctrl+O) that I later changed to match Atom's (Ctrl+Shift+A). Here's an image showing you what it looks like.


Visual Studio Code
Super awesome.  We have a tree view on the left (and it's colourful) and we have access to the Terminal, Debugger, Warnings/Errors, and Output as seen on the bottom portion of the screen.  Just like Atom, Git Integration is built-in and repositories can be utilized for version control with ease.  Alright, let's start configuring this.  I'll start with tab indentation.

I personally don't like using the really large tabs.  I know it makes it easy to read code, but when you start writing and you have a horizontal wave starting, it becomes a nuisance to read.  Right out of the box, VS Code attempts to guess your indentation style based on the file you've opened.  We can change that to match our own personal style, or the style of the organization/company we work for so everything is consistent.  Not a difficult task as you can see in the GIF below.


By using the keybinding Ctrl+, we are able to see all of the default settings that the text editor offers.  For the sake of speed, I had already cut the values I wanted to change and pasted them as new User Settings.  If you're curious which ones I used to set the tab indentation to 2 spaces rather than 4, search for "editor.tabSize".  To make sure your settings don't get overwritten on every project, set the "editor.detectIndentation" value to false.  You're all set.

Extensions

One of my biggest pet peeves is when I'm working and get on a roll, only to find out that I'm having trouble pulling into a repository.  I'm sure many developers have run in to this, and it certainly sucks.  Luckily, with some searching and a little inspiration from a classmate's post, I found Git Merger.  

GitMerger
Git Merger is a Merge-Resolving extension that makes merging project files easier and less of a headache.  Using it, we can merge a branch into our working branch, abort merges, stash our work and then unstash when we're ready.  Thankfully, we can use this directly from the Command Palette (Ctrl+Shift+P) and enter simple commands that help us make our stressful developer lives easier.  

Speaking of easier, JavaScript is becoming more powerful and is making incredible moves into nearly every platform.  Mobile, Desktop, Servers...you name it, JavaScript is there.  So why not focus on linting my JavaScript to make sure my code meets industry standard.  JSHint is a VS Code extension that makes sure that your JavaScript files are clean.

JSHint
Without opening my own project files, JSHint immediately detects that there are some errors in the Best Resume Ever project.  In the node directory in the app.js file, JSHint detects 22 warnings.  It's not necessarily perfect because there's some ES8 JavaScript formatting that hasn't been accounted for like Async/Await functions, but it works which is great.  You can see it in action below.

JSHintWorking

Looking To The Future

Moving forward, I think I'm going to continue to invest my time in VS Code.  I don't have anything against Atom (still love using it) but the VS Code interface becomes much more intuitive the more I use it.  With integrated debugging features, a lot of packages, and access to the Terminal in the application I think I'm going to keep finding new ways to improve my workflow.  Next step, integrate the C++ compiler so I can keep working with my favourite language...in any OS environment.

Comments

Popular Posts