Essential tools for JavaScript beginners
Published
I’ve noticed when helping people to learn JS is that I’m happy to let them learn without any tools. In hindsight this is very strange. I wouldn’t dream of programming like this! I make mistakes all the time, and tools help me to catch them early. Tools also help me to streamline repetitive tasks.
In this post I'll talk a minimal set of tools common to all projects I use. This
consists of Visual Studio Code, Node.js
, ESLint,
and Editorconfig files.
Visual Studio Code
There are many editors out there, and which one you use is a personal preference. Consider this section optional, but recommended.
VS Code is my current editor of choice. It integrates well with tools, feels uncluttered, and doesn’t lag. It's useful out of the box. Many editors can integrate with tools, but none quite as nicely. I recommend installing it and using its extensions system to install the ESLint extension and the Editorconfig extension (more on this in the sections below). The installation of ESLint into your project itself is covered in a later section.
Tip: Open the project directory in VS Code, not just a single file. It’ll present you with a file explorer on the left so you can quickly open other files in your project without leaving the editor. You’ll also be able to see files which are usually hidden.
Tip: You can use VS Code to view git diffs, compose git commits, and push and pull from a repository. If you prefer not to use git from the terminal, you may find VS Code good enough most of the time.
Tip: If you do want to use git (or npm etc.) from the terminal, you can open a terminal a panel in VS Code. From the view menu, select "Integrated Terminal".
Node.js
Node is a JavaScript environment without the browser. It is often used to write servers (most of my day job), but that’s not what we need it for here.
All modern JavaScript tools are built to be executed by Node and installable
with npm
, the JavaScript package manager, and executable with
npx
, the JavaScript package runner, which are both installed along with
Node.
With Node installed, when you are starting a new project or want to add packages or tooling to an existing one, open a terminal (on a Mac or Linux machine, or on windows the Node.js prompt) and navigate to the new project directory (make a new directory if you need to). When you're in there, run
npm init
and answer the questions. You can use the defaults for most of the fields. This
initialises your project with a package.json
file. This file
is very powerful because it can be used to describe your project and its
dependencies (other libraries and tools it requires). If you're unsure, run
npm help init
for some helpful information.
ESLint
The most important tool (after the editor) I use is ESLint. It scans your code, and tries to tell you when you’ve made a mistake or done something you probably didn’t intend. ESLint can also be used to enforce style. Enforcing style might seem dictatorial, but consistent code is beautiful, and it helps a great deal when collaborating. Install with ESLint and a configuration with:
npm install —-save-dev eslint eslint-config-qubyte
I'm suggesting my own ESLint config here, but there are lots of them to be found on npm. You can create your own too!
When the command has finished, take a look in package.json
. You’ll see a
devDependencies
section with the installed packages and version numbers.
You’ll also see a new folder called node_modules
. If you delete
node_modules
, you can run:
npm install
and npm will read package.json
to know what to install. There may also be a
package-lock.json
. This lock file makes sure that exactly the same version of
dependencies are installed each time. This is useful for sharing your project
without having to include all the dependencies (which can easy amount to
megabytes). If you're using git, add node_modules
to your .gitignore
file so
that git ignores that directory.
The devDependencies
section is for packages used in development, so it's the
natural place for tools like ESLint. the --save-dev
flag of npm install
tells npm
to install as a development dependency.
With ESLint and an ESLint config installed, ESLint it must be told to use the
config. Create a file in your project directory called .eslintrc.json
(the
leading .
is important) and put the following into it:
{
"extends": "qubyte",
"env": {
"browser": true
}
}
This minimal configuration tells ESLint that you're "extending" the config from
eslint-config-qubyte
. You can find out more about configuring ESLint
here. If you're using newer JavaScript features, try setting
extends
to "qubyte/ES2017"
.
VSCode has an "extension" for ESLint. On the left of a VS code window there are several icons. Click on the one for extensions (hover to see) and search for "ESLint" to find it, and install. From the view menu, click on "Problems" to open a panel which shows you problems ESLint finds.
If you want to run ESLint from the terminal, navigate to your project directory and run
npx eslint .
Note the trailing dot, and that the command here is
npx
not npm
.
Editorconfig
Editorconfig is not really a tool. It’s a standard for a file
which describes how code should look in each code file. Make a file called
.editorconfig
(all lower case with a leading .
as the first character in the
name). Put the following text into it and save:
# Apply settings to all text file
# types.
[*]
# Windows likes to choose weird
# encodings sometimes. Use this to make
# sure that wherever the file is saved,
# it's in the expected encoding.
charset = utf-8
# Use unix line endings everywhere for
# similar reasons as the charset above.
end_of_line = lf
# Wise to end on a new line character
# for unix.
insert_final_newline = true
# Indent using two spaces at a time.
indent_style = space
indent_size = 2
# Trims redundant spaces from the end
# of lines.
trim_trailing_whitespace = true
Tip: If you prefer another editor, Editorconfig has broad support. It's always worth having this file in your projects.
VS Code has an extension for Editorconfig files. To install it, open "Extensions" via the icon on the left or via the view menu, and search for "Editorconfig". The most downloaded (probably the top hit) is the one you want. Once this is installed, there's nothing left to do. VSCode will honour Editorconfig files whenever it finds them. It does this by applying Editorconfig rules to a file when it is saved.
Finally
There are lots of tools out there. If you have a mentor they may have some suggestions! These are the essential tools I use as a career programmer though.