VSCode片段：如何设置文件类型？

Question

我创建了一个片段，用于快速启动纯反应组件，如下所示：

     {"new React Pure": {
        "prefix": "reactpure",
        "body": [
            "import React from 'react';",
            "import PropTypes from 'prop-types';",
            "import './${1:ComponentName}.module.css';",
            "const ${1:ComponentName} = ({ ${2:propValue=[] } }) => (",
            "<${3:rootelement}>${4:content}</${3:rootelement}>",
            ")",
            "${1:ComponentName}.propTypes = {",
            "${5:propValue}: PropTypes.string",
            "};",
            "export default ${1:ComponentName};",
            "$0"
        ],
        "description": "Create a react pure component"
    }

这很好用。但我的问题是，我需要在每次创建新组件时将文件类型从plaintext设置/更改为javascriptreact，以查看颜色主题和其他自动填充功能。如果我使用某个特定的片段，有没有办法设置任何空文件的文件类型？

我理解通常用于执行文件已创建的小任务的片段。但是我现在广泛使用这个片段。

Answer 1

您可以做的一件事是为新文件设置默认语言模式：

"files.defaultLanguage": "javascriptreact",

否则就会有一种运作良好的hacky方式。你需要像multiCommand这样的宏扩展。

以下是您的设置中的宏：

{
  "command": "multiCommand.languageMode",
  "sequence": [

    // make a new untitled file - you may or may not want this
    "workbench.action.files.newUntitledFile",
    {
      "command": "editor.action.insertSnippet",
      "args": {
        "name": "new React Pure"
      }
    },
    "workbench.action.editor.changeLanguageMode",

    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",
    "workbench.action.quickOpenNavigateNext",

    "workbench.action.acceptSelectedQuickOpenItem"
  ]
},

有27个quickOpenNavigateNext基于语言模式快速选择面板我需要滚动到达javascriptreact多远。如果您已将语言模式添加到默认值，则里程可能会有所不同。

首先，宏从您的问题中插入"new React Pure"片段。

然后将该宏绑定到某个键盘并触发它。它将创建一个新的无标题文件，将其语言模式设置为"javascriptreact"并输入您的反应片段以备编辑。

{
    "key": "ctrl+shift+/",
    "command": "multiCommand.languageMode",
},

这有点痛苦，但我不知道以编程方式为快速选取面板提供输入的方法。

但我认为扩展真的是要走的路。这个api会很有用：

openTextDocument({ language: 'javascriptreact' })

但是我不相信的命令可以在不使用扩展名的情况下调用。