Standard JS in an Express app

Maintaining consistent style and convention in your code can be a daunting task. For larger projects it is virtually impossible to do it manually and the only way forward is to use automated code linters and formatters. In this tutorial we will integrate JavaScript Standard Style into an Express app to take advantage of automated code formatting and linting.

Why JavaScript Standard?

There are many fantastic code formatting and linting tools. Often the biggest issue is actually agreeing on the code convention in the first place. Many powerful tool can be configured down to a tiny level of detail resulting in hundreds of choices and options when it comes to code conventions. This can quickly get out of control and the team spends time on arguing over which conventions to choose rather than just move on with code development.

Standard removes all this headache and optionality. It is a zero-configuration code linter and formatter with all the rules pre-set for you. It does not allow for any customization of the rules - which is its greatest advantage. Any projects using Standard will follow exactly the same rules and the teams no longer need to waste time arguing whether to keep these semi-colons or not!

Installing Standard

You can follow these simple steps to install and set-up Standard in any of your Node projects. We will use our nodemon-express as a starting point.

Clone nodemon-express :

git clone https://github.com/regbrain/nodemon-express.git

go to nodemon-express directory:

cd nodemon-express

Install standard as a dev dependency:

yarn add standard --dev

Integrate Standard into your npm scripts

In your code editor, inspect package.json, it should look like this:

{
  "name": "nodemon-express",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

We will now add another property lint to scripts which will run Standard linter:

"lint": "standard"

The full package.json should look like this:

{
  "name": "nodemon-express",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon app.js",
    "lint": "standard"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

In your terminal window, run our new lint script:

yarn lint

If you used our nodemon-express app you should get notifications of two problems:

app.js:1:5: 'app' is never reassigned. Use 'const' instead.
app.js:3:62: Newline required at end of file but not found.

Great, so the Standard linter works and it detected some issued with the code. But wait, manually fixing these issues could be a very cumbersome task. Instead of trying to manually fix them, let us implement another command which will automatically correct the code: standard --fix.

To make things even more automated, let's implement this auto-fix command in our dev script, so that every time when we start our app in development mode, Standard will automatically lint, fix errors and reformat our code.

In package.json add standard --fix command to a dev script:

"dev": "standard --fix && nodemon app.js",

The complete package.json should look like this:

{
  "name": "nodemon-express",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "standard --fix && nodemon app.js",
    "lint": "standard"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

Now, before we test our new script, let us observe how it changes the code. Inspect app.js file and note the use of let variable declaration in the first line of code:

let app = require('express')()
app.get('/', (req, res) => res.send('Hello hot reload!'))
app.listen(3000, () => console.log('Listening on port 3000'))

In your terminal, start the app by running dev script:

yarn dev

Inspect app.js again. Did you notice how Standard replaced let with const ?

const app = require('express')()
app.get('/', (req, res) => res.send('Hello hot reload!'))
app.listen(3000, () => console.log('Listening on port 3000'))

Fantastic. So now you don't have to worry about writing 100% tidy code - Standard will always fix linting errors and reformat you code for you when you start working on your project. And the best part is - you can't change any options in Standard, so when you work with others on a project using Standard, you will never have to argue about detailed coding conventions!

See a complete demo code here: standard-express

Happy coding!