Open JuanPabloDiaz opened 2 weeks ago
Sounds good to me! Happy to see a PR to see how the CSS will be updated. :)
I was reading about husky and I noticed that its being use in the repo as well.
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.
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
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?
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 :/
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 }}
"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
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.
It run into a Permissions error but it did format all .ts
and .tsx
files
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
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.
You mean this: The bot is a user I think, so you might need to use a different user to push? 🤔
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
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: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.