[OSD600] Lab 7 - Static Analysis Tooling

Introduction 

From the lab we are working on the following this week,

• an automatic source code formatter
• a source code linter
• command-line or project build scripts to run your static analysis tooling
• editor/IDE integration of your static analysis tooling
• write contributor documentation to setup and use your tools

I created a branch called lab7.

Moved related Documentation to CONTRIBUTING.md

As the title suggests, I moved all relevant documentation to CONTRIBUTING.md file.

I added a developer checks section as shown below as well.

Automatic source code Formatter

The obvious choice is Prettier because I am using a node.js project for cmd-ssg

I added using npm install --save-dev --save-exact prettier

# ignore artifacts:
build
dist

added to .prettierignore

Under package.json, I had scripts for prettier such as the following

"prettier-check": "npx prettier --check .",
"prettier": "npx prettier --write .",

You type and execute "npm run prettier-check" in terminal to check format.

Source Code Linter

Eslint seems the sensible choice for my project where you use the commands

$ npm install eslint --save-dev
eslint --init

I edited .eslintrc with

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": 0,
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

Editor Integration and VS Code Settings

For automatic formatting and linting i added the following to extensions.json

{
  "recommendations": [
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker"
  ]
}

Under settings I added the following to settings.json in vs code

...

  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndendations": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.eol": "\n",
  "files.insertFinalNewline": true

...

Pre-commit Hook

As the lab 7 suggests, I used Husky as my pre-commit hook

Issues

I did not have many major issues, except I had to ignore some of the checks done on the project because I had a helper javascript file that is separate from the index.js, the dependencies on the parent is not on child. I used what I learned in Web222 and integrated prettier and eslint ahead of time so there we not many issues.

My commit is here cc92dc8

Cheers,

Eugene