Git Product home page Git Product logo

vscode-liquid-snippets's Introduction

Shopify Liquid Template Snippets for VS Code

This extension for Visual Studio Code adds snippets for Shopify Liquid Template.

Visual Studio Marketplace link: https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets

Preview

Showcase

Prerequisite

  1. Install the latest Visual Studio Code

Dependencies

  1. Liquid Languages Support

Installation

  1. Launch Code
  2. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
  3. Type ext install vscode-liquid-snippets
  4. Reload Visual Studio Code

Emmet Enable

Go to user settings and add the following:

"emmet.includeLanguages": { "liquid": "html" },

Usage

Type part of a snippet, press enter, and the snippet unfolds.

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (OSX) to activate snippets from within the editor.

Comment Tag

comment- // whitespace stripped

Control Flow Tag

if
else
elsif
ifelse
unless
case
when
if-     // whitespace stripped
else-   // whitespace stripped
elsif-  // whitespace stripped
ifelse- // whitespace stripped
unless- // whitespace stripped
case-   // whitespace stripped
when-   // whitespace stripped

Iteration Tag

cycle
cyclegroup
for
limit       // For loops option
offset      // For loops option
reversed    // For loops option
break
continue
tablerow
cycle-      // whitespace stripped
cyclegroup- // whitespace stripped
for-        // whitespace stripped
continue-   // whitespace stripped
tablerow-   // whitespace stripped

Variable Tag

assign
increment
decrement
capture
assign-  // whitespace stripped
capture- // whitespace stripped

Theme Tag

include
includewith // Theme Tag {% include %} with parameters
render
renderwith // Theme Tag {% render %} with parameters
section
raw
layout
layoutnone
paginate
schema
stylesheet
stylesheet_scss

Schema Tag

_schema
_text
_textarea
_image_picker
_radio
_select
_checkbox
_range
_color
_font
_collections
_product
_blog
_page
_link_list
_url
_video
_richtext
_html
_article
_header
_paragraph
_blocks

Array Filter

join
first
last
concat
map
reverse
size
sort
uniq

HTML Filter

img_tag
img_tag_param // HTML Filter {% img_tag %} with parameters
script_tag
stylesheet_tag

Math Filter

abs
ceil
divided_by
floor
minus
plus
round
times
modulo

Money Filter

money
money_with_currency
money_without_trailing_zeros
money_without_currency

String Filter

append
camelcase
captialize
downcase
escape
handleize
md5
newline_to_br
pluralize
prepend
remove
remove_first
replace
replace_first
slice
slice_single // String Filter 'slice' with single parameter
split
strip
lstrip
rstrip
strip_html
strip_newlines
truncate
truncatewords
upcase
url_encode
url_escape
url_param_escape

URL Filter

asset_url
asset_img_url
img_url

Release

2.0.3

  • Fix wrong spacing in schema blocks

2.0.2

  • Fix missing colon in tag _color

2.0.1

  • Fix typo for color picker in schema

2.0.0

  • Add new schema tags: _schema, _text, _page, ...
  • BREAKING: remove hard/auto dependency of the extension

1.3.0

  • Add theme tags: render, renderwith

1.2.0

  • Add theme tags: schema, stylesheet, stylesheet_scss,

1.1.1

  • Update readme, step to enable Emmet

1.1.0

  • Add whitespaced comment tag

1.0.1

  • Add keep both tag for whitespace and non-whitespace control

1.0.0

  • Add whitespace control

License

MIT

vscode-liquid-snippets's People

Contributors

adrianocr avatar bertiful avatar killalau avatar panoply avatar petit-lutin avatar raymondsze avatar saurabhjdas786 avatar teoalmonte avatar tngan avatar tuanpham-dev avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

arumuganainar tngan raymondsze condad garrettjohnson bittola panoply davgit teoalmonte curiouscrusher hama joseph-sx seniormj2017 petit-lutin dan-cret-corebuild saurabhjdas786 tuanpham-dev plpepin haroldao thegreenanchor drewlonious shaytan777

vscode-liquid-snippets's Issues

Theme Check false positives when theme in a sub-directory

Hi,

I have my theme in a /theme directory in my repo, as I have other project related files I want to keep together, but outside of the theme files. But this is causing issues with false positives with the theme check side of things, such as it thinking templates are missing etc.

I can't see any way to configure it for this scenario, would it be possible to have this as a configurable option, or to auto detect?

Thanks,

Basic emmet html autocomplete does not work with this

How can I get the basic emmet autocomplete snippets to work with this, that are built into vs code? When I'm on an HTML Liquid template, I can no longer type "div.class-name + tab" for example. Liquid autocompletes are convenient but not at the cost of losing all html autocompletes.

VS Code showing potential issues in --verbose mode

This is the message

[16026:0711/215009.563394:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag if"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.563776:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag elsif"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.563805:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag if else"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.564088:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag unless"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.564356:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag case"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.564609:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag when"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.564923:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag for"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.565376:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag tablerow"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.565621:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag assign"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.565765:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag increment"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.565948:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag decrement"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.566151:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag capture"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.566284:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag include"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.566540:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag include with parameters"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.566656:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag raw"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.566993:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Tag paginate"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.567191:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter concat"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.567367:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter map"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.567487:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter sort"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.567699:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter img tag with parameters"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568019:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter append"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568209:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter pluralize"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568364:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter prepend"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568533:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter remove"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568704:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter remove first"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.568860:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter replace"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.569047:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter replace first"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[16026:0711/215009.569244:INFO:CONSOLE(28)] "[/Users/adriano/.vscode/extensions/killalau.vscode-liquid-snippets-0.2.6]: The "Filter slice single character"-snippet very likely confuses snippet-variables and snippet-placeholders. See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax for more details.", source: file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)

Cannot use liquid snippets

As per the instructions, I installed the Liquid Languages Support (Neil Ding). Then I installed Shopify Liquid Template Snippets. I also think I properly configured the user settings, searching for emmet and then selecting include languages.

I quit VSC and re-opened (also just tried a reload). I go into a previously saved or new and saved HTML file or Markdown file (not sure if Markdown is supported), and then typed "assign". I pressed enter and tab, but nothing occurs. According to the readme, I can also enable with command+space on the Mac, but that opens up Spotlight Search. I tried control+space, which is what I think the documentation means to require, but that does not result in showing liquid support.

I cannot seem to get up and running. Any help you can provide would be useful.

Thanks.

Drop external dependency of vscode-liquid

Liquid snippets has an external dependency on vscode-liquid. Is this really necessary? Do snippet extensions require external dependencies?

I have an extension which provides liquid syntax support but due to the external dependency this extension has on vscode-liquid users are unable to uninstall vscode-liquid when using vscode-liquid-snippets. This leads to duplicate support of liquid syntax with potential to create conflicting issues when users have both syntax extensions installed.

To combat this issue my extension for the time being uses a forked version of this project but this will lead to uninstalls of vscode-liquid-snippets which I would like to avoid because this project is great and my extension should not have to use a forked version just because of an external dependency.

Dropping vscode-liquid as an external dependency means other extensions that support liquid syntax variations won't run into issues or in my case not require forking.

Not able to view shortcuts

I have VS Code Version 1.8.1. I downloaded the extension directly from the editor, created an index.liquid and tried some shortcuts - can't get it to work 😢.

I've also tried removing all my plugins, resetting my settings (not that I think those would have an effect on the extension, but I tried nonetheless).

image

Can we get the new section schema tags please

I'm wondering if the new section schema tags can be added?

  • {% schema %}{% endschema %}
  • {% stylesheet %}{% endstylesheet %}
  • {% javascript %}{% endjavascript %}

Maybe also some larger code expansion on the {% schema %} tag where it expands with some default schema?

{% schema %}
{
   "name": "section",
   "settings": [],
   "blocks": [],
   "presets": [],
}
{% endschema %{

Schema tags won't work when Liquid by Νίκος is aslo enabled

I'm new to adding issues so I don't know if I can put this here. I just want to help the community

If you're also wondering why schema snippets don't work and are unaware (like I originally was) that, under the details tab of the Liquid extension by Νίκος it points out, quote: "If you're using the Liquid Language Support and/or the Shopify Liquid Template Snippets then it's highly recommended that you either uninstall or disable both of these before using this extension."

I disabled Liquid and then was able to use this extension, which depends on "Liquid Language Support " to be installed and enabled as well.

Snippets don't work within a schema tag

Hello!

After a recent update, the snippets stopped working for me.

I figured out that the snippets do work but just not within the {% schema %} tag.

Would you be able to fix this, please?

Many thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.