1

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

     {"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如果我使用一些特定的片段，有没有办法设置任何空文件的文件类型？

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

4

1 回答 1

1

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

"workbench.editor.untitled.experimentalLanguageDetection": true

如果我复制/粘贴您的代码，它会检测到它，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' })

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

于 2019-01-17T07:49:11.400 回答