Add Prettier about confs.tech HOT 14 OPEN

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

from confs.tech.

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

from confs.tech.

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.

from confs.tech.

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

from confs.tech.

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?

from confs.tech.

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 :/

from confs.tech.

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

from confs.tech.

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.

from confs.tech.

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

from confs.tech.

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

from confs.tech.

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

from confs.tech.

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.

from confs.tech.

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

from confs.tech.

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

from confs.tech.