Skip to content
This repository has been archived by the owner on Feb 21, 2025. It is now read-only.

Add automatic Prettier GitHub action #4259

Merged
merged 10 commits into from
Aug 23, 2021
Merged

Add automatic Prettier GitHub action #4259

merged 10 commits into from
Aug 23, 2021

Conversation

felixfbecker
Copy link
Contributor

@felixfbecker felixfbecker commented Aug 20, 2021

Overall, the goal of this PR is to make the content in this repo a lot easier to edit and read without getting into anyone's way.

Currently, editing CSS or JS (and even Markdown in some cases) for the handbook or the website is a really frustrating experience. Indendation is inconsistent between 2 and 4, sometimes tabs and spaces are mixed within the same file. Selectors are sometimes formatted in a hard to read way. TSX needs to be indented manually.

There is trailing whitespace everywhere, especially in Markdown files. It is extremely difficult to not end up with huge diffs (and consequential merge conflicts) on every PR because editors auto-trimmed whitespace without having to jump through many hoops to reconfigure editors just when editing the handbook.

Markdown is formatted in inconsistent ways when Markdown supports multiple ways to do the same thing (lists, bolding, italics, ...), making it harder to read and understand the plain text source, sometimes even leading to errors.

Markdown tables are effectively unreadable (and uneditable) in their source because the columns are completely misaligned (and who has time to format them manually?).

All of this could be easily solved by Prettier with autoformatting. What speaks against that is:

  1. People would be required to autoformat it (can't edit without proper editor setup or through the GitHub UI)
  2. We'd need a CI check and could not push to main directly anymore, meaning every change needs to go through a PR
  3. The initial diff would probably reformat many files and make git blame harder to trace

I believe all of these points are solvable, and that this PR addresses each.

  1. It adds a Prettier GitHub action that will automatically reformat files on PRs and push a commit to the branch, meaning people don't need to worry about setting up a local editor and can even continue to use the GitHub UI for edits. On merge the commit is squashed so there will be no trace of it on main.

  2. We've already enforced PRs and required status checks for a while now after many breakages had happened from pushing to main that would cause subsequent changes and the deploy to be blocked. I consider this a positive change for many reasons, as overall it also makes sure as our organization scales edits to the handbook are done in PRs that can be reviewed and commented on by anyone at the company.

  3. For (3), Git supports the option --ignore-revs-file (also configurable globally with git config) that has been adopted in open source projects already (e.g. https://github.com/v8/v8/blob/master/.git-blame-ignore-revs). After merging this PR, I will add such a file with the commit hash of the format commit, which would still allow us to blame, ignoring the first large format commit. I will also say though that I think we should do this regardless because with frequent changes to the handbook eventually the commit will be long forgotten about anyway and we do this all the time in our main repo too, even without a blame-ignore-revs file, e.g. every time we upgrade ESLint. The benefits of editing experience outweigh the cost.

@felixfbecker felixfbecker force-pushed the prettier branch 2 times, most recently from ae02ae6 to 677ecd3 Compare August 20, 2021 12:21
@felixfbecker felixfbecker marked this pull request as ready for review August 20, 2021 12:21
@sourcegraph-bot
Copy link
Contributor

sourcegraph-bot commented Aug 20, 2021

Notifying subscribers in CODENOTIFY files for diff 77d1022...c9cfc9a.

Notify File(s)
@beyang podcast/0.md
podcast/1.md
podcast/10.md
podcast/11.md
podcast/12.md
podcast/13.md
podcast/14.md
podcast/15.md
podcast/16.md
podcast/2.1.md
podcast/2.2.md
podcast/2.3.md
podcast/2.4.md
podcast/2.md
podcast/3.1.md
podcast/3.md
podcast/4.md
podcast/5.md
podcast/6.md
podcast/7.md
podcast/8.md
podcast/9.md
@chrispine handbook/engineering/career-development/talent-review-process.md
@christinaforney handbook/company/values.md
handbook/product/beta_and_experimental_feature_labels.md
handbook/product/dan-mckean-readme.md
handbook/product/delivery_plans.md
handbook/product/demo_day.md
handbook/product/deprecation_process.md
handbook/product/design/design-and-interaction-guidelines.md
handbook/product/design/design_process.md
handbook/product/design/index.md
handbook/product/design/tools/index.md
handbook/product/design/visual_design/index.md
handbook/product/design_principles.md
handbook/product/onboarding/index.md
handbook/product/planning.md
handbook/product/prioritizing.md
handbook/product/product_documents.md
handbook/product/product_learning.md
handbook/product/product_management/product_process.md
handbook/product/product_management/release_blog_post_template.md
handbook/product/product_management/responding_to_user_feedback.md
handbook/product/product_org.md
handbook/product/roles/index.md
handbook/product/roles/interviews/director_product/index.md
handbook/product/roles/interviews/director_technical_writing/index.md
handbook/product/roles/interviews/hm_intro_call.md
handbook/product/roles/interviews/initial_screen.md
handbook/product/roles/interviews/product_manager/index.md
handbook/product/rollout_process.md
handbook/product/surfacing_product_feedback.md
handbook/product/user_feedback.md
handbook/product/user_research/user_research_compensation.md
handbook/product/user_research/user_research_observer.md
handbook/workflow/index.md
handbook/workflow/tools/atlassian_fisheye_vs_sourcegraph.md
handbook/workflow/tools/gitlab_vs_sourcegraph.md
handbook/workflow/tools/hound_vs_sourcegraph.md
handbook/workflow/tools/index.md
handbook/workflow/tools/livegrep_vs_sourcegraph.md
handbook/workflow/tools/opengrok_vs_sourcegraph.md
handbook/workflow/tools/phabricator_vs_sourcegraph.md
@greggstone handbook/sales/common_customer_questions.md
handbook/sales/index.md
handbook/sales/interviews/index.md
handbook/sales/onboarding/data_onboarding.md
handbook/sales/onboarding/index.md
handbook/sales/onboarding/joining_customer_calls.md
handbook/sales/records.md
handbook/sales/roles/index.md
handbook/sales/salesforce.md
handbook/sales/saleslegal.md
handbook/sales/salesresources.md
handbook/sales/salessecurity.md
handbook/sales/sdrteam.md
@jeanduplessis handbook/company/values.md
handbook/engineering/career-development/talent-review-process.md
handbook/engineering/hiring/hm_intro_call.md
handbook/engineering/hiring/index.md
handbook/engineering/hiring/software-engineer-coding-exercise.md
handbook/engineering/hiring/software-engineer-pairing-exercise.md
@lguychard handbook/engineering/hiring/software-engineer-coding-exercise.md
@nicksnyder handbook/company/values.md
handbook/engineering/hiring/hm_intro_call.md
handbook/engineering/hiring/index.md
handbook/engineering/hiring/software-engineer-coding-exercise.md
handbook/engineering/hiring/software-engineer-pairing-exercise.md
@pdubroy handbook/engineering/career-development/talent-review-process.md
@slimsag handbook/engineering/observability/cloud_monitoring.md
handbook/engineering/observability/cloudflare.md
handbook/engineering/observability/index.md
handbook/engineering/observability/monitoring_architecture.md
handbook/engineering/observability/monitoring_pillars.md
@sourcegraph/batchers handbook/engineering/batch-changes/ce-onboarding.md
handbook/engineering/batch-changes/goals.md
handbook/engineering/batch-changes/index.md
@sourcegraph/code-insights handbook/engineering/developer-insights/api-docs/index.md
handbook/engineering/developer-insights/code-insights/goals.md
handbook/engineering/developer-insights/code-insights/goals.md
handbook/engineering/developer-insights/code-insights/goals_completed.md
handbook/engineering/developer-insights/code-insights/goals_completed.md
handbook/engineering/developer-insights/code-insights/index.md
handbook/engineering/developer-insights/code-insights/index.md
handbook/engineering/developer-insights/extensibility/goals.md
handbook/engineering/developer-insights/extensibility/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/goals.md
handbook/engineering/developer-insights/frontend-platform/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/index.md
@sourcegraph/code-intel handbook/engineering/code-intelligence/code-walkthrough.md
handbook/engineering/code-intelligence/goals.md
handbook/engineering/code-intelligence/index.md
@sourcegraph/core-application handbook/engineering/core-application/areas-of-ownership.md
handbook/engineering/core-application/goals.md
handbook/engineering/core-application/index.md
handbook/engineering/core-application/onboarding/how-repo-updater-works.md
handbook/engineering/core-application/onboarding/tips-and-tricks.md
handbook/engineering/core-application/operational-rotation.md
handbook/engineering/core-application/playbooks/getting-a-list-of-cloud-users.md
handbook/engineering/core-application/playbooks/index.md
@sourcegraph/distribution handbook/engineering/distribution/gcp.md
handbook/engineering/distribution/github_enterprise_testing_instance.md
handbook/engineering/distribution/gitlab_native_local.md
handbook/engineering/distribution/index.md
handbook/engineering/distribution/internal_infrastructure.md
handbook/engineering/distribution/k8s_admin_custom_policy.md
handbook/engineering/distribution/managed/cost_estimation.md
handbook/engineering/distribution/managed/creation_process.md
handbook/engineering/distribution/managed/operations.md
handbook/engineering/distribution/managed/upgrade_process.md
handbook/engineering/distribution/onboarding.md
handbook/engineering/distribution/ownership_areas.md
handbook/engineering/distribution/rollbacks.md
handbook/engineering/distribution/tokens.md
handbook/engineering/distribution/tools/ghe_feeder.md
handbook/engineering/distribution/tools/resources_report.md
handbook/engineering/observability/cloud_monitoring.md
handbook/engineering/observability/cloudflare.md
handbook/engineering/observability/index.md
handbook/engineering/observability/monitoring_architecture.md
handbook/engineering/observability/monitoring_pillars.md
@sourcegraph/extensibility handbook/engineering/developer-insights/api-docs/index.md
handbook/engineering/developer-insights/code-insights/goals.md
handbook/engineering/developer-insights/code-insights/goals_completed.md
handbook/engineering/developer-insights/code-insights/index.md
handbook/engineering/developer-insights/extensibility/goals.md
handbook/engineering/developer-insights/extensibility/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/goals.md
handbook/engineering/developer-insights/frontend-platform/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/index.md
@sourcegraph/frontend-platform handbook/engineering/developer-insights/api-docs/index.md
handbook/engineering/developer-insights/code-insights/goals.md
handbook/engineering/developer-insights/code-insights/goals_completed.md
handbook/engineering/developer-insights/code-insights/index.md
handbook/engineering/developer-insights/extensibility/goals.md
handbook/engineering/developer-insights/extensibility/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/goals.md
handbook/engineering/developer-insights/frontend-platform/goals_completed.md
handbook/engineering/developer-insights/frontend-platform/index.md
@sourcegraph/marketing blogposts/2021/api-documentation-generated-for-all-your-code.md
blogposts/2021/avoiding-the-pitfalls-of-iteration-based-development.md
blogposts/2021/better-onboarding-advice-from-3-engineering-leaders.md
blogposts/2021/better-onboarding-prevent-codebase-overwhelm.md
blogposts/2021/dev-tool-time-leah-culver.md
blogposts/2021/dev-tool-time-seth-vargo.md
blogposts/2021/dev-tool-time-thorsten-ball.md
blogposts/2021/feature-removal-interactive-search-mode.md
blogposts/2021/how-to-deconstruct-the-monolith.md
blogposts/2021/how-to-not-break-a-search-engine-or-what-i-learned-about-unglamorous-engineering.md
blogposts/2021/introducing-batch-changes.md
blogposts/2021/introducing-sourcegraphs-new-ui.md
blogposts/2021/optimizing-a-code-intelligence-commit-graph-1.md
blogposts/2021/optimizing-a-code-intelligence-commit-graph-2.md
blogposts/2021/postgres-version-update.md
blogposts/2021/release-3.24.md
blogposts/2021/release-3.25.md
blogposts/2021/release-3.26.md
blogposts/2021/release-3.27.md
blogposts/2021/release-3.28.md
blogposts/2021/release-3.29.md
blogposts/2021/release-3.30.md
blogposts/2021/role-of-observability-high-performing-teams.md
blogposts/2021/the-future-of-code-search.md
blogposts/2021/why-index-the-oss-universe.md
blogposts/2021/why-were-friends-not-competitors-with-code-hosts.md
blogposts/2021/workspaces-of-sourcegraph.md
blogposts/2021/zoekt-memory-optimizations-for-sourcegraph-cloud.md
docs/archives/terms-self-hosted/2021-06-24.md
docs/security.md
docs/terms-dotcom.md
docs/terms-self-hosted.md
docs/terms.md
handbook/marketing/account_based_experience.md
handbook/marketing/adding_screenshots_screen_recording.md
handbook/marketing/batch_changes_positioning.md
handbook/marketing/becoming_a_sourcegraph_champion.md
handbook/marketing/brand/brand_and_creative_team_mission_and_values.md
handbook/marketing/brand/brand_and_creative_team_requests.md
handbook/marketing/brand/brand_guidelines.md
handbook/marketing/brand/building_a_strong_brand.md
handbook/marketing/brand/gifting_guidelines.md
handbook/marketing/brand/index.md
handbook/marketing/brand/naming_process_for_products_features_and_programs.md
handbook/marketing/brand/production_process.md
handbook/marketing/brand/sourcegraph_in-house_brand_team.md
handbook/marketing/content/blog_hackathon.md
handbook/marketing/content/creating_blog_posts.md
handbook/marketing/content/editorial.md
handbook/marketing/content/index.md
handbook/marketing/customer_marketing.md
handbook/marketing/demandgen.md
handbook/marketing/digital_marketing_programs.md
handbook/marketing/education/dev-ed-council.md
handbook/marketing/education/index.md
handbook/marketing/education/learn-platform.md
handbook/marketing/education/process.md
handbook/marketing/education/style.md
handbook/marketing/index.md
handbook/marketing/marketing_launch_tiers.md
handbook/marketing/marketing_operations.md
handbook/marketing/messaging.md
handbook/marketing/oss_community_pages.md
handbook/marketing/product_marketing.md
handbook/marketing/product_marketing_hierarchy.md
handbook/marketing/public_projects_using_sourcegraph.md
handbook/marketing/release_post_process.md
handbook/marketing/roles/index.md
website/.nvmrc
website/gatsby-browser.js
website/gatsby-config.js
website/package.json
website/src/components/BoardSection.tsx
website/src/components/Footer.tsx
website/src/components/GetStarted.tsx
website/src/components/HubSpot.tsx
website/src/components/IntegrationsSection.tsx
website/src/components/LeadershipSection.tsx
website/src/components/NewsList.tsx
website/src/components/TrySourcegraph.tsx
website/src/components/Tweets.tsx
website/src/components/YouTube.tsx
website/src/components/blog/BlogHeader.tsx
website/src/components/blog/BlogPost.tsx
website/src/components/blog/PodcastPost.tsx
website/src/components/blog/PressReleasePost.tsx
website/src/components/blog/ReleasePost.tsx
website/src/components/content/CaseStudyPage.tsx
website/src/components/pricing/PricingPlan.tsx
website/src/components/pricing/PricingPlanFeature.tsx
website/src/components/product/CaseStudiesSection.tsx
website/src/components/product/CustomerLogosSection.tsx
website/src/components/product/CustomerLogosSectionAnimated.tsx
website/src/css/components/_GetStarted.scss
website/src/css/components/_LeadershipSection.scss
website/src/css/components/_TestimonialCarousel.scss
website/src/css/components/blog/_BlogPost.scss
website/src/css/components/product/_CustomerLogosSection.scss
website/src/css/components/product/_CustomerLogosSectionAnimated.scss
website/src/css/components/product/_GitLabIntegrationSection.scss
website/src/css/pages/_index.scss
website/src/css/pages/_jobs.scss
website/src/css/pages/_universal-code-search.scss
website/src/css/styles.scss
website/src/css/templates/_PostTemplate.scss
website/src/data/news-listing.json
website/src/html.tsx
website/src/pages/about.tsx
website/src/pages/batch-changes.tsx
website/src/pages/case-studies/cern-reduces-technical-debt.tsx
website/src/pages/case-studies/cloudflare-accelerates-debugging-and-improves-security.tsx
website/src/pages/case-studies/convoy-improved-on-boarding.tsx
website/src/pages/case-studies/convoy-software-engineers-and-data-scientists-work-better-together.tsx
website/src/pages/case-studies/criteo-tackles-big-code.tsx
website/src/pages/case-studies/f5-streamlines-collaboration-globally.tsx
website/src/pages/case-studies/indeed-accelerates-development-velocity.tsx
website/src/pages/case-studies/lyft-monolith-to-microservices.tsx
website/src/pages/case-studies/sofi-moves-fast-on-hundreds-of-microservices.tsx
website/src/pages/case-studies/we-are-thorn.tsx
website/src/pages/case-studies/workiva-automates-large-scale-code-changes.tsx
website/src/pages/code-search.tsx
website/src/pages/contact/index.tsx
website/src/pages/customers.tsx
website/src/pages/index.tsx
website/src/pages/podcast.tsx
website/src/pages/press-release.tsx
website/src/pages/pricing.tsx
website/src/pages/resources/abcs-book.tsx
website/src/pages/support.tsx
website/src/pages/white-papers/remote-work-easier.tsx
website/src/templates/PodcastEpisodeTemplate.tsx
website/src/templates/PostTemplate.tsx
website/static/gophercon-2019/optimizing-without-a-blindfold-compiler-ssa.html
website/yarn.lock
@sourcegraph/search-core handbook/engineering/search/core.md
@sourcegraph/search-product handbook/engineering/search/product.md
@sourcegraph/security handbook/engineering/security/goals.md
handbook/engineering/security/index.md
handbook/engineering/security/infrastructure/index.md
handbook/engineering/security/infrastructure/playbooks.md
handbook/engineering/security/process.md
handbook/engineering/security/reporting-vulnerabilities.md
handbook/engineering/security/secure-code-review.md
handbook/engineering/security/security-incident-response.md
@sqs handbook/company/asynchronous-communication.md
handbook/company/customer-first.md
handbook/company/goals/2021_q1.md
handbook/company/goals/2021_q2.md
handbook/company/goals/guidelines.md
handbook/company/goals/index.md
handbook/company/remote/index.md
handbook/company/remote/teammate-recommended_productivity_hacks.md
handbook/company/remote/tips.md
handbook/company/team/index.md
handbook/company/team/jean-du-plessis.md
handbook/company/team/locations.md
handbook/company/team/nick.md
handbook/company/team/org_chart.md
handbook/company/values.md
@tsenart handbook/engineering/hiring/software-engineer-coding-exercise.md
@withdavidli handbook/engineering/hiring/hm_intro_call.md
handbook/engineering/hiring/index.md
handbook/engineering/hiring/software-engineer-coding-exercise.md
handbook/engineering/hiring/software-engineer-pairing-exercise.md

@Joelkw
Copy link
Contributor

Joelkw commented Aug 20, 2021

As someone who often forgets to run prettier (because of infrequency of updates and/or having to push something between meetings) this would be awesome!

Copy link
Member

@eseliger eseliger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

neat 👍

Copy link
Contributor

@courier-new courier-new left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What a great idea!

For (3), Git supports the option --ignore-revs-file (also configurable globally with git config) that has been adopted in open source projects already (e.g. https://github.com/v8/v8/blob/master/.git-blame-ignore-revs). After merging this PR, I will add such a file with the commit hash of the format commit, which would still allow us to blame, ignoring the first large format commit. I will also say though that I think we should do this regardless because with frequent changes to the handbook eventually the commit will be long forgotten about anyway and we do this all the time in our main repo too, even without a blame-ignore-revs file, e.g. every time we upgrade ESLint. The benefits of editing experience outweigh the cost.

😱 TIL. We should absolutely start doing this when we upgrade ESLint or something similar in the main repo, too.

Copy link
Member

@valerybugakov valerybugakov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the detailed PR description! 🤗

Using the GITHUB_TOKEN causes no workflows to be run on the pushed commit
@nicksnyder
Copy link
Contributor

This broke nested list formatting in our handbook. What is the right way to fix this?

Screen Shot 2021-09-13 at 11 30 06 AM

@felixfbecker
Copy link
Contributor Author

@nicksnyder The right "fix" would be to migrate our Markdown renderer from blackfriday to e.g. goldmark. More context in #4446 and russross/blackfriday#329. People have been struggling with blackfriday's rendering even before Prettier because the 4 spaces indentation is not intuitive and inconsistent with how GitHub and any other CommonMark-compliant parser renders it. And not being CommonMark-compliant also brings other bugs with it unrelated to nested lists or Prettier that exist in our handbook (e.g. bolding inside links).

Introducing Prettier of course made this issue a lot more apparent and I'm sorry for that – I didn't think of this bug when adding it. I still think it's the right thing to have Prettier though considering the benefits and that this was a frequent (although slightly less frequent) problem before. I investigated several workarounds (including changing indentation in the Prettier config, which didn't work as expected) and I think the best option is to just use <!-- prettier-ignore --> for now for nested lists where this issue occurs.

Btw, this even a bug in our Markdown rendering in our product too, because we use blackfriday there too.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants