fix: formatting with prettier not working in non skeleton repos (#3512)

fredericoo · web-flow · commit 10ce0fb2e029 · 2026-02-26T17:31:34.000Z
### WHY are these changes introduced? Since we moved to `pnpm` prettier has been silently failing in code changes that are not the skeleton: because `npm` used to hoist the `@shopify/prettier-config` package from skeleton to the root of the monorepo, we were able to run it in other places. Oh and we were not checking or formatting the skeleton template! ### WHAT is this pull request doing? - adding `@shopify/prettier-config` at the root package.json - standardised version with `catalog:` - added `./templates` to formating and checks ### HOW to test your changes? - change the formatting a file outside skeleton (like a test) - format it - check output of prettier if you are on vscode and use the extension to ensure it loaded it all good #### Checklist - [x] I've read the [Contributing Guidelines](https://github.com/Shopify/hydrogen/blob/main/CONTRIBUTING.md) - [x] I've considered possible cross-platform impacts (Mac, Linux, Windows) - I've added a [changeset](https://github.com/Shopify/hydrogen/blob/main/CONTRIBUTING.md#changesets) if this PR contains user-facing or noteworthy changes - I've added [tests](https://github.com/Shopify/hydrogen/blob/main/CONTRIBUTING.md#testing) to cover my changes - I've added or updated the documentation
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "encrypt": "ejson encrypt secrets.ejson",
     "lint": "eslint --no-error-on-unmatched-pattern ./packages",
     "lint-staged": "eslint --no-error-on-unmatched-pattern",
-    "format": "prettier --write --ignore-unknown ./packages",
-    "format:check": "prettier --check --ignore-unknown ./packages",
+    "format": "prettier --write --ignore-unknown ./packages ./templates",
+    "format:check": "prettier --check --ignore-unknown ./packages ./templates",
     "typecheck": "turbo typecheck --parallel",
     "test": "turbo run test --parallel",
     "test:watch": "turbo run test:watch",
@@ -106,7 +106,8 @@
     "tiny-invariant": "^1.3.3",
     "tsup": "^8.4.0",
     "turbo": "2.8.9",
-    "typescript": "5.9.2"
+    "typescript": "5.9.2",
+    "@shopify/prettier-config": "catalog:"
   },
   "engines": {
     "node": "^22 || ^24",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -24,3 +24,4 @@ catalog:
   '@types/react-dom': '^18.3.7'
   react: '^18.3.1'
   react-dom: '^18.3.1'
+  '@shopify/prettier-config': '^1.1.2'
diff --git a/templates/skeleton/app/entry.client.tsx b/templates/skeleton/app/entry.client.tsx
@@ -6,9 +6,8 @@ import {NonceProvider} from '@shopify/hydrogen';
 if (!window.location.origin.includes('webcache.googleusercontent.com')) {
   startTransition(() => {
     // Extract nonce from existing script tags
-    const existingNonce = document
-      .querySelector<HTMLScriptElement>('script[nonce]')
-      ?.nonce;
+    const existingNonce =
+      document.querySelector<HTMLScriptElement>('script[nonce]')?.nonce;
 
     hydrateRoot(
       document,
diff --git a/templates/skeleton/app/routes/account.tsx b/templates/skeleton/app/routes/account.tsx
@@ -14,14 +14,11 @@ export function shouldRevalidate() {
 
 export async function loader({context}: Route.LoaderArgs) {
   const {customerAccount} = context;
-  const {data, errors} = await customerAccount.query(
-    CUSTOMER_DETAILS_QUERY,
-    {
-      variables: {
-        language: customerAccount.i18n.language,
-      },
+  const {data, errors} = await customerAccount.query(CUSTOMER_DETAILS_QUERY, {
+    variables: {
+      language: customerAccount.i18n.language,
     },
-  );
+  });
 
   if (errors?.length || !data?.customer) {
     throw new Error('Customer not found');
diff --git a/templates/skeleton/app/routes/blogs.$blogHandle._index.tsx b/templates/skeleton/app/routes/blogs.$blogHandle._index.tsx
@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/blogs.$blogHandle._index';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
@@ -26,11 +23,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  request,
-  params,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, request, params}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
diff --git a/templates/skeleton/app/routes/blogs._index.tsx b/templates/skeleton/app/routes/blogs._index.tsx
@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/blogs._index';
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
@@ -1,8 +1,4 @@
-import {
-  useLoaderData,
-  data,
-  type HeadersFunction,
-} from 'react-router';
+import {useLoaderData, data, type HeadersFunction} from 'react-router';
 import type {Route} from './+types/cart';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
diff --git a/templates/skeleton/app/routes/collections.all.tsx b/templates/skeleton/app/routes/collections.all.tsx
@@ -1,7 +1,5 @@
 import type {Route} from './+types/collections.all';
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {ProductItem} from '~/components/ProductItem';
diff --git a/templates/skeleton/app/routes/pages.$handle.tsx b/templates/skeleton/app/routes/pages.$handle.tsx
@@ -1,6 +1,4 @@
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import type {Route} from './+types/pages.$handle';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
@@ -22,11 +20,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  request,
-  params,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, request, params}: Route.LoaderArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }
diff --git a/templates/skeleton/app/routes/policies.$handle.tsx b/templates/skeleton/app/routes/policies.$handle.tsx
@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/policies.$handle';
 import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
diff --git a/templates/skeleton/app/routes/policies._index.tsx b/templates/skeleton/app/routes/policies._index.tsx
@@ -4,7 +4,7 @@ import type {PoliciesQuery, PolicyItemFragment} from 'storefrontapi.generated';
 
 export async function loader({context}: Route.LoaderArgs) {
   const data: PoliciesQuery = await context.storefront.query(POLICIES_QUERY);
-  
+
   const shopPolicies = data.shop;
   const policies: PolicyItemFragment[] = [
     shopPolicies?.privacyPolicy,
diff --git a/templates/skeleton/app/routes/products.$handle.tsx b/templates/skeleton/app/routes/products.$handle.tsx
@@ -1,7 +1,4 @@
-import {
-  redirect,
-  useLoaderData,
-} from 'react-router';
+import {redirect, useLoaderData} from 'react-router';
 import type {Route} from './+types/products.$handle';
 import {
   getSelectedProductOptions,
@@ -40,11 +37,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  params,
-  request,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, params, request}: Route.LoaderArgs) {
   const {handle} = params;
   const {storefront} = context;
 
diff --git a/templates/skeleton/app/routes/search.tsx b/templates/skeleton/app/routes/search.tsx
@@ -1,6 +1,4 @@
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import type {Route} from './+types/search';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
@@ -10,7 +8,10 @@ import {
   type PredictiveSearchReturn,
   getEmptyPredictiveSearchResult,
 } from '~/lib/search';
-import type {RegularSearchQuery, PredictiveSearchQuery} from 'storefrontapi.generated';
+import type {
+  RegularSearchQuery,
+  PredictiveSearchQuery,
+} from 'storefrontapi.generated';
 
 export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Search`}];
@@ -225,9 +226,13 @@ async function regularSearch({
   const term = String(url.searchParams.get('q') || '');
 
   // Search articles, pages, and products for the `q` term
-  const {errors, ...items}: {errors?: Array<{message: string}>} & RegularSearchQuery = await storefront.query(SEARCH_QUERY, {
-    variables: {...variables, term},
-  });
+  const {
+    errors,
+    ...items
+  }: {errors?: Array<{message: string}>} & RegularSearchQuery =
+    await storefront.query(SEARCH_QUERY, {
+      variables: {...variables, term},
+    });
 
   if (!items) {
     throw new Error('No search data returned from Shopify API');
@@ -389,17 +394,18 @@ async function predictiveSearch({
   if (!term) return {type, term, result: getEmptyPredictiveSearchResult()};
 
   // Predictively search articles, collections, pages, products, and queries (suggestions)
-  const {predictiveSearch: items, errors}: PredictiveSearchQuery & {errors?: Array<{message: string}>} = await storefront.query(
-    PREDICTIVE_SEARCH_QUERY,
-    {
+  const {
+    predictiveSearch: items,
+    errors,
+  }: PredictiveSearchQuery & {errors?: Array<{message: string}>} =
+    await storefront.query(PREDICTIVE_SEARCH_QUERY, {
       variables: {
         // customize search options as needed
         limit,
         limitScope: 'EACH',
         term,
       },
-    },
-  );
+    });
 
   if (errors) {
     throw new Error(
diff --git a/templates/skeleton/guides/predictiveSearch/predictiveSearch.md b/templates/skeleton/guides/predictiveSearch/predictiveSearch.md
@@ -15,7 +15,7 @@ This integration uses the storefront API (SFAPI) [predictiveSearch](https://shop
 
 | File                                                                                             | Description                                                                                                                                            |
 | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`app/components/SearchFormPredictive.tsx`](../../app/components/SearchFormPredictive.tsx)       | A fully customizable form component configured to make form `GET` requests to the `/search` route.                                                    |
+| [`app/components/SearchFormPredictive.tsx`](../../app/components/SearchFormPredictive.tsx)       | A fully customizable form component configured to make form `GET` requests to the `/search` route.                                                     |
 | [`app/components/SearchResultsPredictive.tsx`](../../app/components/SearchResultsPredictive.tsx) | A fully customizable search results wrapper, that provides compound components to render `articles`, `pages`, `products`, `collections` and `queries`. |
 
 ## Instructions
@@ -217,10 +217,10 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const isPredictive = url.searchParams.has('predictive');
 
   if (!isPredictive) {
-    return {}
+    return {};
   }
 
-  const searchPromise = predictiveSearch({request, context})
+  const searchPromise = predictiveSearch({request, context});
 
   searchPromise.catch((error: Error) => {
     console.error(error);
diff --git a/templates/skeleton/guides/search/search.md b/templates/skeleton/guides/search/search.md
@@ -212,7 +212,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const isRegular = !url.searchParams.has('predictive');
 
   if (!isRegular) {
-    return {}
+    return {};
   }
 
   const searchPromise = regularSearch({request, context});
diff --git a/templates/skeleton/package.json b/templates/skeleton/package.json
@@ -34,7 +34,7 @@
     "@shopify/hydrogen-codegen": "workspace:*",
     "@shopify/mini-oxygen": "workspace:*",
     "@shopify/oxygen-workers-types": "^4.1.6",
-    "@shopify/prettier-config": "^1.1.2",
+    "@shopify/prettier-config": "catalog:",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/eslint": "^9.6.1",
     "@types/react": "catalog:",
