What Is The Best Check Template For Shopify

Theme Check ✅ - A linter for Themes

Think RuboCop, or eslint, but for Shopify themes.

Theme Check is a command line tool that helps you follow Shopify Themes & Liquid all-time practices past analyzing the Liquid & JSON within your theme.

Theme Check is also bachelor inside some code editors.

Supported Checks

Theme Bank check currently checks for the following:

✅ Liquid syntax errors
✅ JSON syntax errors
✅ Missing snippet & section templates
✅ Unused {% assign ... %}
✅ Unused snippet templates
✅ Template length
✅ Deprecated tags
✅ Unknown tags
✅ Unknown filters
✅ Missing {{ content_for_* }} in theme.liquid
✅ Excessive nesting of snippets
✅ Missing or extra spaces inside {% ... %} and {{ ... }}
✅ Missing default locale file
✅ Unmatching translation keys in locale files
✅ Using unknown translation keys in {{ 'missing_key' | t }}
✅ Using several {% ... %} instead of {% liquid ... %}
✅ Undefined objects
✅ Deprecated filters
✅ Missing theme-bank check-enable comment

Also equally checks that prevent easy to spot performance problems:

✅ Use of parser-blocking JavaScript
✅ Use of non-Shopify domains for avails
✅ Missing width and tiptop attributes on img tags
✅ Too much JavaScript
✅ Too much CSS

For detailed descriptions and configuration options, take a look at the complete list.

With more to come up! Suggestions welcome (create an issue).

Requirements

Ruby 2.seven+

Installation

Theme Check is available through Homebrew or RubyGems.

Homebrew

You'll need to run brew tap starting time to add Shopify's third-party repositories to Homebrew.

mash tap shopify/shopify brew install theme-check

RubyGems

Usage

              theme-bank check /path/to/your/theme  # or from /path/to/your/theme theme-check

Run theme-cheque --assistance to become full usage.

Configuration

Add a .theme-bank check.yml file at the root of your theme to configure:

                              #                If your theme is not using the supported directory construction, provide the root path                              #                where to find the `templates/`, `sections/`, `snippets/` directories as they would                              #                be uploaded to Shopify.              root:              dist                              #                It is possible to extend theme-bank check with custom checks              require:   -              ./path/to/my_custom_check.rb              TemplateLength:                              #                Disable some checks              enabled:              fake                              #                Or configure options              max_length:              300                              #                Or ignore certain paths              ignore:     -              snippets/icon-*                              #                Or change the severity (error|suggestion|style)              severity:              suggestion                              #                Enable a custom bank check              MyCustomCheck              enabled:              true

See config/default.yml for available options & defaults.

Disable checks with comments

Utilize Liquid comments to disable and re-enable all checks for a section of your template:

              {% comment %}theme-check-disable{% endcomment %}              {%              assign              x              =              1              %}              {% comment %}theme-check-enable{% endcomment %}

Disable a specific check by including it in the comment:

              {% comment %}theme-check-disable UnusedAssign{% endcomment %}              {%              assign              x              =              one              %}              {% annotate %}theme-check-enable UnusedAssign{% endcomment %}

Disable multiple checks by including them as a comma-separated list:

              {% comment %}theme-check-disable UnusedAssign,SpaceInsideBraces{% endcomment %}              {%assign              10              =              1%}              {% comment %}theme-check-enable UnusedAssign,SpaceInsideBraces{% endcomment %}

Disable checks for the entire document by placing the comment on the first line:

              {% annotate %}theme-bank check-disable SpaceInsideBraces{% endcomment %}              {%assign              x              =              i%}

Exit Code and `--fail-level`

Apply the --neglect-level (default: fault) flag to configure the exit code of theme-check. Useful in CI scenarios.

Example:

              # Make CI fail on styles warnings, suggestions, and errors theme-check --fail-level style path_to_theme  # Make CI fail on suggestions, and errors theme-check --fail-level suggestion path_to_theme  # Make CI fail on errors theme-bank check path_to_theme

In that location are iii neglect levels:

error
suggestion
mode

Get out code meanings:

0: Success!
1: Your lawmaking doesn't pass the checks
2: In that location's a bug in theme-check

If you would like to change the severity of a bank check, you can practice then with the severity aspect. Example:

              DeprecateLazysizes:              enabled:              true              severity:              error

Linguistic communication Server Configurations

themeCheck.checkOnOpen (default: truthful) makes it so theme check runs on file open.
themeCheck.checkOnChange (default: truthful) makes information technology so theme check runs on file modify.
themeCheck.checkOnSave (default: true) makes it so theme check runs on file save.
themeCheck.onlySingleFileChecks (default: faux) makes it so we only bank check the opened files and disable "whole theme" checks (due east.g. UnusedSnippet, TranslationKeyExists)

⚠️ Annotation: Quickfixes only piece of work on a freshly checked file. If whatsoever of those configurations are turned off, you lot will need to rerun theme-check in order to utilise quickfixes.

In VS Code, these can be prepare direct in your settings.json.