ESLint: Parsing error: Unexpected token :

Question

Hi everyone I am migrating my vue3 project from js to typescript, I run into this problem :

Here is my code in .vue file

<script setup lang="ts">
const toto = (msg: string) => {
  console.log(msg)
}
</script>

And here is my eslintrc.js

module.exports = {
  'env': {
    'browser': true,
    'es2021': true
  },
  'extends': [
    'eslint:recommended',
    'plugin:vue/vue3-essential'
  ],
  'parserOptions': {
    'ecmaVersion': 13,
    'sourceType': 'module'
  },
  'plugins': [
    'vue'
  ],
  'rules': {
    'vue/multi-word-component-names': 'off',
    'vue/object-curly-spacing': [2, 'always'],
    'vue/html-closing-bracket-spacing': [2, {
      'selfClosingTag': 'always'
    }],
    'vue/max-attributes-per-line': [2, {
      'singleline': {
        'max': 1
      },
      'multiline': {
        'max': 1
      }
    }],
    'semi': [2, 'never']
  }
}

"(and I wanna die), I am a newbie to typescript". Please edit your question to remove information not inherent to the question itself — Nik Vinter
– Nik Vinter, Commented Nov 23, 2021 at 14:58
It looks like your eslint is not set up for parsing typescript. There's some docs here on how to configure it: typescript-eslint.io/docs/linting/linting — Evert
– Evert, Commented Nov 23, 2021 at 16:23

RobW · Accepted Answer · 2023-03-23 19:51:14Z

12

You need to configure eslint to support typescript as eslint doesn't support it out of the box. First, you need to install @typescript-eslint/parser and then @typescript-eslint/eslint-plugin. Once you have installed these, update your config as follows-

module.exports = {
    'env': {
        'browser': true,
        'es2021': true,
        node: true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/vue3-essential'
    ],
    'parserOptions': {
        'ecmaVersion': 12,
        'sourceType': 'module',
        parser: '@typescript-eslint/parser'
    },
    'plugins': [
        'vue',
        '@typescript-eslint'
    ],
    'rules': {
        'vue/multi-word-component-names': 'off',
        'vue/object-curly-spacing': [2, 'always'],
        'vue/html-closing-bracket-spacing': [2, {
            'selfClosingTag': 'always'
        }],
        'vue/max-attributes-per-line': [2, {
            'singleline': {
                'max': 1
            },
            'multiline': {
                'max': 1
            }
        }],
        'semi': [2, 'never']
    }
}

edited Mar 23, 2023 at 19:51

RobW

10.7k7 gold badges43 silver badges40 bronze badges

answered Nov 23, 2021 at 20:17

RHN CHN

4844 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RVA Over a year ago

by doing as u said, i'm able to lint my vue file but not my *.ts file, I get an error like that : Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

inafalcao · Accepted Answer · 2022-10-19 10:06:26Z

1

In my case, the problem was that I was using the parser option as an array, instead of a string:

   parserOptions: {
-    parser: ['@typescript-eslint/parser'],
+    parser: '@typescript-eslint/parser',
   },

answered Oct 19, 2022 at 10:06

inafalcao

1,4522 gold badges13 silver badges26 bronze badges

Comments

scosman · Accepted Answer · 2024-01-23 14:27:12Z

0

If you use both JS and TS in a project, this config helps

  overrides: [
     {
       files: ['*.vue'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
         parser: {
           // Specify a parser for each lang.
           ts: '@typescript-eslint/parser',
           js: 'espree',
           typescript: '@typescript-eslint/parser'
         }
       }
     }
   ],

answered Jan 23, 2024 at 14:27

scosman

2,60323 silver badges41 bronze badges

Comments

Scala Enthusiast · Accepted Answer · 2025-05-22 09:35:01Z

0

So I was getting this same error for a big project which has an app and multiple libraries. In each library I have a small skeleton eslint.config.js file which pulls-in the common eslint.config.js file which is held at the root, alongside the /project folder.

The error went away when I noticed that I had an

ignores: ['**/*.spec.ts', '**/*.mock.ts'],

in the outer file at the project level, but I had commented it out at the library level. It probably didn't help either that I had a

files: ['**/*.ts'],

at both levels. Anyway, point being. If the error only happens in .spec.ts files. Have a look at simplifying any config files' ignores commands.

answered May 22 at 9:35

Scala Enthusiast

46711 silver badges21 bronze badges

Comments

Rob Pruzan · Accepted Answer · 2023-01-24 14:45:22Z

-1

I had this problem on node v12.22.9. By upgrading to v14.21.2, I no longer had the parsing error. You can upgrade/install with the command

nvm install v14.21.2

answered Jan 24, 2023 at 14:45

Rob Pruzan

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ESLint: Parsing error: Unexpected token :

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related