Add prettier support

thomaskimura · thomaskimura · commit 18845d1f9d45 · 2024-10-30T13:45:00.000-04:00
- Update README with setup guide to use recommened vscode settings
- How to setup prettier
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,7 @@
-node_modules
-.DS_Store
+
+node_modules/
+snippets/styleguide__section.liquid
+snippets/styleguide__example.liquid
+sections/styleguide.liquid
+snippets/styleguide__row.liquid
+.DS_Store
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["@shopify/prettier-plugin-liquid", "prettier-plugin-tailwindcss"]
+}
diff --git a/.theme-check.yml b/.theme-check.yml
@@ -0,0 +1,93 @@
+extends: theme-check:recommended
+ignore:
+  - node_modules/**
+
+# AssetPreload:
+#   enabled: true
+#   severity: 1
+# CdnPreconnect:
+#   enabled: true
+#   severity: 0
+# ContentForHeaderModification:
+#   enabled: true
+#   severity: 0
+# DeprecateBgsizes:
+#   enabled: true
+#   severity: 1
+# DeprecateLazysizes:
+#   enabled: true
+#   severity: 1
+# DeprecatedFilter:
+#   enabled: true
+#   severity: 1
+# DeprecatedTag:
+#   enabled: true
+#   severity: 1
+# ImgWidthAndHeight:
+#   enabled: true
+#   severity: 0
+# JSONSyntaxError:
+#   enabled: true
+#   severity: 0
+# LiquidHTMLSyntaxError:
+#   enabled: true
+#   severity: 0
+# MatchingTranslations:
+#   enabled: true
+#   severity: 0
+# MissingAsset:
+#   enabled: true
+#   severity: 0
+# MissingTemplate:
+#   enabled: true
+#   severity: 0
+#   ignoreMissing: []
+# PaginationSize:
+#   enabled: true
+#   severity: 1
+#   minSize: 1
+#   maxSize: 50
+# ParserBlockingScript:
+#   enabled: true
+#   severity: 0
+# RemoteAsset:
+#   enabled: true
+#   severity: 1
+# RequiredLayoutThemeObject:
+#   enabled: true
+#   severity: 0
+# TranslationKeyExists:
+#   enabled: true
+#   severity: 0
+# UnclosedHTMLElement:
+#   enabled: true
+#   severity: 1
+# UndefinedObject:
+#   enabled: true
+#   severity: 1
+# UniqueStaticBlockId:
+#   enabled: true
+#   severity: 0
+# UnknownFilter:
+#   enabled: true
+#   severity: 0
+# UnusedAssign:
+#   enabled: true
+#   severity: 1
+# ValidHTMLTranslation:
+#   enabled: true
+#   severity: 1
+# ValidJSON:
+#   enabled: true
+#   severity: 0
+# ValidSchema:
+#   enabled: true
+#   severity: 0
+# ValidStaticBlockType:
+#   enabled: true
+#   severity: 0
+# VariableName:
+#   enabled: true
+#   severity: 1
+#   format: snake_case
+# 
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,16 @@
+{
+  "recommendations": [
+    "waderyan.gitblame",
+    "pranaygp.vscode-css-peek",
+    "dakara.dakara-foldplus",
+    "github.vscode-github-actions",
+    "github.vscode-pull-request-github",
+    "zignd.html-css-class-completion",
+    "neilding.language-liquid",
+    "esbenp.prettier-vscode",
+    "urbantrout.refactor-css",
+    "shopify.theme-check-vscode",
+    "killalau.vscode-liquid-snippets",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,28 @@
+{
+  "window.commandCenter": 1,
+  "editor.fontSize": 14,
+  "scm.inputFontSize": 14,
+  "debug.console.fontSize": 14,
+  "chat.editor.fontSize": 14,
+  "editor.wordWrap": "on",
+  "editor.minimap.enabled": true,
+  "editor.tabSize": 2,
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "": "",
+    "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .gitattributes, .shopifyignore, postcss.config.js, tailwind.config.js, tsconfig.json, vite.config.ts, .gitignore, .theme-check.yml, release-notes.md, next-env.d.ts, turbo.json, vercel.json, *config.cjs, .prettierrc"
+  },
+  "workbench.editor.enablePreview": false,
+  "editor.detectIndentation": false,
+  "cursor.cpp.disabledLanguages": [],
+  "cursor.chat.smoothStreaming": true,
+  "terminal.integrated.fontSize": 14,
+  "[liquid]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "diffEditor.ignoreTrimWhitespace": true,
+  "diffEditor.hideUnchangedRegions.enabled": true,
+  "diffEditor.renderSideBySide": false,
+  "editor.formatOnSave": true
+}
diff --git a/README.md b/README.md
@@ -12,25 +12,63 @@ This is a kit to help extend and customize the [Paper Shopify theme](https://the
 
 ---
 
+# Features
+
+Paper has a number of useful features that make it a developer friendly theme to work with out of the box.
+
+- **Fast and reliable**: From the very beginning, we've made sure Paper works fast and reliably by using the latest browser-supported features. Don't worry if you're still using an older browser, our progressive enhancement ensures you'll still have the best experience.
+- **Works with JavaScript disabled**: We want everyone to have access to your store, so we've minimized the use of JavaScript. Even if someone has disabled JavaScript, we've got you covered with excellent fallbacks for core functionality.
+- **Easily extendable**: We've built Paper with a modular approach, so it's super simple to extend and customize. We use Tailwind CSS to give you an easy approach to styling, and Alpine.js to add interactivity without weighing you down.
+- **Built-in styleguide**: Making site wide changes consistently is much easier now that you can preview all the theme components from a single page.
+- **Meets all standards for theme store**: Paper meets all the [requirements](https://shopify.dev/docs/themes/store/requirements) for the Shopify theme store.
+
+---
+
 # Getting started
 
 ### Requirements
 
-- [Paper](https://themes.shopify.com/themes/paper/styles/poster) installed on your Shopify account
+Make sure all dependencies have been installed before moving on:
+
 - [NPM](https://www.npmjs.com/package/npm) (6.0.0 or higher)
 - [Node.js](https://nodejs.org/en/download/) (16.0.0 or higher)
 - [Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install) (3.0.0 or higher)
 
 ### Installing
 
-1. Purchase Paper from the Shopify theme store and create a duplicate
+1. Purchase Space from the Shopify theme store and create a duplicate
 2. Clone this repo
-3. Replace `paper-theme.myshopify.com` in `package.json` with your Shopify store URL
+3. Replace `brickspacetestingstore.myshopify.com` in `package.json` with your Shopify store URL
 4. Run `npm install` to install dependencies
-5. Run `npm run pull` to download the your theme (be sure to select the theme that has Paper installed)
+5. Run `npm run pull` to download the your theme (be sure to select the theme that has Space installed)
 6. Run `npm run dev` to create a development preview
 7. Run `npm run build` to build production ready assets
 
+### Development enviroment
+
+Consider using recommened development envitorment for a consistent experience.
+
+- Use [Cursor](https://www.cursor.com/)
+- Install extensions from `.vscode/extensions.json`
+- Install recommended Cursor settings from `.vscode/settings.json`
+  - Open cursor settings by clicking `CMD + ,` then clicking Open Settings (JSON)
+  - Paste in the settings from `.vscode/settings.json`
+
+### Automatic code formatting
+
+Automatic code formatting should be enabled by default if you follow above steps.
+
+1. Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+2. Ensure `editor.formatOnSave` is enabled in Cursor settings. Your `settings.json` should include the following:
+
+```
+"[liquid]": {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+},
+ "editor.formatOnSave": true
+```
+
 ### Command refferance
 
 | Task Name       | Description             |
@@ -68,7 +106,7 @@ Section files follow a similar naming convention.
 ### Using Alpine.js
 
 - For debugging there are [Chrome](https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/alpinejs-devtools/?src=recommended) browser extensions available.
-- For an extensive list of Alpine resources take a look at this [repo](https://github.com/alpine-collective/awesome). 
+- For an extensive list of Alpine resources take a look at this [repo](https://github.com/alpine-collective/awesome).
 
 ---
 
@@ -77,9 +115,6 @@ Section files follow a similar naming convention.
 - [Discord community](https://discord.gg/4qdBFhmzCR)
 - [Twitter updates](https://twitter.com/brickspacelab)
 - [Our blog](https://brickspacelab.com/blogs/news)
-- [Paper docs](https://brickspacelab.notion.site/Paper-help-center-84ce6b9217574833a7d9b9f4053cb403)
-- [Paper changelog](https://brickspacelab.notion.site/Paper-changelog-cdfeea8101ae465f8880ac90ce22e951)
 - [Shopify Vite Plugin](https://shopify-vite.barrelny.com/)
 - [Alpine.js](https://alpinejs.dev/)
 - [Tailwind CSS](https://tailwindcss.com/)
-
diff --git a/package.json b/package.json
@@ -1,13 +1,10 @@
 {
   "name": "paper",
   "version": "7.6.0",
-  "description": "A feature rich and utilitarian Shopify theme",
   "scripts": {
     "dev": "npm-run-all --parallel vite_dev shopify_dev",
-    "dev_sync": "npm-run-all --parallel vite_dev shopify_dev_sync",
     "pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",
     "shopify_dev": "shopify theme dev --store brickspacetestingstore.myshopify.com",
-    "shopify_dev_sync": "shopify theme dev --theme-editor-sync --store brickspacetestingstore.myshopify.com",
     "vite_dev": "vite dev",
     "test": "vitest",
     "coverage": "vitest run --coverage",
@@ -21,17 +18,17 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@shopify/prettier-plugin-liquid": "^1.0.6",
+    "@shopify/prettier-plugin-liquid": "^1.5.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.20",
     "jsdom": "^21.1.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.47",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.1",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.6",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.13",
     "vite": "^4.2.0",
     "vite-plugin-shopify": "^2.0.2",
@@ -41,9 +38,10 @@
     "@alpinejs/focus": "^3.12.0",
     "@alpinejs/intersect": "^3.12.0",
     "@alpinejs/persist": "^3.12.0",
-    "@by-association-only/vite-plugin-shopify-clean": "^1.0.1",
     "alpinejs": "^3.12.0",
-    "import": "^0.0.6",
     "instant.page": "5.1.1"
+  },
+  "config": {
+    "store": "brickspacetestingstore.myshopify.com"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Auto detect text files and perform LF normalization`
	`2`	`+* text=auto`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "plugins": ["@shopify/prettier-plugin-liquid", "prettier-plugin-tailwindcss"]`
	`3`	`+}`