CODEWITHSUNDEEP
typescriptvue.jseslintvuejs3
Emma Zn
Emma Zn

Reputation: 153

ESLint: Parsing error: Unexpected token :

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

enter image description here

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']
  }
}

Upvotes: 9

Views: 30988

Answers (4)

scosman
scosman

Reputation: 2585

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'
         }
       }
     }
   ],

Upvotes: 0

RHN CHN
RHN CHN

Reputation: 474

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']
    }
}

Upvotes: 11

Rob Pruzan
Rob Pruzan

Reputation: 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

Upvotes: -1

inafalcao
inafalcao

Reputation: 1452

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',
   },

Upvotes: 1

Related Questions