CODEWITHSUNDEEP
visual-studio-codevscode-snippets
Asim K T
Asim K T

Reputation: 18144

VSCode snippet: How to set file type also?

I created a snippet for quick starting a pure react component like this:

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

This works fine. But my problem is, I need to set/change the file type from plaintext to javascriptreact everytime I create a new component, to see the color theme and other autocompletes to work. Is there a way to set the filetype of any empty file if I used some particular snippet?

I understand snippets normally used to do small tasks where the file is already created. But I am using this snippets extensively now.

Upvotes: 1

Views: 627

Answers (1)

Mark
Mark

Reputation: 180875

Update: With vscode v1.59 there is this preview feature:

"workbench.editor.untitled.experimentalLanguageDetection": true

If I copy/paste your code it detects it as typescript and not javascriptreact so that doesn't help. Nor does it do any detection when the text is input via a snippet. It is a preview feature so you could make a new issue on this.

One thing you could do is set the default language mode for new files:

"files.defaultLanguage": "javascriptreact",

Otherwise there is a hacky way which works well. You will need a macro extension like multiCommand.

Here is your macro which goes in your settings:

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

There are 27 quickOpenNavigateNext's based on how far down in the language mode quick pick panel I have to scroll to get to javascriptreact. Your mileage may vary if you have added language modes to the defaults.

First that macro inserts the "new React Pure" snippet from your question.

Then bind that macro to some keychord and trigger that. It will create a new untitled file, set its language mode to "javascriptreact" and enter your react snippet ready for editing.

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

It is a bit of a pain but I don't know a way to programmatically provide input to the quickpick panel.

But I suppose an extension is really the way to go. There is this api that would be useful:

openTextDocument({ language: 'javascriptreact' })

but that command I do not believe can be invoked without using an extension.

Upvotes: 1

Related Questions