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.
Top comments (0)