- Last Update:

JavaScript

Why Javascript is the new hotness

🕒 4 min read

Category: Code

Tags: javascript, code, web, node

Dates

Use date-fns. It is lighter than Moment.js. And it is immutable.

A word on ESlint

ESlint is probably the most popular linter for JavaScript. It is also very convenient and benefits from a large community. That is why I use it.

When I started using, I got confused by two different things: shareable configs and plugins. This thread explains the difference between the two quite well. Here is my version:

Plugins are like function definitions (a set of custom rules). Configs are like actual calls to thoses functions (pre-defined configuration of rules - like whether they're enabled or not, and how they are configured).

How to start a new JavaScript project?

If it is a simple project or a NPM package, I recommend having two distinct folders: src for sources and dist for builds.

  1. Now, do:

    git init
    git add remote origin ... # If need be
    npm init
    yarn add --dev babel-cli babel-preset-es2015
    yarn add --dev eslint
    yarn add --dev eslint-config-standard \
                   eslint-plugin-standard \
                   eslint-plugin-promise \
                   eslint-plugin-import \
                   eslint-plugin-node
    

    We use babel to transpile our code, to better support old versions of NodeJS.

    Regarding the last line, the config eslint-config-standard sets the configuration of these four plugins: standard, promise, import and node. That is why we need to install them alongside the shareable config. Of course it is a config for eslint, that is why we installed it on the previous line.

  2. Do:

    yarn add prettier-eslint-cli
    

    Normally, prettier-eslint only operates on strings, not on files. prettier-eslint-cli will provide you with a command to apply prettier-eslint on files.

    What is prettier-eslint meant for? Well, under the hood it calls prettier (probably the best JavaScript formatter to date) and then eslint --fix to format your code. Twice. But there's a reason for that.

    Now we need to configure eslint to tell it to use standard as its style.

  3. To use the standard style with ESlint, create .eslint in the root directory of your project and write:

    {
        "extends": "standard"
    }
    
  4. Add a badge to your README.md: badge.fury.io/for/js

  5. Configure package.json:
    ...,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel src --presets babel-preset-es2015 --out-dir dist",
        "format": "prettier-eslint \"src/*.js\"",
        "lint": "eslint src",
        "check": "npm run lint && npm run test"
    },
    ...
    

All set!

Resources

NodeJS

Set-up your environment

Documentation

General

Some cool node/npm stuff/packages/tools

Closures

In loops, they are a common issue. Here is how to solve it:

Testing