Which Code Editor Should I Use?

Jordan Ashment
Jordan Ashment DGM Portfolio Review
5 min readSep 28, 2018

There are so many different code editors out there for web developers to use. From Sublime to Brackets and Atom to Visual Studio, there are so many to choose from! Which one should you use? I am not here to tell you which one is the best for you because that is a decision that everyone needs to make for themselves. I am here, however, to talk about my experiences and what code or text editors I prefer.

First off, a text or code editor is used to edit files of code in projects, in the context of this article, for websites and web applications. I will use the terms text editor and code editor interchangeably. There are many different editors out there and all of them do something a little bit different. Some are meant specifically for coding in languages like C# and C++. These editors need something a little more powerful to be able to compile the code that is being written. Those code editors are called “IDE’s” or Integrated Development Environments.

In this article, I will specifically talk about editors that are used for HTML, CSS and JavaScript projects. The HTML makes up the main content of the site such as the text and headings, CSS makes up the visual aspect of the project and JavaScript adds functionality and effects/animations. Each part of a project fits into separate files with different file extensionts (.html, .css, .js etc.).

Sublime Text

Sublime Text’s Main Screen

There is are so many good things that I can say about Sublime. It is probably the one that I have used the most. It has a very simple interface and it is just a great text editor. I think that the reason I like Sublime so much is just that it really is very simple and easy to use. You can bring the project folder into the editor and see all of the other sub-folders and files.

There are various languages that can be used and each of them have a special color coded view. This view is different for each language. This is very helpful when editing many lines of text. There is also a little bar on the side of your text that shows all of the text that you have written. You can click on the text to the right to jump directly to that part of your code. This makes it easy especially when the files are huge. There are also ways to add plugins and extensions to make your life easier. For example, I added one that helped when editing JavaScript, showing errors and hints. This is a very nice feature.

Sublime is a fantastic editor and anyone wishing to edit code would have made a great decision if they were to choose to use Sublime Text.

Visual Studio Code

Microsoft Visual Studio Code’s Main Screen

Another editor that I want to talk about is actually one that I have just begun using. This editor is one that I honestly didn’t think that I would be using this code editor but Microsoft Visual Studio Code is fantastic. Now, this editor is not to be confused with Microsoft Visual Studio, they are very different editors. Visual Studio Code has a very similar feel to Sublime Text. There is a place to the left that shows the folders and files and even a separate portion that shows the files that were most recently edited.

I think that the thing that most impressed me about this editor is how easy it is to integrate with Git and Github. To the right of the folder view, there are five different buttons. One of them toggles the folder view, another has a search function, one is for source control, another is a debugger and the last one shows installed extensions and gives recommendations of others depending on your project. The source control button will actually even show a notification letting you know that there are changes to be staged. If you click into this area it show the files that have been changed and even lets you add a message and commit right there in the editor!

WYSIWYG

The last kind of editor that I want to mention is called a “WYSIWYG” editor. Kind of a strange word right? It is actually an acronym that stands for What You See Is What You Get. These kind of editors let you see what you are coding immediately as you input the code. The one that may be the most well known is called Codepen.io.

Creating a ‘Pen’ in Codepen

As can be seen above, the layout is fairly simple. You have the three sections for HTML, CSS and JavaScript and what the page will look like at the bottom. As mentioned before, the nice thing about Codepen is that you are able to see what your code will look like on a web page immediately upon writing it. For simple HTML, CSS and JavaScript projects, this is a fantastic tool. For larger projects with multiple frameworks and plugins, this editor is probably not the best. That being said, Codepen.io is constantly updating and may have something a little more robust in the future. There are other WYSIWYG editors out there but in my experience, they have to be downloaded and installed. Codepen.io is unique because it can be used right from the browser.

These text editors are fantastic and will help any developer with the projects that they are working on. Sublime Text, Visual Studio Code and Codepen.io all have great features that make them wonderful editors. All it comes down to is what features you want for the project you are making and which editor feels best to you.

Jordan Ashment is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. This article relates to various projects in the Principles of Web Languages Course and is representative of the skills learned.

--

--