Add pre-commit hooks for formatting #10737

jacobtylerwalls · 2024-04-03T20:33:58Z

Types of changes

Bugfix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Description of Change

Hand-formatting code is a drain on team productivity:

slows development
easily forgotten
bloats diffs
causes merge conflicts
prolongs code reviews or encourages bikeshedding
perhaps most importantly: can even discourage people from contributing to the project!

This PR adds prettier to format the frontend. Run it with yarn format.

It also adds a GitHub action that fails PRs without formatting. A hint is given:

[warn] Code style issues found in the above file. Run Prettier to fix.

Of course, that's a last resort, as pull request time is too late to get the real benefit. We can socialize the knowledge to enable either "format on save" in VS Code or install a pre-commit hook (included here). We might eventually have a pre-commit hook for a backend formatter also.

Demonstration

Sample changes that would be made in other pending work:
~~1e79453~~
7629b6d

Issues Solved

Closes #10575

Checklist

Unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

Ticket Background

Sponsored by: Getty Conservation Institute
Found by: @
Tested by: @
Designed by: @

.eslintrc.js

.prettierrc

package.json

jacobtylerwalls · 2024-04-03T20:40:50Z

package.json

@@ -20,7 +21,7 @@
        "type": "git"
    },
    "devDependencies": {
-        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
+        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#jtw/prettier"


Of course I'll revert this once archesproject/arches-dev-dependencies#15 is merged.

To test the pre-commit hook in a new project, you'll want to add this change to the project template file (and potentially reinstall arches) before creating it (or manually edit afterward and nuke/reinstall yarn)

chrabyrd

Overall I like this feature. There are some merge conflicts that need to be taken care of.

I'm wondering if instead of something like yarn format , this could be added as a pre-commit hook to remove the friction of using this

.github/workflows/main.yml

jacobtylerwalls · 2024-04-11T20:22:55Z

I'm wondering if instead of something like yarn format , this could be added as a pre-commit hook to remove the friction of using this

Sure, I was planning to add something like that as a follow-up, but I'm happy to add a little PoC here.

Follow-up to 09a0b61.

jacobtylerwalls · 2024-04-11T21:26:29Z

Added a pre-commit hook so that folks can have a frictionless formatting experience.

To use, assuming you already have the new js dependencies like prettier itself:

pip install -r arches/install/requirements_dev.txt
pre-commit install

Then write some vue/ts by hand, attempt to commit, see the auto-fix happen as the commit aborts. You can always git commit --no-verify.

I can walk interested folks through this on the forum and update the contributor docs if this lands. It is truly optional, if you like waiting for Github Actions to fail and asking you to make more commits ;)

.pre-commit-config.yaml

.prettierrc

jacobtylerwalls · 2024-04-26T21:21:30Z

@chrabyrd added black, but decided to wait on eslint/ts until #10758.

jacobtylerwalls · 2024-04-26T21:31:56Z

(I'll leave this in a failing state until approval, and then I can add one more formatting commit to clean up black and add it to the ignored commit hashes.)

chrabyrd

Is it possible to config the formatter so this pattern doesn't happen?

arches/arches/app/src/components/ControlledListManager/EditLabel.vue

Line 81 in 7629b6d

<span

jacobtylerwalls · 2024-05-01T14:07:45Z

Unfortunately not, there's an open issue for it.

I added a playground to toy with it. You can fix it yourself by putting the closing tag on a new line, and prettier is OK with it.

chrabyrd

Overall looks good just a couple of minor things.

Also holding off on merging this until #10758 is merged since it's blocking eslint/ts formatting hooks.

Also seeing the amount of files that require formatting in the GH action failures, does it make sense to have a separate commit that formats the codebase and then gets added to .git-blame-ignore-revs ?

chrabyrd · 2024-05-01T22:47:26Z

package.json

+        "eslint:check": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js",
+        "eslint:fix": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/eslint ./arches/app/src --resolve-plugins-relative-to ./arches/app/media --ext .vue,.ts --parser ./arches/app/media/node_modules/vue-eslint-parser/index.js --fix",
+        "eslint:watch": "NODE_PATH=./arches/app/media/node_modules ./arches/app/media/node_modules/.bin/nodemon --watch ./arches/app/src --ext ts,vue --exec yarn --silent eslint:check",
+        "format": "yarn prettier arches/app/src --write",


can this be renamed to something like prettier:format? All other yarn commands, save actual build processes, denote which dependency they're using

.github/workflows/main.yml

chrabyrd · 2024-05-01T23:00:47Z

.github/workflows/main.yml

@@ -70,6 +70,11 @@ jobs:
            echo "package.json not found, skipping yarn commands."
          fi

+      - name: Check formatting
+        run: |
+          yarn format --check --no-write


This reduces to

./arches/app/media/node_modules/.bin/prettier ./arches/app/src --write --check --no-write

The --write --no-write isn't ideal. Is it worth taking the --write flag out of yarn format? Or adding a second yarn command to package.json for exclusively checking?

Good catch. If I go with prettier:check and prettier:fix it will rhyme with the eslint commands.

Add formatting step to template CI workflow

jacobtylerwalls · 2024-05-02T15:18:31Z

Also seeing the amount of files that require formatting in the GH action failures, does it make sense to have a separate commit that formats the codebase and then gets added to .git-blame-ignore-revs ?

Yeah that was my plan. Will wait until right before merge, as we're going to merge more python code until then.

chrabyrd · 2024-05-08T22:27:02Z

arches/install/arches-templates/package.json

+    "resolutions": {
+        "@vue/compiler-sfc": "^3.4.21"
+    },


does this do anything? I'm reticent to include it at the project level if it's just quieting noise

chrabyrd · 2024-05-08T22:28:11Z

pyproject.toml

@@ -1,5 +1,5 @@
 [tool.black]
-line-length = 140
+line-length = 100


why shorten to 100? If we're going to shorten it why not follow PEP-8 or black standard line length?

I'm with you there. I'm pretty sure the black team did a huge amount of research on this, everything from accessibility to psychology to real-world usage stats, and an arbitrary value just invites more 🚲 'shedding when the whole promise of black is to liberate your team 🏇.

jacobtylerwalls requested a review from chrabyrd April 3, 2024 20:33

jacobtylerwalls assigned chrabyrd Apr 3, 2024

jacobtylerwalls linked an issue Apr 3, 2024 that may be closed by this pull request

Add prettier configuration to format vue/ts files #10575

Open

jacobtylerwalls mentioned this pull request Apr 3, 2024

Add prettier (and eslint-config-prettier) archesproject/arches-dev-dependencies#15

Draft

jacobtylerwalls commented Apr 3, 2024

View reviewed changes

chrabyrd requested changes Apr 11, 2024

View reviewed changes

.github/workflows/main.yml Outdated Show resolved Hide resolved

jacobtylerwalls added 2 commits April 11, 2024 16:17

Add command to format vue/ts files #10575

062e797

Temporarily point to dev dependencies with prettier re #10575

47821ce

jacobtylerwalls force-pushed the jtw/add-prettier-config branch from 4aa63c6 to 6562297 Compare April 11, 2024 20:35

jacobtylerwalls added 2 commits April 11, 2024 17:21

Remove extra yarn command, move prettierrc

3832c7d

Add resolutions to package.json template

0cebc36

Follow-up to 09a0b61.

jacobtylerwalls force-pushed the jtw/add-prettier-config branch from 6562297 to 94fedb5 Compare April 11, 2024 21:22

jacobtylerwalls commented Apr 11, 2024

View reviewed changes

.pre-commit-config.yaml Show resolved Hide resolved

jacobtylerwalls commented Apr 11, 2024

View reviewed changes

.prettierrc Show resolved Hide resolved

jacobtylerwalls requested a review from chrabyrd April 11, 2024 21:38

jacobtylerwalls changed the title ~~Add command to format vue/ts files #10575~~ Add pre-commit hook to format vue/ts files #10575 Apr 12, 2024

jacobtylerwalls added 4 commits April 26, 2024 16:49

Add pre-commit hook to run prettier re #10575

ce28593

Add black pre-commit hook

4c3d0e5

Reduce line-length to 100 in black config

24008b9

Fix error in test fixture preventing black from running

24b7d77

jacobtylerwalls force-pushed the jtw/add-prettier-config branch from 0fbdc00 to 24b7d77 Compare April 26, 2024 20:49

jacobtylerwalls changed the title ~~Add pre-commit hook to format vue/ts files #10575~~ Add pre-commit hooks for formatting Apr 26, 2024

jacobtylerwalls added 4 commits April 26, 2024 16:52

Add changelog re #10575

fbde211

nits re #10575

14405be

Merge branch 'dev/7.6.x' into jtw/add-prettier-config

8f218f1

nits re #10575

2bb896e

nit re #10575

952b143

chrabyrd reviewed Apr 30, 2024

View reviewed changes

jacobtylerwalls added 2 commits May 1, 2024 09:29

Merge branch dev/7.6.x into jtw/add-prettier-config

857eb80

Update updateproject command with new dotfiles

edf4e67

chrabyrd reviewed May 1, 2024

View reviewed changes

jacobtylerwalls mentioned this pull request May 1, 2024

Adds Vue component testing #10774 #10776

Merged

3 tasks

Rhyme formatting commands with linting commands re #10575

44b3b84

Add formatting step to template CI workflow

jacobtylerwalls added 2 commits May 8, 2024 13:13

Merge branch dev/7.6.x into jtw/add-prettier-config

d2cdf9b

Simplify prettier entrypoint, post-merge nits

fce6040

chrabyrd reviewed May 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add pre-commit hooks for formatting #10737

Add pre-commit hooks for formatting #10737

jacobtylerwalls commented Apr 3, 2024 •

edited

jacobtylerwalls Apr 3, 2024

jacobtylerwalls Apr 11, 2024 •

edited

chrabyrd left a comment

jacobtylerwalls commented Apr 11, 2024

jacobtylerwalls commented Apr 11, 2024

jacobtylerwalls commented Apr 26, 2024

jacobtylerwalls commented Apr 26, 2024

chrabyrd left a comment

jacobtylerwalls commented May 1, 2024 •

edited

chrabyrd left a comment •

edited

chrabyrd May 1, 2024

chrabyrd May 1, 2024

jacobtylerwalls May 2, 2024

jacobtylerwalls commented May 2, 2024

chrabyrd May 8, 2024

chrabyrd May 8, 2024 •

edited

jacobtylerwalls May 17, 2024

Add pre-commit hooks for formatting #10737

Are you sure you want to change the base?

Add pre-commit hooks for formatting #10737

Conversation

jacobtylerwalls commented Apr 3, 2024 • edited

Types of changes

Description of Change

Demonstration

Issues Solved

Checklist

Ticket Background

jacobtylerwalls Apr 3, 2024

Choose a reason for hiding this comment

jacobtylerwalls Apr 11, 2024 • edited

Choose a reason for hiding this comment

chrabyrd left a comment

Choose a reason for hiding this comment

jacobtylerwalls commented Apr 11, 2024

jacobtylerwalls commented Apr 11, 2024

jacobtylerwalls commented Apr 26, 2024

jacobtylerwalls commented Apr 26, 2024

chrabyrd left a comment

Choose a reason for hiding this comment

jacobtylerwalls commented May 1, 2024 • edited

chrabyrd left a comment • edited

Choose a reason for hiding this comment

chrabyrd May 1, 2024

Choose a reason for hiding this comment

chrabyrd May 1, 2024

Choose a reason for hiding this comment

jacobtylerwalls May 2, 2024

Choose a reason for hiding this comment

jacobtylerwalls commented May 2, 2024

chrabyrd May 8, 2024

Choose a reason for hiding this comment

chrabyrd May 8, 2024 • edited

Choose a reason for hiding this comment

jacobtylerwalls May 17, 2024

Choose a reason for hiding this comment

jacobtylerwalls commented Apr 3, 2024 •

edited

jacobtylerwalls Apr 11, 2024 •

edited

jacobtylerwalls commented May 1, 2024 •

edited

chrabyrd left a comment •

edited

chrabyrd May 8, 2024 •

edited