My second open-source contribution to the "Whitebophir" project concentrated around introducing code formatting as a means of improving project quality. This blog post explains the actions I took, and the valuable lessons I learned in the process. It emphasizes that contributing to open source goes beyond writing code and highlights how the project can be improved overall.
The Issue
The journey began with a specific issue: Link to Issue #291. I have requested to integrate code formatting into the project and incorporate it into the continuous integration (CI) workflow.
Planning and Setup
Install Prettier
Install the Prettier into the machine locally:
npm install --save-dev prettier
Prettier Configuration
The first step was to introduce Prettier, a popular code formatter, to the project. I added a .prettierrc
file with the following configurations:
{
"arrowParens": "always",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"insertPragma": false,
"proseWrap": "preserve",
"requirePragma": false,
"tabWidth": 2,
"useTabs": false,
"printWidth": 80
}
Ignoring Unnecessary Files
To ensure Prettier didn't interfere with certain files, I created a .prettierignore
file:
package.json
package-lock.json
node_modules/
.DS_Store
*.html
Integrating Prettier into Package.json
I updated the package.json
file to include Prettier scripts:
"prettier": "prettier . --write",
"prettier-check": "prettier . --check"
Implementation
With the groundwork laid, it was time to incorporate Prettier into the project's CI workflow.
CI Workflow Update
I modified the .github/workflows/CI.yml
file to include a step for Prettier:
format:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Run Prettier check
run: npx prettier --check .
Challenges and Learnings
CI Configuration
Configuring CI workflows can be intricate. I faced challenges in ensuring Prettier worked seamlessly within the CI environment. Debugging and refining the workflow was an enlightening experience.
Pull Request
My pull request, Link to Pull Request #292, encapsulates the entire journey. The addition of code formatting not only improves the project's consistency but also sets the stage for future contributors.
Top comments (0)