Lab 7 — DPS909

Static Analysis tooling

This week I experienced the use of Static Analysis tools which help maintain the quality of source code.

For this lab, I chose to use:

1. Prettier — This is an automatic source code formatter. When this tool is integrated with the source code it takes source code as an input and creates properly formatted output. This tool helps to maintain a consistent format of the code in the project. I chose this tool because it supports JavaScript language which I use in my URL Checker Tool.

How to Install:

npm install --save-dev --save-exact prettier

Create config file: you need to create an empty config file to let editors and other tooling know that Prettier is being used:

echo {}> .prettierrc.json

Configuration: if you would like to change prettier options it needs to be done in the config file. See example below:

{  
  "printWidth": 100,
  "singleQuote": true,
  "endOfLine": "lf",
  "semi": true,
  "trailingComma": "es5",
  "useTabs": false,
  "tabWidth": 2
}

Ignore files: in order to ignore some files from being reformatted (ex. node_modules which is not written by the programmers) we need to create a .prettierignore file:

# Ignore artifacts:
node_modules/
package-lock.json
package.json

Format all files with Prettier:

npx prettier --write .

If you want to run your formatter on the entire project from the command line add the following in your package.json:

Note:

• — check parameter checks if all specified files are formatted.

"scripts":{ 
"prettier": "prettier --write \"./**/*.{md,jsx,json,html,css,js,yml}\"",    
"prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml}\""  
}

Then in the command line, you type:

npm run prettier

Overall experience:

This is a very useful tool that allows you not to worry about your code format. When you finish your code and run this tool it automatically formats everything for you. I think everyone must use it as makes your code clean, organized and readable. In my project, it didn't make many changes. However, when I used it in other projects like Mattermost or Telescope it formatted my code to meet the configuration of the project.

2. ESLint — This tool helps to identify mistakes in a source code. When programmers write code they sometimes make “silly” mistakes which can create bugs. This tool lets the programmers know what are these mistakes and helps to create a better quality code. I chose this tool since it supports Javascript language and is widely used in many open-source projects.

How to Install:

npm install eslint --save-dev

Create config file: you need to create a config file:

npx eslint --init

Configuration: after running the previous command, it will prompt for configuration options. After completing the set up the configuration file (.eslintrc.json) will be created. If you would like to add some options it needs to be done in the config file. See example below:

{  
  "env": {  
    "browser": true, 
    "commonjs": true,
    "node": true, 
    "es2021": true  },
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "parserOptions": {   
     "ecmaVersion": 12  },
  "rules": {    
     "prettier/prettier": ["error"]  }
}

Ignore files: in order to ignore some files from being checked (ex. node_modules which is not written by the programmers) we need to include these folders/files in a .gitifnore file:

# ignore
package-lock.json
package-lock.json 
# dependencies
node_modules/

Check file with ESLint:

npx eslint yourfile.js

If you want to run your ESLint on the entire project from the command line add the following in your package.json:

Note:

• — fix parameter allows ESLint to fix some mistakes.
• — ignore parameter ignores specified folders/files

"scripts": {    
"eslint": "eslint --ignore-path .gitignore .",
"eslint-fix": "eslint --fix --ignore-path .gitignore ."
}

Then in the command line, you type:

npm run eslint or eslint-fix

Overall experience:

Although it didn't find any mistakes in my current project, I found this tool very useful when I contributed to the Mattermost project. It helped me to identify mistakes that I could not see and make my code much better.

I highly recommend starting using these tools in every project you do. It will make the quality and readability of your code much better!