Contributing to Open Source: Adding Prettier Feature to Live-ATC

During my search for the third repository to contribute to, I stumbled upon liv-atc repository. In this repository I worked on Issue #9, involved adding a Prettier feature to the project. This blog post will detail the process I followed, the solution I implemented, and the impact of my contribution.

Understanding the Issue

The topic of discussion for issue #9 was how to integrate Prettier into the project. Prettier is a popular code formatter that aids in keeping a codebase's coding styles uniform. Enforcing a set of formatting rules was intended to improve the project's code quality and readability.

Solution Implementation

To implement the Prettier feature, I followed these key steps:

1. Install Prettier:

I started by installing prettier using the command given below:

npm install --save-dev prettier

2. Prettier Configuration

Next, I created a .prettierrc file at the root of the project. This file defines the formatting rules that Prettier should apply. Here is a snapshot of the configuration:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

These configurations ensure consistent code styling, including aspects like indentation, line length, and the use of single quotes.

3. Prettier Ignore

Next, I created a .prettierignore file to specify files and directories that should be excluded from Prettier formatting. This helps in avoiding unnecessary modifications to certain files. The contents of the file were:

package.json
package-lock.json
node_modules/
.next

4. Pull Request

After implementing the Prettier feature locally and ensuring that it worked seamlessly with the project, I created a pull request #11. Which is later approved by the maintainer of the repository.