First Time Node - #3 Setting Up Your Development Environment

One of the most important parts of writing JavaScript applications (whether for Node or for the browser) is surrounding yourself with good tools. JavaScript can be quite verbose at times, with lots of punctuation, and things like syntax-highlighting, linting and smart code-completion dramatically reduce the bugs in your code.

In this post, I will introduce you to the free and open-source Atom editor and show you how to configure it for JavaScript development. This post is not about installing Node. If you are brand-new to Node, I would suggest you start at the first post of this series: First Time Node - #1 Getting Started.

Step #1 Get Atom

You can get atom from Atom.io. If you are interested, Atom provides a great tutorial on this process. Go ahead and download and install it for your platform.

Step #2 Configure Settings

In Windows, you can find the editor settings under File -> Settings. In OSX you can find the settings under Atom -> Preferences. Over time I am sure you will end up customizing these settings to your liking, but for the moment I'll point your attention to a few.

Core Settings:

File Encoding: This should be set to utf8. Regardless of what platform you are on, make sure this is set correctly. It should be the default setting of Atom, but in case it is not be sure to set this one right. If this is not set to utf8 you risk having your code garbled in the future if you try and open it in another editor or on another platform.

Editor Settings:

Auto Indent: Yes!
Auto Indent On Paste: Yes!
Font Family: This can be very important. A bad font can slow you down, make it difficult to read and understand your code, and even hurt your eyes and give you headaches. Atom's default font is fine, but having used a number of fonts I have really come to like Source Code Pro. I use it in every installation of Atom I have across every platform I develop on. You can download the font here and find OS-specific font-installation instructions here. Then just enter enter the exact name of the font (in my case: Source Code Pro) into the Font Family input box in order to use it.
Font Size: Using the Source Code Pro font I use size 13.
Show Line Numbers: Yes!
Tab Length: I always use 4, and I know that is common among many JavaScript developers. But I also know that many people coming from other languages prefer 2 spaces. Use whatever you prefer, but, for your own sake, make sure you are consistent across all your projects.

Packages:

Select the Packages sub-menu from the left-hand menu. Scroll down to Core Packages and then scroll all the way down to a package called wrap-guide. This displays what I consider a very annoying vertical line at the 80th character of your code. I don't use it. If want the guide and don't mind a line going down partway across your editor, then feel free to leave it on. But I always Disable it.

Themes:

Select the Themes sub-menu. Atom comes with great built-in themes. You can also find many great Atom themes online. I have tried out many of what people consider the best themes available online and yet I really like the built-in themes best. For the UI Theme I use One Dark. For the Syntax Theme I use Atom Dark.

(update 5/5/16, I have recently been using the monokai syntax theme which can be installed from the command line w/ apm install monokai and looks good with the One Dark UI Theme I mentioned above)

Step #3 Add & Configure Linter

Linting is the single most important step for writing decent-looking and bug-free code. In my opinion, the best and most flexible linter for JavaScript is ESLint. Before doing all this, go ahead and close Atom for the time being.

First, you need to install ESLint globally to your system. You don't have to do it globally, but for the sake of this tutorial I am going to show you how. Open your terminal and enter: (if you are on OSX or Linux, you will probably need to use sudo in order to globally install packages)

npm install -g eslint

Now, let's go ahead and install the ESLint React plugin which we will use later on in this tutorial series.

npm install -g eslint-plugin-react

Before going back to Atom, let's make sure ESLint is in our Path. Enter eslint -v in your terminal. If it shows you the version of ESLint (e.g. v2.5.1) then all is well!

So, we have ESLint installed globally, but now we need to add the Atom plugin which ties into ESLint so we can have real-time linting as we write our code. Atom comes with a package manager called apm. You will want to make sure that apm is in your path by entering apm -v from your terminal. If it tells you the version then all is well. If not, you will need to look up how to add add it to your Path.

Assuming apm is in your path, go ahead and install the general linter plugin:

apm install linter

Now install the ESLint plugin:

apm install linter-eslint

Also, since we are installing packages right now, go ahead and install the React package. We will use this later on in this tuturial series.

apm install react

Now, open Atom back up and go to settings/preferences. Open the Packages sub-menu. Under Community Packages you should now see three packages: 1) linter, 2) linter-eslint, and 3) react.

Select the Settings for linter. I would suggest:

Lint As You Type: Yes!
Do Not Lint Files Ignored by VCS: Yes!
Highlight Error Lines in Gutter: Yes!

Now go back to Packages and select Settings for linter-eslint.

Disable when no ESLint config is found: Yes!
Global Node Installation Path: You can find this by entering npm get prefix from your terminal. Enter what it prints out into the input box (e.g. /usr/local, C:\Users\[your_user]\AppData\Roaming\npm, etc.)
Use global ESLint installation: I go back and forth on this one. I want to be able to lint any project without installing ESLint as a dev-dependency in every project I do, so I tend to use the global installation. I have encountered some trouble in the past regarding projects expecting different versions of ESLint and have switched to local installations rather than updating config files. If you don't want to use a global installation, then just npm install eslint --save-dev in your project directory and do the same for any eslint plugins. This will allow you to keep your eslint versioned to each specific project, so your eslint config file won't break if they change the API in future releases.

Step #4 Create an ESLint config file

ESLint is extremely flexible. By default, it does not check for or force anything on you. But you can configure it to be as opinionated as you want. You do this by making a special config file called .eslintrc.json. If you will remember, we set our Atom options to not bother linting unless a project has an ESLint config file. That being the case, if you don't have a config file in whatever project you are working on, then it will not do any linting. So, one of the first things you should do in every project is drop a .eslintrc.json file in the project folder so you code will be linted.

My standard .eslintrc file which I drop into most projects looks like this:

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "quotes": [1, "single", "avoid-escape"],
    "no-console": 0,
    "no-alert": 0,
    "no-trailing-spaces": 0,
    "no-unused-vars": 1,
    "semi": 2
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "plugins": [],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {}
}

You can find all the different configuration options here.

Let's look at the different items in the JSON object. First, remember I said that ESLint is shipped without any opinions, without any rules enabled. But, there is a recommended set of rules which you can turn on. Under extends I have eslint:recommended which tells ESLint to enable the recommended set of rules.

But sometimes you still want to customize some rules. That is what the rules object is for. One important thing to note is that all rules expect integers rather than booleans to show whether it is enabled or disabled.

0 means turn off rule
1 means display warning
2 means display error

Looking at my rules above, you can see that for quotes I have ESLint enforce single-quotes on all strings and displays a warning if double-quotes used. For semi, meaning semicolons, I have it display an error if a semicolon is missed at the end of a line. Some would disagree with me, since JavaScript is supposed to function without the need for semicolons, but I like the clarity of explicitly ending lines and blocks. Since I have it set to 2, it will display an error. You generally do not want to use console logs and alerts in real applications, so warning or errors are thrown when ESLint sees those in your code, but I often do use those in development and sometimes use alerts for letting users know of errors. That being the case I have no-console and no-alert both set to 0 to disable those rules.

Under ecmafeatures you can specify that you will be using certain newer features of ECMAScript (JavaScript). In this case I always have jsx and modules both set to true.

ESLint has many plugins available. The one I use in almost every project is react. It knows and understands React's JSX components.

As you might have already figured out, env stands for environment. Adding browser, node, and es6 tells it to expect use of global methods built into to those environments.

So, copy that JSON from above into a .eslintrc file or create your own and then drop it into any project folder which you want linting enabled in. Let me give you a hint: You want linting in EVERY JavaScript project you do!

The final property you see there is globals. This is where you will declare any undeclared global variables in your code. You generally do not want any undeclared global variables, but jQuery, for example, is often loaded from a CDN into an HTML page and accessed in your code via the global variable, $. If you don't have this variable in your globals, then ESLint will display an error, telling you that you have an undeclared variable: $. So, if you were going to add jQuery to your globals, the globals object would look like this:

{
  ...
  "globals": {
    "$": false
  }
}

The value for each global variable you enter in you config file is a boolean. true means the variable is writable, and false if the variable is read-only. In this case, you will not be changing the $ variable to be something else, so you set it to false. If you would accidentally somewhere in your code write $ = something then ESLint would throw up a warning or error telling you that you can't write to $.

#4 Additional Atom Packages You May Want

file-icons - This gives you nice file icons. It looks a lot like what you get from IntelliJ by default. I would highly recommend this package! Learn about it here.
atom-mocha - This package is for Mocha test-running within the editor. Read about it here.
node-debugger - This is a plugin which can help with Node debugging. You can read about here.

There are many more packages including other Mocha packages and other Node debugging packages for Atom, but those are just two which I wanted to point out.

Conclusion

Having a decent development environment is crucial to efficiently and effectively writing code. You do not want to waste time writing and re-writing code with silly little bugs which can be caught by a linter, and you want good syntax highlighing and auto-indenting so your code is clear, consistent, and readable.

In the next post, I will show you how to add Babel to your Node build-process, so you can write your code using the latest ES2015/2016/2017 features and syntax. This is the future of JavaScript and much of the latest documentation on JS libraries is written with the newer syntax. It is essential for your build process to be able to handle the JavaScript of today as well as the JavaScript of tomorrow.

This is part three of an ongoing series: