Setting Up an IDE (Atom Editor)

02/24/2019
09:04 PM
Category: Library
Share

Atom Text Editor

Integrated Development Environments, also known as an IDE, have been an important tool for developers since the dawn of modern computer systems. In the early days of computing, most text editors did nothing more than just basic syntax highlighting, indent formatting, and allow for macro keyboard combinations to perform simple to complex build tasks.

Emacs Text Editor Demo

An example of a popular console based text editor known as EMACS. More info can be found at https://www.gnu.org/software/emacs/

These editors have evolved significantly since then allowing for more powerful and easy to use features such as advanced introspection of class types, detection of build errors, version control integration, and integrated debugging. These features are always active and inspecting your code as you type, giving you a smooth and seamless coding session. Many professional developers, designers, and even system administrators are required to use these tools due to the growing complexity of today's information technology projects.

Visual Studio IDE Demo

The very popular IDE Visual Studio showing it's advanced features in the editor window. More info can be found at https://visualstudio.microsoft.com/

In this article I will show you how to setup a popular and free text editor known as Atom that provides many popular coding features out of the box. It allows for the installation of packages that turns the editor into a near commercial grade IDE experience.

Download Atom the Hackable Text Editor

Go to https://atom.io/ to download and install the latest version of Atom. There will be a download link on the front page for the OS platform you are currently using, or at least what your browser is reporting. Install the downloaded package using standard install procedures for your operating system.

For some additional help, here are the officially published support links for:

Create a Project

Atom works by simply referencing a main project folder on your computer. Create a directory called Test Project then go to File -> Open Folder and select your test_project folder from the dialog window. You should now see a split view of your empty project folder on the left and the welcome window on the right. Create two new files in your project folder by right clicking on the folder in the project pane and selecting New File. Create a file named test.html and test.css. Copy the contents below into each file to make a starter template for yourself:

test.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="test.css">
    <title>Test HTML Page</title>
  </head>
  <body>
    <pre>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
    </pre>
    <ul>
      <li><a href="">test1</a></li>
      <li><a href="">test2</a></li>
      <li><a href="">test3</a></li>
      <li><a href="">test4</a></li>
      <li><a href="">test5</a></li>
    </ul>
  </body>
</html>

test.css

a {
  color: #23b6e4
}

Install Packages for Web Development

There are many great packages available for Atom, but I will recommend that you install these four to help you get started with creating your web pages. To install a package, go to File -> Settings then click on the Install tab on the left side. Type the name of the below packages and click install to apply the package to the editor.

  • atom-html-preview - Provides a live split-screen preview of your HTML page directly in the Atom Editor. To open, go to Packages -> Preview HTML -> Enable Preview (or just press ctrl-shift-H).
  • color-picker - Allows the user to display a color picker wheel by pressing (ctrl-alt-C). Selecting an area within the wheel will generate the appropriate hexadecimal number representation of the chosen color.
  • pigments - This one is more of a passive feature, it will simply display all HTML and CSS color properties directly in the editor next to the text element.
  • emmet - The essential tool for web developers. This will allow you to type quick shorthand expressions to build out your HTML and CSS documents. Go to https://emmet.io/ for more details or take a look here for the Cheat Sheet

Voila! You are now using an IDE

Take a moment to pat yourself on your back. All joking aside, you should now be able to start writing some basic web development code with ease. See the animated image below for a quick demo of what you can expect from this setup.

Atom Text Editor

Written by:  Henry Schmeding