构建自己的静态网站生成脚本（三）

上篇已经实现 Function 动态创建读入模版函数的模版引擎，但对 temp.js 的高灵活度组件化还是念念不忘，故这篇重新探索 temp.js 模版引擎的可能性。

template-string 最大的问题是没有 html 的编辑器代码支持，上网寻找解决方法，找到参考文章一篇：https://blog.csdn.net/coooookie/article/details/101447329

代码片段

代码片段可以快速生成一小段模版代码，提高编写体验，因最终方案我并没有采用此方案，故不讨论

VSCode 配置代码提示

进入 settings.json 配置文件，将下方 json 对象展开，追加至配置文件中：

json

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

作者提供了相关项的释义：

emmet.triggerExpansionOnTab：启用后，按下 TAB 键，将展开 Emmet 缩写
emmet.showAbbreviationSuggestions：将可能的 Emmet 缩写作为建议进行显示
emmet.showExpandedAbbreviation：将展开的 Emmet 缩写作为建议进行显示
emmet.includeLanguages：在默认不支持 Emmet 的语言中启用 Emmet 缩写功能。在此添加该语言与受支持的语言间的映射

插件

配置完 VSCode 之后 html-in-js 还是没有任何效果，不急。作者提到一个 VSCode 插件：comment-tagged-templates

安装之后，按照插件文档编写 html-in-js 时候需要在反引号前面加一个标志位注释，来帮助插件匹配高亮

const cssString = /* css */ `
    button {
        color: hotpink !important;
    }
`;

const htmlString = /* html */ `
    <button class="my-button">
        Click me!
    </button>
`;

到这里就拥有了 html-in-js 高亮、自动补全。但是还没有代码自动格式化，仔细阅读插件文档，找到了如下内容：

高级语言支持
如需 IntelliSense 和更高级的嵌入式语言支持，请查看以下扩展：
lit-html — Html 模板智能感知
vscode-styled-components — CSS 模板智能感知

前文提到过 lit.js 是有配套的 VSCode 插件的，提供 html-in-js 的代码高亮、提示补全相关功能，就是上方的 lit-html

把 comment-tagged-templates 替换为 lit-html

lit-html 同样需要识别标志位，那就是从 lit-html 中引入的 html 模版字符串标签函数

import { html } from "lit-html";

const a = html`<div></div>`;

这个方法返回一个 DOM 节点渲染函数，尝试在这里实现一个同名函数，模版字符串标签函数，传入一个模版字符串，其中的表达式会运行之后传入，同名函数只需要将接收到的原字符串拼接好返回就可以了，直接使用 String.raw() 方法：

const html = (raw, ...ars) => String.raw({ raw }, ...ars);
const html = String.raw;

配合 Prettier - Code formatter（需要修改默认格式化程序为 Prettier）即实现了 html-in-js 的代码高亮、自动补全、智能提示、自动代码格式化

小结

const html = String.raw;

const a = ($) => html` <div>a${$}</div> `;
const b = ($) => html` <div>b${$}</div> `;
const c = ($) => html` <div>c${b(`B${a(`A${$}`)}`)}</div> `;

console.log(c("C"));
//> <div>c <div>bB <div>aAC</div> </div> </div>

构建自己的静态网站生成脚本（三） ​

代码片段 ​

VSCode 配置代码提示 ​

插件 ​

小结 ​

构建自己的静态网站生成脚本（三）

代码片段

VSCode 配置代码提示

插件

小结