Lab7: Add Static Analysis Tools

-

Introduction

In this week, I started working on adding static analysis tools into my link checker command-line tool named url-fi following the lab7 instruction. You can see the detailed instruction about the lab 7 here: https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-7. It said these are the learning goal from this lab:

  • 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


Automatic Source Code Formatter

As the language I tool for my command-line tool is Node.js (JavaScript), I picked Prettier as an automatic source code formatter. Following the document on the Prettier official website, I installed the prettier by entering 'npm install --save-dev --save-exact prettier'. I added '.prettierrc.json' file to let editors and other tooling know I'm using Prettier and write the rule I want to apply on my project on the file. I created '.prettierignore' file to let Prettier know which files I do not want to format.

After I've done all of them, I can format the files using prettier by entering 'npx prettier --write *' or can check whether the files are formatted by entering 'npx prettier --check *'. However, I think it would be good if I create a npm script for running Prettier on the entire project from the command line. Therefore, I added `"prettier": "prettier --write *"` and `"prettier-check": "prettier --check *"` on the 'package.json' file so the user can run the Prettier simply entering 'npm prettier' or 'npm prettier-check'

  "scripts": {
    "prettier": "prettier --write *",
    "prettier-check": "prettier --check *",
  },

When I've formatted the files, I saw lots of changes on the index.js, README.md, and CONTRIBUTING.md file and most of them are space or semi-colon issues! I was surprised how many spaces and semi-colons I missed following the Prettier rule.


 Linter

The Linter I've chosen is ESLint as my programming language. I followed the installation document on the ESLint official website. I've installed ESlint entering 'npm install eslint --save-dev' and set up a configuration file entering 'npx eslint --init'. Also, I created '.eslintignore' file to let ESLint know I want to ignore the files on the ignore file. When I enter 'npx eslint *', ESLint spots some mistakes I did on my project. I've found a variable I have not used (so I can erase it) and an unnecessary regular expression I wrote (for example, I wrote '/\-\-good/' for goodRegex but I did not need \ for - symbol. Therefore, I can write '--good' for the goodRegex). There are not many 'spots' on my project but it was really interesting!

I also create a npm script for running ESLint on the package.json file so the users can simply run ESLint when they enter 'npm eslint'

  "scripts": {
    "prettier": "prettier --write *",
    "prettier-check": "prettier --check *",
    "eslint": "eslint --ignore-path .eslintignore *"
  },


Editor/IDE integration

I would be nice if the program automatically format using Prettier or find spots using ESLint. I created '.vscode' folder and created 'extensions.json' and 'settings.json' files to do this.

This is the code I wrote on extensions.json file

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

This is the code I wrote on settings.json file

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

It was challenging to integrate Prettier into my editor. When I wrote "editor.defaultFormatter": "esbenp.prettier-vscode", it kept saying "Defines a default formatter which takes precedence over all other formatter settings.Must be the identifier of an extension contributing a formatter." with the underline. I've searched how to fix it and got the reason. I needed to install the Prettier extension on the VSCode and let VSCode know I want to use 'esbenp.prettier-vscode' as a default formatter! When I've installed 'Prettier' extension andy set the default formatter (file > preferences > settings > find 'default formatter' > pick 'esbenp.prettier-vscode', it solved!


What I've learned

Learning these tools were really amazing! All the practices using Prettier, ESLint, and Editor Integration were useful and interesting. If I need to pick one tool I got the biggest interest in, I'll pick Prettier. I knew the Prettier extension on the VSCode and usually use this extension for my personal website project but I did not know I can use it with npm command or can use it automatically. When I had a group project, the formatting was one issue I've got. I got the confidence I will not have the same issue in the future thanks to this week's practice!

Comments

Post a Comment

Popular posts from this blog

Open Source Project: Lab2 (Pull Request)

-
Image
 Introduction In this lab, I practiced contributing and submitting pull requests to other repositories I don't own. Following the lab instruction , the things I plan to practice are the following: forking and cloning other projects creating branches to work on new features and fix bugs working on code I didn't write, trying to maintain the original style and not break things creating pull requests collaborating with other developers on GitHub updating my pull requests to include fixes for review comments The Project I picked for pull request ( https://github.com/lixiaoqity/testLink/pull/7 ) I looked around the classmates' open source project and picked the project named testLink. The GitHub repository link is the following:  https://github.com/lixiaoqity/testLink/pull/7 .  I picked this project because it also uses the NodeJS which I picked for my project. It was really interesting to see how code can be written differently for the same subject. When I look over the project
Read more

Release 4.0 - Part 3: Release

-
In this post, I am going to describe the journey of the release 4.0. Release 4.0 is the 3 weeks project. In the first week, I chose the project to work on. As the issue I chose required knowledge I do not have any idea (Gatsby and Nextjs), I need to learn these. In the second week, I learned the Gatsby and Nextjs to read the document on the Next official website. Also, I checked the pull request other people already created for the project. And this week, I started writing codes to resolve the issue. It was hard to begin to migrate the pages from Gatsby to the Nextjs. I needed to google a lot to find the proper way to migrate the code for the project. The components I was assigned are Error page, SEO, and SearchHelp components. The SEO component is relatively easy because the Next official website indicated how to do it most. However, the Error page is the most difficult part for me. When I googled how to make the Nextjs Errorpage, most people recommend to use the JavaScript extension
Read more

Lab 8: Automated Testing and Continuous Integration

-
When I developed a program, it was time-consuming to test all the functions I created when I add a feature. I needed to run each feature, check whether it gives expected output or not, and check all the output. It is possible I forgot to test a feature and later on, I realize I did not test the feature. I wonder if there any ways I can do it automatically. Now, I got the way how to do that. There is automated testing for it! To begin with it, I started searching the testing framework to apply my command-line tool named url-fi. There are some testing frameworks for Node.js such as Jest, Mocha, and AVA. The testing framework I chose is  Jest  which is a testing framework developed by Facebook. I've installed Jest running 'npm install --save-dev jest' and test whether it works properly or not.  This document  is the way I followed to install the Jest testing framework. After I've installed the Jest testing framework, I worked on separating functions. As my tool contains al
Read more