Overview

In 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.

Link to my project ag-ssg

Learned from this lab

• An automatic source code formatter
• how to use source code linter
• Command-line or project build scripts to run your static analysis tooling
• Editor/IDE integration of your static analysis tooling

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.

For my project I have used prettier as the formatter.
Prettier is an opinionated code formatter with support for:
JavaScript (including experimental features)

• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars -JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML It removes all original styling* and ensures that all outputted code conforms to a consistent style.

Install

First, install Prettier locally:

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

Then, create an empty config file to let editors and other tools know you are using Prettier

echo {}> .prettierrc.json

Now, format all files with Prettier:

npx prettier --write .

I have created the npm script to run the code formatter

npm run format

When I run this formatter on my code it has fixed all the indentation and format issues which i have on my code.

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.

For my project I have used ESLint to find and fix problem in my .js files. SLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
Install and configure ESLint using this command:

npm init @eslint/config

After that, you can run ESLint on any file or directory like this:

npx eslint yourfile.js

I have created the npm script to run the code formatter

npm run esLint

When I run the ESLint it created all the error list which are currently on my project and helped me to fix them.

Overall, these tools are great and i believe every programmer should use them so that their code look formatted when they work on any project.
Moreover, Linter help use to find all the silly mistakes we cannot catch.

Thanks