Qubyte Codes

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.