OSD600 Lab 7

OSD600 LAB7

in this lab, we were asked to add a source code formatter, add a linter, integrate them to my editor and add a Git pre-commit hook to my open source project urlStatusChecker. 

Add a Source Code Formatter

Since my project is written in javascript, I chose the most famous javascript fomatter "Prettier" to automate the format of my project. I followed Prettier documentation to install it to my repository using the command "npm install --save-dev --save-exact prettier". Then I created two empty files .prettierrc.json and .prettierignore. I wrote my setting in .prettierrc.json as 

{

  "semi": true,

  "trailingComma": "all",

  "printWidth": 80,

  "tabWidth": 2,

  "bracketSpacing": false

}

 Then I add some files that not need to format in .prettierignore file. 

When I tried to test Prettier by running npx prettier --write . , an error occurred and the message showed that "Invalid prettier configuration file detected. ". I found an issue in prettier repository Issue-8815. Nicely, once again this is the p roblem only happens on Window system. When I created prettierrc.json using powershell, it created a UTF16LE file. However, I need to use the command prompt to create UTF8 file of prettierrc.jso to successfully config Prettier.

After I solved the problem, in the script in order to run Prettier on the entire project from the command line, I added prettier command to the script in package.json file. 

    "prettier": "prettier --write .",

    "prettier-check": "prettier --check .",

Add a Linter

I use ESLint to avoid code patterns that lead to bugs. The step of setting up ESlint just similar to setting up Prettier. The documentation of ESLint is straight. I followed by the command "npm install eslint --save-dev" to install dependency, "npx eslint --init" to set up the configuration, "npx eslint ." to run the linter check. I chose Standard as the linter format for the first time, and I was so surprised that I got more than 200 linter errors. To avoid fixing 200 lines, I changed the setting of extends from Standard to eslint:recommended. Then I only need to fix 7 lines of errors LOL. After I fixed the errors, I added the ESLint command to the script too.

Integrate them into Vscode

By following the documentation of Prettier and ESlint extension of VScode, it is very easy to integrate them into VScode. I created .vscode folder and wrote two recommendations in extensions.json file.

{

  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]

}

Then I copy the setting from documentation of Prettier and ESlint extension to setting.json file

{

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  }

}

After setting this file, VScode will automatically run Prettier and ESlint when people saving files.

Add a Git pre-commit hook 

It is easier than I expected to add a git pre-commit hook. I installed husky using the command "npm install husky --save-dev", then created a file named .huskyrc.json with content 

  "hooks": {

    "pre-commit": "npm run eslint && npm run prettier --check"

  }

.

By setting this pre-commit property, now every commit command will be paused until they pass ESlint and Prettier. 

Squash, Commit, Merge, Push

After everything is done, I rebase the new branch into my master "git rebase master -i", then squashed all my commits into the single commit with all the changes and then merge it into my master branch then push it to the origin.