How to choose a CODE EDITOR for WEB DEVELOPMENT (IDE?)

Today we will talk about CODE EDITORS for WEB PROGRAMMING, what you should watch out for when choosing this tool which will follow you from now on and some tips on how you can use and configure your editor.

Also, follow me on GitHub and also Dev.Lawyer's profile so that you can have instant access to all the content I am posting here.

I also present to you guys and girls the video I made on this topic from my YouTube channel, which is where I share some thoughts, tips and projects I am currently working on with other tech-fanatics, whether you are a developer, lawyer or enthusiast. Please also consider subscribing to my channel to not miss future videos and to join our live "coding sessions" and a nice, relaxing tech-related chat -- I promise to keep things interesting. The content is in Portuguese, but you can watch my videos with subtitles (maybe I will switch to English in the future, if this makes sense).

Watch here: https://youtu.be/h73ZVeWRsj4

All set? Follow me then.

What is a Code Editor?¶

Se você tem interesse em codar, já deve ter se deparado com muitas recomendações de programas para escrever o seu código. A discussão sobre qual o melhor editor de código costuma ser polêmica, com cada programador indicando a sua preferência como a única alternativa viável, mas vamos ser objetivos: o melhor editor de código é aquele em que você se encontra melhor, sabe os atalhos e consegue, enfim, trabalhar mais rápido.

If you're interested in coding, you've probably already come across many recommendations for programs to write your code. The discussion on which is the best code editor is often controversial, with each programmer indicating their preference as the only viable option, but let's be objective: the best code editor is the one you are best at, know its shortcuts and can, well, work faster.

Depending on the programming language you want to study, there are specific editors with even better features that help you develop your program. For example, if you're developing in Python, you might like PyCharm. If you want to program in Java, you can possibly find advantages when using Netbeans. The possibilities are plenty.

For web programming, however, I recommend that you start programming using a Code Editor that is light and functional, with good integrations that will help you to conduct a more efficient work.

A Code Editor can even be your regular text editor, like Notepad, but it's interesting to look for some program that at least brings you good syntax highlighting functionality. What does that mean? It means that the Code Editor can highlight different parts of the "grammar" of your code, improving its understandability.

Is the Code Editor an IDE?¶

Have you ever heard of IDE? IDE stands for "Integrated Development Environment" and it aims to provide more functions than a Code Editor. As a rule of thumb, an IDE has more features that can help you program (it may contain emulators, compilers, other libraries, etc.) in addition to the existing code editor itself.

The Code Editor, on the other hand, has a simplified approach, being only a text editor with "something extra" -- normally, syntax highlighting and integrations that help you to program.

Our recommendations 😎¶

For Web Programming you will find several options of Code Editors, but find below some very famous and most used code editors today, all with Windows, Linux and Mac versions:

1. Visual Studio Code (free, open source);

2. Atom (free, open sorce); e

3. Sublime (paid, but it has an evaluation version without time constraints).

These editors already have syntax highlighting for most common languages, and if they don't, you can  simply install new syntax through plugins in the editor itself. With either option, you will certainly be well taken care of.

To install, simply access the corresponding website, download and follow the installation instructions. For my projects I used Atom for a long time, but given that (i) in a preliminary research I noticed that many developers are using VSCode, and (ii) it is possible to install a plugin to use the same Atom shortcuts in VSCode (Atom Keymap) I'm going to show you here the basic aspects and settings you can do to prepare your machine for development using VSCode.

VSCode: a brief tour¶

So let's go through the main features of one of the most used Code Editors for Web programming today: Visual Studio Code (VSCode). In this brief tour we will show you what is most important features for your starting projects. Below is the splash screen you'll come across when you open the program for the first time:

VSCode

1. Activity bar

You can open a project folder in VSCode by going to File > Open Folder menu and selecting the root folder of the project you want to edit. Once opened, you'll see the options on the Activity Bar, which is the menu bar on the left. The options I want to show you are the following:

What we will see today

a. File Explorer

The first menu is the File Explorer, which will show you the structure of your project in tree view. To open a project file, just click on its name and it will open in the space on the right:

File Explorer

b. Source Control

The second option is the srouce control. Instead of using Git from the terminal to give the necessary commands, you can do that here. You can do git commit, push, pull and everything else.

Version control using Git inside VSCode

It also shows you a record of changes made before your commit took place, with an instant preview of the differences between the file before and after the changes.

Changes and differences between versions

Not sure how Git works? See our past content on the subject here: How to use Git and GitHub: a step-by-step dummies' guide

 

c. Extensions

The last menu we'll show you is Extensions. It allows you to expand the usefulness of VSCode with interesting features.

You can add support for programming languages ​​that are not pre-configured in the editor, for example, but there are still many other interesting features that are worth exploring. We will suggest some here in this content.

VSCode Extensions

2. Command Bar

The Command Bar contains all existing commands in VSCode and can be very useful in your day to day operations. To access it, just press Ctrl + Shift + P and the bar will open. You can also open it from the View > Command Pallete menu, but the keyboard shortcut is easier to access once you know it.

Some interesting commands you can look for in the command bar (and what to type to find the option quickly):

zen (toggle View: Zen mode) - ZEN mode. It takes distractions off your screen by letting you focus only on the file you're working on. To disable it, just press Ctrl + Shift + P again and type zen to open this option.

theme (Preferences: color theme) - Themes. You can change the VSCode color scheme to any of the available themes as per your preference. But please, unless you are a psychopath, use a dark theme. Your eyes will thank you.

format (Format Document) - Format document. This option allows your code to be "tidy" in terms of spacing, skipped lines and other visual aspects of organization. It is very useful to improve its visibility and keep it well organized.

terminal (View: toggle Terminal) - Open Terminal. Here you have a quick access to the terminal, which can be very useful to run some necessary commands.

3. Status Bar

The status bar brings some important information, like the "branch" you are working on your Git project (we'll talk more about this later), errors and warnings from your program, programming language of the current file and notifications.

Status Bar

4. Terminal

In VSCode, you can access the terminal by clicking the errors and warnings icon in the status bar and clicking TERMINAL, or you can access it from the command bar by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal).

The terminal is something that may seem intimidating at first, but over time you'll see that it's your biggest ally. Commands given at the terminal save a lot of time when used well.

The fact that VSCode has direct access to the terminal in its interface is a big surplus.

VSCode Terminal

VSCode: Some additional settings¶

Now that you know how VSCode is organized, let's make some additional settings that are optional but can help you in your everyday life.

1. Connect your GitHub account

You can connect your GitHub account to VSCode in order to sync your settings across different devices. To do this, go to "File > Preferences > Setttings" (or the gear at the end of the Activity Bar) and click on the "Turn on Setttings Sync" button, leaving all items checked.

VSCode will take you to a GitHub login and authentication screen. Just authorize and you are done.

Synchronizing VSCode on multiple devices

2. Indentation

By default VSCode uses 4 spaces when aligning the code (called indentation). For example, what happens at the beginning of each line in the figure below and that serves to organize the structure of your code and make it more readable. As a rule of thumb, indentation does not follow a specific function, but there are languages ​​that consider it when interpreting syntax, such as Python.

Standard Indentation

If you consider 4 spaces too large for indentation space, you can change it by clicking on "File > Preferences > Setttings" (or on the gear at the end of the Activity Bar) and changing the number in Editor: Tab Size.

Changing indentation spacing

3. Changing the terminal (Windows)

Over time, it will be quite common for you to use the terminal to run some commands directly. I use the terminal on a daily basis to access files, navigate between folders and even run Git commands (I find it easier on the terminal).

As we have seen, in VSCode you can access the terminal by clicking on the errors and warnings icon in the status and clicking TERMINAL, or you can access it from the command bar by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal).

On Windows, the terminal will load PowerShell by default. For our purposes, we're going to change this default terminal to use Git Bash which we've already installed earlier.

If you don't have Git installed on your machine, see the content below:  How to use Git and GitHub: a step-by-step dummies' guide

To do this, open "File > Preferences > Setttings" (or in the gear at the end of the Activity Bar), look for "Features > Terminal" and scroll until you find the option "Integrated > Default Profile: Windows". From this selection box, choose Git Bash.

Setting the default terminal profile for Windows

Now open the terminal again by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal). Click the "+" button and select Git Bash. Once opened, you can even delete the existing powershell profile by clicking on the trash icon.

Enabling Git Bash for the Terminal

You can now delete the profile for powershell

VSCode: Some interesting extensions¶

Finally, let's install some extensions that will be useful for development. Start by installing the syntax for languages ​​that don't come by default in VSCode and that you intend to use (Python, and PHP, for example). Installing a language is simple as you just press a button to do so:

Installing Python Language Support

But, more than programming languages, let's also install some other useful extensions:

a. Live Server: Allows you to create a local server with just one click to test your code locally

Live Server

b. CSS Peek: Allows you to quickly access a css class or element directly from the code, and can be very useful when developing your web applications.

CSS Peek

c. Auto Close Tag: This extension automatically closes open HTML and XML tags.

Auto Close Tag

d. JavaScript (ES6) code snippets: This extension contains parts of Javascript syntax to be used in VSCode. This ends up auto-completing your code many times, saving considerable time.

JavaScript (ES6) code snippets

e. ESLint: A linter is a code analysis tool that catches existing programming errors. With ESLint you can, while you are programming, already see potential syntax problems in your source code.

ESLint

f. Prettier: Format your code with Prettier and make it tidier. You can use it along with the "Format Document" command in VSCode.

Prettier

g. Better Comments: Categorize comments in your code, making them easier to read. After installing, just start your comment line with a different character to make it stand out (e.g. important lines start with an asterisk, Exclamation to draw attention, question mark for questions, TODO, etc).

Better Comments

h. Blockman: Highlight blocks of code in your code that are at the same scope (level). Useful when your code starts to get too big and it's hard to find portions of it.

Blockman

Conclusion¶

As you can see, there are countless ways to program, and for sure choosing the right code editor for you will make all the difference in the world, especially when it comes to productivity. We hope that this introduction to code editors, and in particular to VSCode, can provide you with a good starting point so that you can follow the rest of our content here, as well as guide you on this journey as a developer.

/* end of the post, see you next time */