theme-check-common

Theme Check

A linter for Shopify Themes

Theme Check helps you follow best practices by analyzing the files inside your Shopify theme.

Theme Check is available to code editors that support the Language Server Protocol.

You may be interested by the sibling modules:

• @shopify/theme-check-common: (you are here) npm module to run checks on a Theme (runtime agnostic).
• @shopify/theme-check-node: npm module to run checks from a Node.js runtime.
• @shopify/theme-check-browser: npm module to run checks in a Browser.

Installation

CLI

Theme Check is integrated in the Shopify CLI.

shopify theme check

As a library

There are three libraries:

yarn add @shopify/theme-check-node
yarn add @shopify/theme-check-common
yarn add @shopify/theme-check-browser

Usage

This repo only contains the library over the functionality. The CLI is implemented in Shopify/cli.

For CLI usage documentation, refer to shopify.dev.

Node

The node version comes with batteries included. All you need is the root path of the theme.

// simple-cli.ts
import { check } from '@shopify/theme-check-node';

async function main() {
  const root = process.cwd();
  const offenses = await check(root);
  console.log(offenses);
}

main();

Browser

The browser version is a bit more complex, you need to provide your own implementation of all the dependency injections.

import { simpleCheck, recommended, ThemeData, Config, Dependencies } from '@shopify/theme-check-browser';

async function main() {
  const themeDesc = {
    'snippets/product-card.liquid': '{{ product | image_url | image_tag }}',
    'snippets/for-loop.liquid': '{% for variant in product.variants %}...{% endfor %}',
  };

  const config: Config = {
    checks: recommended,
    settings: {},
    root: '/',
  };

  const dependencies: Dependencies = {
    // ...
  };

  const offenses = await simpleCheck(themeDesc, config, dependencies);

  console.log(offenses);
}

main();

Contributing

See CONTRIBUTING.md.