Adding Code Formatting to Whitebophir Project: A Journey of Contribution

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.