前端各种框架层出不穷,各种模版引擎也是一个接着一个。每个新的页面模版引擎,都会有自己的自定义模版文件后缀。比如,本文中涉及的例子,是art-template模版引擎的模版文件的自定义后缀,.art

苏南大叔:以art-template为例,vscode 如何识别自定义后缀模版? - settings-associations-hero
以art-template为例,vscode 如何识别自定义后缀模版?(图5-1)

本文测试环境:macvscode@1.44.1。本文举例是识别art-template.art文件,其实这个道理都是通用的。识别别的自定义后缀,也是可以这么操作的。

设置关联associations

由于苏南大叔的测试环境是mac,所以,可以在菜单Preference里面的Settings子菜单里面。快捷键是花+,。这个在settings的搜索对话框里面,进行查找就可以了。

苏南大叔:以art-template为例,vscode 如何识别自定义后缀模版? - settings-associations
以art-template为例,vscode 如何识别自定义后缀模版?(图5-2)

根据提示,苏南大叔需要修改一个settings.json文件。点击链接就可以打开这个文件。在mac系统中,真实路径是:

~/Library/Application Support/Code/User/settings.json

修改settings.json

修改这个文件,增加下面的类似语句即可。

{
    "files.associations": {
        "*.art": "html"
    }
}

苏南大叔:以art-template为例,vscode 如何识别自定义后缀模版? - settings-associations-settings
以art-template为例,vscode 如何识别自定义后缀模版?(图5-3)

效果对比

下面的效果是更改配置文件前后,.art文件的效果对比:

苏南大叔:以art-template为例,vscode 如何识别自定义后缀模版? - settings-associations-before
以art-template为例,vscode 如何识别自定义后缀模版?(图5-4)

苏南大叔:以art-template为例,vscode 如何识别自定义后缀模版? - settings-associations-after
以art-template为例,vscode 如何识别自定义后缀模版?(图5-5)

相关链接

总结

vscode的更多实用技巧,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   vscode

本站的忠实读者小伙伴,正在阅读下面这些文章: