Add Prettier

[JuanPabloDiaz]

Suggestion: Integrate Prettier with Tailwind CSS Plugin for Consistent Styling Across Environments

To enhance our project's code consistency and accommodate various developer environments, I recommend integrating the Prettier plugin for Tailwind CSS. This addition will align our styling efforts, especially since we're already utilizing eslint for code formatting.

The integration with Prettier and its Tailwind CSS plugin ensures that our codebase remains consistent, regardless of individual VS Code configurations. This approach not only streamlines the development process but also minimizes the potential for stylistic discrepancies across contributions.

Here's a proposed .prettierrc.json configuration to consider:

// .prettierrc.json
{
  "semi": true,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
}

That last past is probably already handled by the format command but I would like a solution that format the code regardless of the VS code configuration.

This setup will help maintain a unified code style, making our project more accessible to new contributors and reducing the overhead for code reviews.

Looking forward to your thoughts on this proposal.

[nimzco]

Sounds good to me! Happy to see a PR to see how the CSS will be updated. :)

[JuanPabloDiaz]

I was reading about husky and I noticed that its being use in the repo as well.

[JuanPabloDiaz]

I am sorry but the repo does not use tailwind at all. I just realized that it is using SCSS for all the styling. LOL

I still want to work on the solution to ensure a formatting rules regardless of whether developers manually format their code.

[nimzco]

Haha that's true, I thought it was a catch-all kind of linter.

You can run npm lint --fix locally, otherwise I believe you can activate a settings on VSCode to auto format based on eslint

[JuanPabloDiaz]

I found a better approach by running Prettier as a GitHub Action:

name: Check Code with Prettier

on:
  pull_request:
    branches:
      - "main"

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repo
        uses: actions/checkout@v3
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version-file: ".nvmrc"
          cache: "npm"
      - name: Download dependencies
        run: npm ci
      - name: Run prettier
        run: npm run format

What do you think @nimzco?

[nimzco]

That will "pretty" the code on the CI action but won't add a new commit to the branch though. Also, I don't know why, but when I ran this command locally, it wasn't formatting the file I had to format, so I'm a bit confused on the current config :/

[JuanPabloDiaz]

That will "pretty" the code on the CI action but won't add a new commit to the branch though.

Update to "Format Code with Prettier"

name: Format Code with Prettier

on:
  pull_request:
    branches:
      - "main"

jobs:
  format:
    runs-on: ubuntu-latest

    steps:
      - name: Check out repository
        uses: actions/checkout@v3
        with:
          ref: ${{ github.head_ref }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version-file: ".nvmrc"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run Prettier
        run: npm run prettier

      - name: Check for changes
        id: check_changes
        run: |
          if [ -n "$(git status --porcelain)" ]; then
            echo "changes_detected=true" >> $GITHUB_ENV
          else
            echo "changes_detected=false" >> $GITHUB_ENV
          fi

      - name: Commit and Push changes
        if: env.changes_detected == 'true'
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
          git add .
          git commit -m "chore: fix formatting issues"
          git push origin HEAD:${{ github.head_ref }}

• Ensure Workflow read and write permissions are enable
• Add script:

"scripts": {
  "prettier": "npx prettier --write \"**/*.{ts,tsx,}\""
}

This approach will Commit and Push changes. Is this better @nimzco? the workflow works for me in a personal repo

[nimzco]

Code looks good, let's open a PR to test it!

Does it currently format all files? I ran prettier locally, and it formatted too many files vs what the nom run build script expects.

[JuanPabloDiaz]

It run into a Permissions error but it did format all .ts and .tsx files

[nimzco]

Hmm. I've never tried to do this, but look at what github actions are available out there. I see this after a quick googling: https://github.com/orgs/community/discussions/24945#discussioncomment-3245946

[nimzco]

Or I see: https://github.com/marketplace/actions/add-commit

[JuanPabloDiaz]

I will take a look at that tomorrow. Thanks.

I was wondering if we could use the confs.bot for this? Or give similar permissions.

In my project, I went into the repo setting 》actions 》enable read and write permissions.

[nimzco]

You mean this: The bot is a user I think, so you might need to use a different user to push? 🤔

[JuanPabloDiaz]

Yes, it needs to have the contents: write permission enabled for the GITHUB_TOKEN in the GitHub Actions workflow to be able to commit and push changes back to the repository

[JuanPabloDiaz]

fixed on #728