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};",
            "[=11=]"
        ],
        "description": "Create a react pure component"
    }

这很好用。但我的问题是，每次我创建一个新组件时，我都需要 set/change 文件类型从 plaintext 到 javascriptreact，以查看颜色主题和其他自动完成功能。如果我使用了一些特定的片段，有没有办法设置任何空文件的文件类型？

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

Answer 1

更新：vscode v1.59 有这个预览功能：

"workbench.editor.untitled.experimentalLanguageDetection": true

如果我 copy/paste 您的代码，它会将其检测为 typescript 而不是 javascriptreact，所以这无济于事。当通过片段输入文本时，它也不会进行任何检测。这是一个预览功能，因此您可以就此提出新问题。

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

"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' })

但我认为不使用扩展程序就无法调用该命令。

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

VSCode snippet: How to set file type also?

visual-studio-code

vscode-snippets