vscode and typescript template literal types

Question

I'm having some problem trying to use the literal types in vsCcode. Using the example from the docs,

you can see that eslint is complaining about the code. (Parsing error: Type expected.eslint)

I have typescript 4.3.5 installed (using the vscode typescript version) , with version 1.52 of vsCode.

I also have tried adding a .eslintrc.json file with the contents

{
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}

but nothing seems to remove the linting error

I have restarted vsCode, removed and reinstalled the eslint plugin

what else do I need to change / try ?

Answer 1

Your problem right now is that ESLint -which by default only understands JavaScript syntax- doesn't know how to parse TypeScript syntax.

From the comments thread, it seems you installed @typescript-eslint/eslint-plugin and @typescript-eslint/parser as dependencies. That's the right start! But ESLint needs to be told to use them.

Set these properties in your ESLint config:

module.exports = {
  // ...
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  // ...
};

The docs for this are located at https://typescript-eslint.io/getting-started. That page will walk you through configuring ESLint to be able to parse TypeScript code, and with good sets of rules for TypeScript projects.