Get started with VSCode for Javascript
===

Here is the journey to have a good start point to develop in Javascript with VScode. *Caveat: This is a MacOS documentation. Some adaptations have to be made for Linux and Windows.*

Indeed, it is not so easy to have a functionnal environment to be productive.

So this is the 2020 setup in order to be quickly performant.

This document will cover:

- how to setup prettier and have beautiful and consistent JS code
- how to have a linter (ESLint) to see the problems ahead of time
- how these 2 guys can work together and how to automate their use
- how to setup Jest for easy testing

### Prerequisite: Homebrew, Yarn

Install Homebrew, the package manager for MacOS:
https://brew.sh/

brew update # update the brew database
brew tap caskroom/cask # add cask for non CLI programs

Install Yarn (this will install Node if it is not present).

brew install yarn

**Create a project in your workspace**

mkdir -p ~/workspace/my-project
cd ~/workspace/my-project
yarn init # create a Node module, i.e. a directory with a package.json
yarn add -D eslint eslint-config-node eslint-config-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-jest eslint-plugin-node eslint-plugin-prettier jest prettier 

**VSCode**

Install VSCode, the IDE of choice for JS and Typescript.

brew cask install visual-studio-code

Alternatively, install it at https://code.visualstudio.com/.

Run VSCode

cd ~/workspace/my-project
code .

Memorize this command, which is the most important in VSCode: `Cmd-Shift-P` (Mac OS shortcut).

This is the [Command palette](https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_command-palette). You will use it all the time!

Configure it with the following:
- In the `Extensions` part, install ESLint, Prettier - Code formatter.
- If you have not installed VSCode with Homebrew, with the Command palette (remember,`Cmd-Shift-P`), find the option named `Shell command. Install code command in PATH`. This will allow to run VSCode in a terminal, in typing `code`, very handy!

**Prettier**

Prettier is a formater for JS.

Create a `.prettierrc.json` file a the project/workspace root.

{
  "extends": ["plugin:prettier/recommended"],
  "printWidth": 120,
  "parser": "typescript",
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "all"
}

This configuration extends the recommended one with a width of 120 characters, an indentation of 2 characters and no semicolon (you can live without semicolon, ESLint will take care of that for you, promise ❤️).

**ESLint configuration**

For a not strongly typed language, nor compiled (in fact, JS is compiled but in just-in-time mode, so not easily usable for the developers), a tool to reveal the problems as soon as they appears, is a real benefit and almost necessary.

Create a `.eslintrc.json` file at the top of the project:

{
  "extends":[
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:import/recommended",
    "plugin:jest/recommended"
  ],
  "plugins":[
    "prettier",
    "import",
    "jest"
  ],
  "rules":{
     "prettier/prettier":"error",
     "no-unused-vars":"warn",
     "no-console":"off",
     "func-names":"off",
     "no-process-exit":"off",
     "object-shorthand":"off",
     "class-methods-use-this":"off",
     "prefer-const":"warn"
  },
  "parserOptions":{
     "sourceType":"module",
     "ecmaVersion":2018
  },
  "env":{
     "browser":true,
     "commonjs":true,
     "es6":true,
     "node":true
  }
}

Here we extends the recommended ESLint list of rules.
But we also extends the prettier one, the import (to not have warning when we use `import something from "something"`) and jest one (more on this soon).

So we use plugins for prettier and jest, to make sure that ESLint, Prettier and jest will work correctly together.

ParserOptions are important to benefit from the last possible syntax (see Babel and ES6, ES2018 for more informations).

**VSCode configuration**

In VSCode, type the command (`Cmd-Shif-P`) and find the `Preferences: Open workspace settings (JSON)`.

In this files (settings.json), paste this:

{
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "workbench.colorCustomizations": {
      "statusBar.background": "#63ace5" // Change this color!
    }
}

NB: `colorCustomizations` is not strictly necessary but I find it a handy insight to distinguish between multiple instances of VS Code.

A popup may appear, with "The ESLint extension will use 'node_modules/eslint' for validation, which is installed locally in 'my-project'. If you trust this version of ESLint, press 'Allow', otherwise press 'Do Not Allow'. Press 'Cancel' to disable ESLint for this session.". Click on Allow to use the /node_modules version.

**Test developer environment**

Create a index.js file at the top of the project.

        const message='Hello World';
        console.log(message)
        
        var oldStyleVariable = "aze";

Save the file and if all is well configured, you will see somme ESLint errors. Normally, Prettier will also try to indent your file.

So, the file should look way better:

const message = "Hello World"
console.log(message)

var oldStyleVariable = "aze"

With an annotation under the oldStyleVariable, to tell that this variable is not used.

Pretty nice! ✨

In the next episode, we will see how to take power of Jest to test our code.