Instructions

STEP-0 - Explain repository

Introduction
1. What is static analysis?
2. Tools: mre/awesome-static-analysis
Pre-requisitos
1. Node 10.x
2. npm

STEP-1 - NPM

Explain files
Initialize npm:
```
    npm init -y
```
install babel
1. Follow instructions:
  
  Babel · The compiler for next generation JavaScript
  1. npm install
    
    npm install --save-dev @babel/core @babel/cli
  2. add build script on package.json
```
"scripts": {
    "build": "babel src --out-dir dist"
  },
```
  3. npm i preset
```
npm install @babel/preset-env --save-dev
```
  4. Add .babelrc file
```
{ "presets": ["@babel/preset-env"] }
```
build code:
```
npm run build
```
add gitignore file
1. Ctrl + shit + p: and choose gitignore (Node)
2. dist folder ignored

STEP-2 - ESLINT

What is ESLINT?

ESLint - Pluggable JavaScript linter
Install eslint
```
npm install -D eslint
npx eslint .
```

add .eslintrc file

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  }
}

add rules and environment options

"rules": {
    "no-console": "off",
    "no-unused-vars": "warn",
    "semi": "error"
  },
"env": {
    "browser": true,
    "node": true
  }

Install ESLint extension:

ESLint
Show errors on files
Show contextual menu to fix errors manually
1. fix
2. disable eslint
3. run fix
```
npx eslint . --fix
```
add eslint ignore file
1. create a new file ".eslintignore"
2. ignore dist folder:
```
dist/*
node_modules/*
```

Add extends config:

"extends": [
    "eslint:recommended"
  ],
  "rules": {}

run "npx eslint . —fix"
fix others errors manually

add lint script to package.json

"scripts": {
    "build": "babel src --out-dir dist",
    "lint": "eslint . --ignore-path .gitignore"
  },

remove .eslintignore file to avoid duplication
end

STEP-3 - PRETTIER

What is prettier?

Prettier · Opinionated Code Formatter
Install prettier
```
npm install -D prettier
```

run:

preview:
```
npx prettier src/format.js
```
save changes:
```
npx prettier src/format.js —write
```

Add npm script to run prettier:

"format": "prettier --write \"**/*.+(js|json|md|css)\""

run: npm run build, then:
```
npm run format
```
Show that prettier is also formatting dist files

Add ignore path to npm script

"format": "prettier --write \"**/*.+(js|json|md|css)\" --ignore-path .gitignore"

Show config on prettier playground and copy config json

Add a ".prettierrc" and peste config json, then run npx run format

{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false
}

Install prettier extension

Prettier - Code formatter

open workspace vscode settings and configure:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

Edit and save file to show how is formatted automatically
Explain format and linting conflicts between prettier and eslint
```
"rules": {
    "semi": "error"
  }
```
npm run lint then npm run format
Install eslint-config-prettier
```
npm i eslint-config-prettier -D
```

Update eslintrc

"extends": ["eslint:recommended", "eslint-config-prettier"],
  "rules": {}

show that errors are not showing anymore

Update npm scripts

"format": "prettier \"**/*.+(js|json|md|css)\" --ignore-path .gitignore",
 "format:fix": "npm run format -- --write",
 "validate": "npm run format:fix && npm run lint && npm run build"

STEP-4 - TYPESCRIPT

What is TypeScript

Why TypeScript?
install typescript
```
npm i -D typescript
```
change classes.js file extension to .ts
use typescript compiler:
```
npx tsc src/classes.ts
```

add tsconfig.json: (noEmit to no compile js since we are using babel)

{
  "compilerOptions": {
    "noEmit": true,
    "strict": true,
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

run: npx tsc

update npm scripts:

"check-types": "tsc",
    "validate": "npm run check-types && npm run format:fix && npm run lint && npm run build"

update classes file:

class MyClass {
  name: string
  constructor() {
    this.name = 'MyClass...'
  }

  sayHi(): void {
    console.log('Hi ' + this.name)
  }
}

const myClass = new MyClass()
myClass.sayHi()

run: npm run check-types and explain eslint conflict error
run: npm run build and explain babel is not compiling ts files

update build script to compile ts files:

"build": "babel src --extensions .js,.ts --out-dir dist",

run: npm run build and show error

Install:

npm install --save-dev @babel/preset-typescript

update babelrc

"presets": ["@babel/preset-env", "@babel/preset-typescript"]

run: npm run build

update format script to add |ts| files:

"format": "prettier \"**/*.+(js|ts|json|md|css)\" --ignore-path .gitignore",

run: npm run validate
Configure lint for ts files, and explain classes.ts conflicts error
1. run below commands:
  
  npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

update eslintrc:

"overrides": [
    {
      "files": "**/*.+(ts)",
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "plugins": ["@typescript-eslint/eslint-plugin"],
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "eslint-config-prettier/@typescript-eslint"
      ]
    }
  ]

update lint npm script

"lint": "eslint . --ext .js,.ts --ignore-path .gitignore",

Update vscode settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  }
}

npm run validate

check types, change files to ts extension

fix arrays.ts

const myArray: Array<string> = []
if (myArray.length === 0) {
  console.log('Your array is empty... 🤷‍♂️')
}

console.group('vowels')
'aeiou'.split('').map((vowel, index) => console.log(`${index}: ${vowel}`))
console.groupEnd()

run:

npm run build
node dist/arrays.js
node dist/classes.js

check clasess.ts

fix functions.ts

const addTwoNumbers = (x: number, y: number): number => {
  return x + y
}
console.assert(addTwoNumbers(1, 2) === 3, 'Should be equal to 3')

const createFooObject = (): {foo: number} => ({
  foo: 1,
})

console.assert(createFooObject().foo == 1, 'Foo value should be equal to 1')

run:
```
npm run build
node dist/functions.js
```

fix index.ts

{
  var varKeyword = "Who's the global variable? it's me!!"

  const constKeyword = "😠 I'm refused to be reasinged!"
  console.log(constKeyword)

  let letKeyword = 'I love changes! 😄'
  console.log(letKeyword)
  letKeyword = "That's what I said... ✌"
  console.log(letKeyword)
}

console.log(varKeyword.toUpperCase())

update rules for eslintrc:

"overrides": [
    {
      "files": "**/*.+(ts)",
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "plugins": ["@typescript-eslint/eslint-plugin"],
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "eslint-config-prettier/@typescript-eslint"
      ],
      "rules": {
        "no-var": "off"
      }
    }

run

npm run build node dist/index.js

STEP-5 - GIT HOOKS

What are git hooks?

Git - githooks Documentation
Show git hooks on local project: ./.git/hooks
Install husky

npm install -D husky

add .huskyrc

{
  "hooks": {
    "pre-commit": "npm run validate"
  }
}

show bad commit

commit files to test husky configuration

git add .
git commit -am "add husky hooks"

Install lint-staged to Automatically format without running npm run validate
```
npm i -D lint-staged
```
add .lintstagedrc file

Update .huskyrc

{
  "hooks": {
    "pre-commit": "npm run check-types && lint-staged && npm run build"
  }
}

disable formatonsave to verify lint-staged files
modify one files

perform commit

git add .
git commit -am "add lint-staged"

Install npm-run-all to run scrips on parallel for quicker commits
```
npm i -D npm-run-all
```

update package.json

"validate": "npm-run-all --parallel check-types format:fix lint build"

run: npm run validate
commit changes