Skip to content
Antonio Bennett edited this page Nov 10, 2021 · 71 revisions

Lab 7

Due Date

Friday November 5 by Midnight.

Overview

This week we are focused on managing project complexity through the use of Static Analysis tooling. Static analysis tools operate on our source code (static) vs. running program (dynamic). They help us maintain the quality of our source code by fixing formatting issues, spotting suspicious coding constructs, or alerting us to common errors. Most of us wouldn't write a document in a word processor without spellcheck, and neither should programmers write code without linters and other static analysis tools. Using these tools is critical in a collaborative project with lots of contributors. Programming is hard, and the best programmers know that they can't do it without good tools to help them.

NOTE: Please watch this week's video lecture before you start this lab.

This lab will help you learn to work with and set up the following:

  • 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

For this lab you will are asked to work on your SSG project. However, you are free to collaborate and help each other as you do these steps. Make use of the course's community on Slack and GitHub.

Step 1: Create a Branch

Create a branch for your work. All steps in this lab should be done on this branch, and you are encouraged to commit regularly (e.g., after you get each step working, commit). When you are done, you'll be asked to squash all of your commits and merge to your default branch.

Step 2: Create a CONTRIBUTING.md File

Create a new file, CONTRIBUTING.md, in the root of your project. Move all sections of your README.md file that deal with setup and development to CONTRIBUTING.md. When you are done the README.md file should discuss what your project is and how to *use it, and CONTRIBUTING.md should discuss how to develop it.

We will be adding more details to CONTRIBUTING.md in the next steps.

Commit all the changes you've made to git.

Step 3: Add a Source Code Formatter

Automatic source code formatters (also known as beautifiers or "pretty printers") take source code as input and produce properly formatted output. Their goal is to establish a common format for all source code in the project.

Pick a source code formatter for your SSG's language and add it to your repo. Here are some suggestions, but you are free to use another that you want to try:

After you've picked a formatter, do all of the following:

  • Read the docs for your formatter. There will be detailed instructions on setup and configuration. Make sure you've read them before you proceed.
  • Setup the formatter in your project. This might mean adding files, packages, and settings.
  • Often we configure settings for how the output should look (e.g., how to indent, where to put whitespace). Choose any settings and add them to the formatter's configuration.
  • Add any files or folders to be ignored.
  • Create a simple "one-step" solution for running your formatter on the entire project from the command line. This could be an npm script, a shell script, or some other method common to your language.
  • Run the formatter via the command line on your entire project's source code and commit the changes.
  • Make sure your project still works! Did you break anything in your program by making these changes? If so, fix them now and re-run the formatter until everything works again.
  • Document how to use the formatter and "script" in CONTRIBUTING.md

How much did the formatter change your code? Were there are lot of indentation and formatting issues? Remember this for your blog post.

Commit all the changes you've made to git.

Step 4: Add a Linter

Linters help us spot "silly" mistakes that all programmers make, or help us avoid certain code patterns that often lead to bugs. We want to make it easy for ourselves and new developers joining our project to not introduce bugs or bad code.

Pick a linter for your SSG's language and add it to your repo. Here are some suggestions, but you are free to use another that you find:

After you've picked a linter, do all of the following:

  • Read the docs for your linter. There will be detailed instructions on setup and configuration. Make sure you've read them before you proceed.
  • Setup the linter in your project. This might mean adding files, packages, and settings.
  • Often we configure various linting rules (e.g., what to check for and what to ignore). Choose any settings and add them to the linter's configuration.
  • Add any files or folders to ignore.
  • Create a simple "one-step" solution for running your linter on the entire project from the command line. This could be an npm script, a shell script, or some other method common to your language.
  • Run the linter via the command line on your entire project's source code, fix the warnings and errors it finds, and repeat the process until there are no issues. Once this is done, commit the changes.
  • Make sure your project still works! Did you break anything in your program by making these changes? If so, fix them now and re-run the linter until everything works again. It's usually possible to disable linters via special comments in your source code, but it's a better idea to fix the code so it doesn't have any issues. Rewrite any code that the linter says is problematic.
  • Document how to use the linter and "script" in CONTRIBUTING.md

How many errors or warnings did the linter produce for your code? How hard was it to fix them all? Remember this for your blog post.

Commit all the changes you've made to git.

Step 5: Editor/IDE Integration

Running static analysis tools at build time (i.e., using our scripts) is great because we can automate it. However, it's also nice to provide a way to integrate them into our editor or IDE so that we get the benefits while we are writing code. An automatic source code formatter can be run whenever we save the a file. Similarly, we can have a linter running continuously and underlining errors or warnings as we type. This lets us fix issues as soon as make them, and helps us produce better code.

We could set up our own personal editor to work the way we like, but then new contributors wouldn't have the same development environment as we do. Instead, it's common to create configuration files and folders in our project that get read by the user's editor and and applied automatically. For example, Visual Studio Code settings can be placed in a .vscode/ folder.

Research how to integrate your Source Code Formatter and Linter into your editor. I highly recommend using VSCode, but you can use which ever editor is most common to your language. Add any necessary configuration folders and files to run your formatter when the user save's their code. Also, integrate the linter so that warnings and errors are automatically shown.

Both steps will likely involve adding plugins or addons to your editor, and this may also be something that you can include in a configuration file.

Once you have this working on your own computer, document how to get it working on a contributor's machine in CONTRIBUTING.md. NOTE: prefer using automatic configuration files over manual instructions that people have to do. The more you can automate this, the more likely it is that people will use it.

Commit all the changes you've made to git.

Step 6: (Optional) Add a Git Pre-Commit Hook

If you're still up for a challenge, try to setup a git pre-commit hook to run your source code formatter on any changes that are being committed. This will help developers not forget to run the formatter before they submit any changes or make a pull request. The process for creating a git hook will be slightly different for each language or platform, so do some research.

Step 7: Squash, Commit, Merge, Push

When you are done making code changes, rebase and squash your commits to a single commit. Merge this with your master branch and push it to your origin.

Make note of the git commit URL for the work you did on this lab.

Step 8: Write a Blog Post

When you have completed the required steps above, please write a detailed blog post. In your post, discuss the following:

  • Which tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.
  • How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.
  • What did the tools find in your code? Did you have to fix a lot of issues?
  • How did you get the tools to run from the command line?
  • How did you integrate the tools with your editor/IDE?
  • What did you learn from the process?

Submission

When you have completed all the requirements above, please add your details to the table below.

Name Blog Post (URL) Git Commit URL
Tuan Phong Nguyen https://blog.andrewnt.dev/post/osd-600-lab-7 fd61344
Anatoliy Serputov https://medium.com/@aserputov/how-to-follow-open-source-standards-42ffdb29b263 523858b
Ahmad Rokay https://dev.to/ar/formatting-and-linting-lab-7-5ff0 eb5a6f35
Eugene Chung https://ycechung-opensource.blogspot.com/2021/11/osd600-lab-7-static-analysis-tooling.html cc92dc8
Tuan Thanh Tan https://dev.to/tuanthanh2067/osd-600-lab-07-4dl8 6a068c
Diana Belokon blog commit url
Minsu Kim https://dev.to/mkim219/formatter-linter-for-c-cb0 commit
Andre Willomitzer https://dev.to/andrewillomitzer/linting-oxyclean-for-your-code-5jg f9591ce
Minh Hang Nguyen https://dev.to/minhhang107/adding-static-analysis-tools-to-ssg-5ao0 cb42061
Roxanne Lee https://medium.com/@Roxanne.Lee/static-analysis-tooling-22e21a51d473 fcb00c2
Chi Kien Nguyen https://dev.to/kiennguyenchi/c-static-analysis-tool-4f46 commit
Jun Song https://dev.to/juuuuuuun/lab7-2mk9 commit
Trang Nguyen https://tracy016.medium.com/osd600-adding-static-analysis-toolings-b8488bf239da 1dedd
Le Minh Pham Lab 7 Blog Post commit
Thanh Cong Van https://dev.to/tcvan0707/osd600-lab-7-1pn9 dd325fd
Kunwarvir Dhillon https://dev.to/dhillonks/adding-static-analysis-tooling-to-cli-ssg-16pd fb34290
Gustavo Tavares https://dev.to/gmotgit/osd600-lab-07-3pbj 8770a47
Tue Nguyen https://dev.to/tuenguyen2911_67/adding-more-tools-to-dev-environment-502e PR
Joshua Li https://dev.to/jli/learning-how-to-use-static-analysis-tools-jie 3107d05
Xiongye Jiang https://dev.to/derekjxy/prettier-eslint-4ebj cdf3b06
Irene Park https://dev.to/irenejoeunpark/useful-tools-for-contribution-2ei0 5be3d6b
Jia Hua Zou https://medium.com/@jhzou/prettier-eslint-40eec86655f6 389263b
Gus McCallum Blog Commit
Kevan Yang https://dev.to/pandanoxes/lab-7-add-contribution-guides-ec0 06c2779
Japneet Singh Kalra https://dev.to/japneetsingh035/how-to-improve-swift-code-using-swiftlint-2b8g 86670d1
Luigi Zaccagnini Blog 1d442bb forgot to squish
Francesco Menghi https://dev.to/menghif/formatter-linter-and-more-4gen f7cb851
Alex Romanova https://dev.to/sirinoks/linters-and-formatters-414m See 5 previous
Roman Rezinkin https://dev.to/romanrezinkin/dps909-lab-7-86l Commit Link
Tengzhen Zhao https://dev.to/yodacanada/lab-7-use-static-analysis-tooling-to-manage-project-epk d7cb1f4
Mizuho Okimoto Use Static Analysis tools to my Static Site Generator 317594d
Minh Quan Nguyen https://dev.to/mqnguyen/static-analysis-tooling-n55 ba22d2d
Leyang Yu https://dev.to/lyu4321/formatting-and-linting-for-js-dd0 98bed47
Vivian Vu https://dev.to/vivianvu/osd600-adding-static-analysis-tools-46bh 8dfbe63b
Oliver Pham https://dev.to/oliverpham/2-static-analysis-tools-to-enhance-your-productivity-3d5b 6466495
Reza Poursafa https://medium.com/@rezapscodes/add-static-analysis-tooling-to-static-site-generator-project-f7c1e2db5153 eaa9e80
Amasia Nalbandian Setting up the guidelines 11eb032
Andrew Tassone Adding a Linter 8b3ebf4
Hung Nguyen https://dev.to/nguyenhung15913/formatting-and-linting-in-osdssg-269k 91c40cf
Gerardo Enrique Arriaga Rendon Setting up rustfmt and clippy for yassgy 32b3783
Emily Phan Blog commit
Duc Bui Manh blog cf030e1d
Andrei Batomunkuev https://medium.com/@andreibatomunkuev/exploring-static-analysis-tools-e05536afd49 16838b85
Jiyun Jung https://dev.to/jjung99/applying-code-formatter-to-my-ssg-51ce https://github.com/jjung99/a1-ssg/commit/e9ec6a85e4c664850942d60999ce87b1ebd012cc
Qiwen Yu Blog d6119cb
Suhhee Kim Add prettier and eslint 5fcde0
James Mai blog 46d9429
Antonio Bennett blog dab3db59
Clone this wiki locally