DEV Community

Abdullah Al Mamun Fahim
Abdullah Al Mamun Fahim

Posted on

Adding Static Analysis tools

For this weeks lab, we are supposed to add Static Analysis tooling. So we are supposed to add source code formatter, linter, IDE integration, Pre-Commit hook and CONTRIBUTING.md.

For my source code formatter, I choose Pretter. It is very popular and I have seen it other projects but I never had to set it up from scratch so I wanted to do that. First thing I did was go to thier docs and followed their install instructions. I also updated the .prettierignore so that I could exclude the files and directories I don't want to be formatted. Then I ran

prettier --write .
Enter fullscreen mode Exit fullscreen mode

from the install docs. It worked so I added a npm script "prettier": "prettier --write ." so that I can run it easily in the command line. I reverted all the changes since a lot of the changes are not something I wanted in my project. So I went to options section to define my own format. Then I ran and committed the changes. Most of the changes were from enforcing single quotes and changing EOL from CRLF to LF.

For my linter I chose ESLint. Similar to Prettier I have never set it up. The docs for ESLint was kinda hard to follow. But similar to prettier I went to the docs then to the get started. Followed and ran the scripts to install it by running npm init @eslint/config@latest. After I ran

npx eslint .
Enter fullscreen mode Exit fullscreen mode

and it worked. There was no errors thankfully. I also added ignores object so that it doesn't run on node_modules and examples directory. And finally I added npm script so that I can run it easily in the command line.

For my pre-commit hook I choose husky. It was fairly simple. Since I had pre-defined scripts on my package.json it was just adding a single line npm run clean. I noticed it was running the lint and prettier on the entire code base on the entire codebase which didnt look okay. So I did some research and found lint-staged followed their instructions on installing it and then followed https://github.com/lint-staged/lint-staged?tab=readme-ov-file#packagejson-example to add my custom defined npm script and it was that simple.

My IDE of choice was VS Code. It uses extensions which I already had so I used the workspace docs to define my own.

I believe this is something that should be set up at the very beginning of the repo's life so that all the code-base is the same from the beginning and reduces chance of braking something with future implementation.

Top comments (0)