VS Code如何实现新建.style.ts后缀文件时自动插入预设模板代码

完全可以实现，两种常用方案按需选择即可：

方案一：原生功能实现，无需安装第三方插件 #

直接用VS Code自带的用户代码片段功能就能满足需求，操作步骤：

• 按快捷键Ctrl+Shift+P（macOS设备替换为Cmd+Shift+P）唤起命令面板，输入配置用户代码片段后选中对应选项
• 在弹出的选择列表中，若需要配置对所有打开的项目生效，选择新建全局代码片段文件；若仅需要在当前项目内生效，选择对应工作区的片段选项即可。给片段文件起个易识别的名字，比如style-ts-init，按回车确认。
• VS Code会自动打开新建的片段配置JSON文件，将文件内默认的注释内容全部替换为以下配置后保存：

{
  ".style.ts文件初始化模板": {
    "prefix": "styleinit",
    "body": [
      "/* disable eslint default export code */",
      "import style from 'styled-components'",
      "//some more code.",
      "$0"
    ],
    "description": "styled-components样式文件初始模板",
    "scope": "typescript"
  }
}

• 补充文件关联配置：打开VS Code设置页，搜索files.associations，新增一条匹配规则：键填写*.style.ts，值填写typescript，保存设置即可。
• 后续新建.style.ts后缀的文件后，直接输入styleinit按下回车，预设的所有模板代码就会自动插入，光标会自动定位到最后一行，可以直接开始写后续业务代码。

*小提示：你给出的示例代码中第一行eslint注释没有闭合标记，上面配置里已经补上了*/，如果不补的话后续所有import代码都会被注释，会直接触发语法报错。

方案二：新建即自动填充，无需手动触发 #

如果不想每次输入触发词，想要创建.style.ts文件的瞬间就自动写入预设内容，可以用轻量的文件模板类插件实现：

• 在VS Code插件市场搜索文件模板类插件安装即可，这类插件普遍体积极小，不会占用过多运行资源。
• 进入插件的模板管理页面，新建一个绑定.style.ts后缀的模板，将你需要的固定代码粘贴到模板内容区保存。
• 后续通过插件的新建文件入口选择对应.style.ts模板创建文件，文件打开时就已经自动填充好所有预设内容，不需要额外操作。

内容的提问来源于stack exchange，提问作者Alwaysblue