Skip to content

Custom File Extension Configuration

Jump to bottom
Nathan Totten edited this page Jun 15, 2020 · 2 revisions

Like Prettier itself, the VS Code extension supports Configuration Overrides. One of the main uses for this is to register a file extension to use a parser. When running the prettier CLI a configuration like the following would work to register a file type of .abc to use the 'HTML' parser.

{
  "overrides": [
    {
      "files": ["*.abc"],
      "options": {
        "parser": "html"
      }
    }
  ]
}

This will work sometimes in the VS Code extension, but the big caveat here is that VS Code must also have the language registered as a type that Prettier has registered to. Put another way, if VS Code has the file *.abc registered as the 'HTML' language, then the configuration above will work and both the CLI and VS Code will format the file as expected. However, if the language is registered as something else in VS Code like my-custom-language, the VS Code extension will not format this document.

File Associations

There are several ways to solve this. The first, works if the file extension doesn't have a language type associated with it. To tell VS Code that the file extension is a particular language you can set the files.associations setting. For example, placing the following in your .vscode/settings.json file would tell VS Code that *.abc files are HTML.

"files.associations": {
    "*.abc": "html"
}

Custom Language Identifier

The second option applies to languages that do have a custom language identifier. For example, if you have an extension installed that registers *.abc as my-custom-language. In this case, you don't want to change the VS Code language identifier because then your extension wouldn't do whatever it does (i.e. syntax highlighting, etc.).

To get these file types working, you need to send a pull request to either prettier or the prettier plugin to register additional vscodeLanguageIds for the particular parser. You can find an example of what that pull request looks like here.

This is the configuration example of the XML plugin:

{
  name: "XML",
  parsers: ["xml"],
  extensions: [".dita", ".ditamap", ".ditaval", ".svg", ".xml", ".xsd"],
  // Add new languages here
  vscodeLanguageIds: ["xml"]
}

Here are links to the files that you need to send PRs against.

Clone this wiki locally