Thank you for your interest in contributing to theme-tools! Your contributions will help make this project better and more reliable. This document provides guidelines and instructions for setting up your development environment and contributing to the theme-tools repository.
- Setting Up Your Environment
- Setup for the VS Code Extension
- Setup for the Online Store
- Submitting a Pull Request
- Reporting Issues
- Code of Conduct
Before you can start contributing to theme-tools, you'll need to set up your development environment. Follow these steps to get started:
-
Clone the repository: Clone the theme-tools repository to your local machine by running the following command in your terminal:
git clone https://github.com/Shopify/theme-tools.git
-
Install dependencies: Navigate to the project directory and install the required dependencies by running:
cd theme-tools yarn
-
Build monorepo packages: Ensure that all packages can be buildable:
yarn build
-
Run tests: Ensure that all tests pass by running:
yarn test
-
Start developing: If you're developing changes to test against the vscode extension, all you need to do is add a breakpoint anywhere in a package used within the VS Code extension, hit
f5
in VS Code and your development instance of theme-check will automatically open.
It is strongly recommended that you use the spin constellation: theme-tools:online-store
as your development environment for this.
To set up the package links to online-store-web, within this repo root run: yarn admin:init
This process has a small gotcha: online-store-web needs to use the built assets from theme-tools. This means that hot-reload is off the table.
Once you've made some changes to your local theme-tools packages, to see those changes represented in online-store-web; within this repo root run: yarn admin:build
Run the following command to start a browser instance that runs @shopify/theme-language-server-browser
.
yarn playground
If ever you want to see how the VS Code extension or playground would behave before merging a PR to Shopify/theme-liquid-docs, you can do the following:
-
In a terminal, with VS Code closed, go to the Shopify/theme-liquid-docs directory.
# Shopifolk dev cd theme-liquid-docs # External cd /path/to/theme-liquid-docs
-
Export the root of that repository in the
SHOPIFY_TLD_ROOT
environment variableexport SHOPIFY_TLD_ROOT=$(pwd)
-
Go to the Shopify/theme-tools directory.
# Shopifolk dev cd theme-tools # External cd /path/to/theme-tools
-
Update the docs and start VS Code from that directory.
# update the docs theme-docs download # start vscode code .
-
(Repeat) You can repeat the
theme-docs download
command to have updated changes.theme-docs download
-
Proceed to debug the VS Code extension or playground as usual.
Once you've made changes to the codebase and are ready to submit a pull request (PR), follow these steps:
-
Commit your changes: Commit your changes with a descriptive commit message.
-
Push your changes: Push your changes to the theme-tools repository on GitHub.
-
Create a pull request: Go to the theme-tools repository and click on the "New Pull Request" button. Select the branch containing your changes as the head branch.
-
Describe your changes: Write a clear and concise description of the changes you made, the issue or feature request it addresses, and any additional information that may be helpful for reviewers.
-
Submit your pull request: Click the "Create Pull Request" button to submit your PR for review.
All developers who wish to contribute through code or issues, please first read our Code of Conduct.
If you encounter any issues or have suggestions for improvements, please feel free to report them by creating a new issue in the theme-tools repository. When reporting an issue, please follow these guidelines to help us better understand and address your concerns:
-
Check for existing issues: Before creating a new issue, please search the existing issues to see if someone has already reported the problem or made the same suggestion.
-
Choose the right issue template: When creating a new issue, select the appropriate issue template (if available) to provide the necessary information.
-
Provide a clear title: Write a concise and descriptive title that briefly summarizes the issue or suggestion.
-
Describe the issue in detail: In the issue description, provide as much relevant information as possible. Include steps to reproduce the issue, any error messages, the expected behavior, and the actual behavior. If applicable, include screenshots or screen recordings to help illustrate the problem.
-
Include your environment: Mention the version of theme-tools you are using, as well as any relevant information about your operating system, Node.js version, and browser (if applicable).
By following these guidelines, you'll help us better understand the issue and address it more effectively. We appreciate your feedback and contributions!