Niels Segers

Full Stack Developer at delta.app


StandardJS

When starting new projects one of the first main things I do is configure the linting for my project. I've been using a combination of prettier, eslint and sometimes tslint to get my projects up and running for typescript development. But often dislike how much work it takes to get it set up and the amount of extra files you need.

Introducing standard. In their own words: This module saves you (and others!) time in three ways:

  • No configuration. The easiest way to enforce code quality in your project. No decisions to make. No .eslintrc files to manage. It just works.
  • Automatically format code. Just run standard --fix and say goodbye to messy or inconsistent code.
  • Catch style issues & programmer errors early. Save precious code review time by eliminating back-and-forth between reviewer & contributor.

In other words, it removes the overhead that comes with setting up decent linting for your project. Though I'm not fully comfortable with the StandardJS coding style of not having semi-colons and trailing comma's. Luckily for people like me there's standardx which still allows you somewhat of configuration to customise how you want your code to look like. And to refrain from creating a .eslintrc which was the entire reason why I wanted to use standard, I can just add my eslint configuration to my package.json file.

"eslintConfig": {
  "rules": {
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "object-curly-newline": [
      "error",
      {
        "multiline": true
      }
    ],
    "no-trailing-spaces": 2,
    "comma-dangle": ["error", "only-multiline"],
    "space-before-function-paren": ["error", "never"]
  }
}

Even configuring it for typescript usage is easy. Just install the following packages by running:

$ npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

And add the following to your package.json and you are set to go.

{
  "standard": {
    "parser": "@typescript-eslint/parser",
    "plugins": [ "@typescript-eslint/eslint-plugin" ]
  }
}

There we go, an easy to use linting solution which we can use by just running

$ standardx --fix **/**.ts

without any extra config files needed that would otherwise clutter your project.

Written by Niels Segers