我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

前端各种框架层出不穷,各种模版引擎也是一个接着一个。每个新的页面模版引擎,都会有自己的自定义模版文件后缀。比如,本文中涉及的例子,是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的更多实用技巧,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

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

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