Shopify 配置本地开发教程二，常用命令和 liquid 语言引起的异常问题处理

本人 兼职 shopify 开发工作，有需要的可以加我微信 abc939039210，备注 shopify

摘要

本篇是续 Shopify 配置本地开发教程 的知识扩展，主要讲 theme 命令的使用，及由于本地编辑器无法识别 liquid 语言而造成的异常问题的处理，如 scss 无法识别liquid语言而报错从而导致代码建议失效问题，html、js 如何与 liquid 共存问题。
总而言之，就是解决本地开发无法识别liquid语言的问题

一、theme get命令的使用

theme官网 也有为我们提供官方文档，但是 get 命令的使用并没有讲清楚，get命令也是我们讲经常使用的命令

1、从服务器请求更新所有文件

theme get

2、从服务器更新指定文件

// 更新 config目录 下的所有文件
theme get config/*
// 更新 config目录 下的 settings_data.json 文件*/
theme get config/settings_data.json

3、这里我补充一下一些经常用的命令

// 监视您的目录中的更改并将其上载到Shopify服务器
theme watch
// 在浏览器打开主题
theme open

二、安装 liquid 扩展插件

这里我只针对vscode编辑进行讲解，我比较喜欢用的编辑是vscode ，其他编辑器我没去了解
我们需要安装的插件有以下三个，以下三个插件是让我们的编辑器能够识别liquid语言，我这讲法也不准确，写这篇文章比较急，不想讲那么多

这些插件具体的功能我不做讲解，你们可以去看文档，我这里直接讲如何配置
在settings.json 中插入下方代码

// 关闭 html的 style 和 script 的代码验证 
"html.validate.scripts": false,
"html.validate.styles": false

可能你在使用过程中会出现意料之外的错误，你可以查看liquid插件的文档，进行相应的配置

三、处理 scss 无法识别 liquid 语言二而报错的问题

有些同僚在使用scss的过程中应该有发现，当scss代码出错时，会导致出现错误的代码行以下建议功能失效问题
废话不多说了，我直接上代码

/* SCSS 变量定义 ================ */
/** 
  注意！！！  
    由于在 scss 是无法识别 {{}} ，会抛出错误，从而影响我们下方代码的输入建议，
    所以这里我先将{{}}处理成为字符串，然后再用scss函数将其转换为正确的值
**/
// 颜色
$bdr_main_bg_color: unquote("{{ settings.bdr_main_bg_color }}");
$bdr_main_font_color: unquote("{{ settings.bdr_main_font_color }}");
$bdr_body_bg_color: unquote($string: "{{ settings.bdr_body_bg_color }}");
$bdr_body_font_color: unquote($string: "{{ settings.bdr_body_font_color }}");
// 字体
$bdr_main_font: unquote($string: '{{ settings.bdr_main_font.family }}');
$bdr_a_font: unquote($string: '{{ settings.bdr_a_font.family }}');

/* SCSS 变量定义 END ============ */

溜了溜了，有不懂的同僚在下方留言，或者有其他问题，也可以在下方留言，这篇写的比较急，没有写详细，后面再完善