Love thy fellow programmer as thyself: Setup ESLint, Prettier and Flow in VSCode

Manish Prasad

Published in

js@imaginea

5 min readJun 4, 2018

This short guide is to configure VS Code for a consistent and reusable development set-up.

ESLint Setup

ESLint is an open source JavaScript linting utility. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable.

Install ESLint locally and create a .eslintrc.json config file by running the below commands in the workspace folder —

$ npm install eslint --save-dev
$ ./node_modules/.bin/eslint --init

Run the below commands for a global installation and generating a .eslintrc.json config file —

$ npm install -g eslint
$ eslint --init

Few configuration related questions will be asked, choose the options appropriately according to your preferences

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JSON

Install ESLint VS Code extension using command `ext install vscode-eslint`. For more information and configuration settings refer ESLint

Prettier Setup & Integration with ESLint

Prettier is an opinionated code formatter with support for JavaScript, including ES2017.

ESLint can run Prettier for you, just add Prettier as an ESLint rule using

npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

Add below lines in ‘.eslintrc.json’

{
  "extends": [
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

‘eslint-config-prettier’ also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with Prettier.

Add this srcipt in ‘package.json’

"eslint-check": "eslint --print-config .eslintrc.json | eslint-config-prettier-check"

Then run npm run eslint-check

Importance

Prettier essentially compliments ESLint rules concerning styling. They both help in ensuring a consistent and clean code. This speeds up the development process by improving the quality of code-reviews. Developers will focus more on implementation detail rather than complain about syntax errors and different coding styles.

Tip:

a) Pre-commit hook can be set-up so that the code is always formatted before the commit. Pre-commit hook

b) Enable auto fix: View → Command Pallete → Open User Settings → add: "eslint.autoFixOnSave": true line to the settings

Flow Setup

Flow is a static type checker for your JavaScript code. Flow checks your code for errors through static type annotations.

Flow should be setup per project for best performance and hence local installations is preferred. Install flow-bin using npm

npm install flow-bin --save-dev

Open the package.json file and add the following script

"scripts": {
  "flow": "flow"
}

For the first time run: $ npm run flow init

This will create a default ‘.flowconfig’ file. After running init, run:

$ npm run flow

> test_project@1.0.1 flow /**/test_project
> ./node_modules/flow-bin/flow-linux64-v0.73.0/flowLaunching Flow server for /**/test_project
Spawned flow server (pid=17792)Logs will go to /tmp/flow/zShomezSmanisueczSworkzStest_project.log
No errors!

After this run $ npm run flow stop

> sensemaker_aml@1.0.1 flow /**/work/test_project
> ./node_modules/flow-bin/flow-linux64-v0.73.0/flow "stop"Trying to connect to server for /**/test_project
Attempting to nicely kill server for /**/test_project
Successfully killed server for /**/test_project

Importance

JavaScript is both weakly and dynamically typed, which is flexible but prone to errors. According to flow’s homepage, Flow can catch common bugs in JavaScript programs before they run, including

silent type conversions
null dereferences
the dreaded undefined is not a function

Few Examples:

Catches Incorrect Number of Parameters Passed to Function

1 // @flow
2 function xyz(x: number, y: number, z: number): number {
3   return x + y + z;
4 }
5 xyz(1, 2);

Errors:

index.js:5
  5: xyz(1, 2)
     ^^^^^^^^^ function call
  5: xyz(1, 2)
     ^^^^^^^^^ undefined (too few arguments, expected default/rest parameters). This type is incompatible with
  2: function xyz(x: number, y: number, z: number): number {
                                           ^^^^^^ number

Catches Incorrect Parameter Types

1 // @flow
2
3 function xyz(x: number, y: number, z: number): number {
4   return x + y + z;
5 }
6 
7 xyz(1, 2, '');

Error:

index.js:7
  7: xyz(1, 2, '')
     ^^^^^^^^^^^^^ function call
  7: xyz(1, 2, '')
               ^^ string. This type is incompatible with
  3: function xyz(x: number, y: number, z: number): number {
                                           ^^^^^^ number

Makes Sure You Return The Right Types

1 // @flow
2
3 function xyz(x: number, y: number, z: number): number {
4   return Math.random() < 0.5 ? x + y + z : null;
5 }

Error:

index.js:6
  6:     : null
           ^^^^ null. This type is incompatible with the expected return type of
  3: function xyz(x: number, y: number, z: number): number {
                                                    ^^^^^^ number

These are few benefits. Giulio Canti has written quite a few articles on the more advanced things that you can do with flow

You can use types to check if user input has been validated in Phantom Types with Flow
You can create types with built in constraints in Refinement Types with Flow
You can create higher kinded types in Higher Kinded Types with Flow
You can express the side effects of your code as types in The Eff Monad Implemented in Flow

Conclusion

This sets up VS Code with ESLint, Prettier and Flow for development with a consistent configuration.

If you liked the above story, you can buy me a coffee to keep me energized for writing stories like this for you and to support me because as of writing this story, I’m not eligible for the Medium Partner Program.