Question

我创建了一个片段来快速启动像这样的纯React组件：

     {"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",

否则，有一种很好的方法。您将需要一个宏扩展名，例如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片段：还如何设置文件类型？

1 个答案: