ESLint has encountered a parsing error due to an unexpected token ":" in the code

Hey there! I'm in the process of migrating my Vue3 project from JavaScript to TypeScript and I've encountered a problem:

https://i.sstatic.net/y5tG8.png

Below is a snippet of my code in a .vue file:

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

And here is an excerpt from my eslintrc.js file:

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

Answer №1

To enable typescript support in eslint, you must make some configurations since it is not supported by default. Begin by installing @typescript-eslint/parser and then proceed to install @typescript-eslint/eslint-plugin. After installing these packages, update your configuration like this-

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

Answer №2

The issue I encountered was due to mistakenly specifying the parser option as an array instead of a string:

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

Answer №3

If you happen to be working with a combination of JS and TS in your project, this configuration can come in handy

  overrides: [
     {
       files: ['*.vue'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
         parser: {
           // It's important to specify the appropriate parser for each language
           ts: '@typescript-eslint/parser',
           js: 'espree',
           typescript: '@typescript-eslint/parser'
         }
       }
     }
   ],

Answer №4

My issue arose while using node v12.22.9. Upgrading to v14.21.2 resolved the parsing error for me. To perform the upgrade/installation, you can utilize the following command:

nvm install v14.21.2 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tracking code execution in React, Enzyme, and Istanbul reveals uncovered functions running during tests

I have been working on testing a React component that involves 3 functions. The tests I've written for these functions pass successfully, but my code coverage report indicates only a 33% coverage. Here is the code snippet of the component: const AddW ...

Using import statement is mandatory when loading ES Module in TS Node: server/src/index.ts

Attempting to kickstart a TypeScript Node project, I've gone ahead and added some essential dependencies (TypeScript, ESLint, Mongoose, and GraphQL). However, upon executing the command: ts-node-dev --respawn --transpile-only src/index.ts An error me ...

Nuxt: How to Stop the app.template.html File from Being Regenerated

Currently, I am facing a challenge in customizing the app.template.html file where I need to add a trust seal in a specific area. Unfortunately, any edits I make are lost when I run the npm run dev command as the file gets re-created. Is there a way to p ...

The functionality to generate personalized worldwide timezone pipe is not functioning

I'm completely new to Angular and I've been working on creating a custom pipe for adjusting timezones. The idea is to allow users to select their preferred timezone and have the offset applied accordingly. To start, I created a file called timez ...

Troubleshooting Angular 2 Typescript: Component not displaying as expected

I am currently in the process of learning Angular 2. Despite encountering numerous error messages, I have successfully set up the routes and can now display the desired component. My next challenge is to incorporate a navbar component into my homepage comp ...

Using esri-loader in Nativescript applications

I'm currently facing an issue while trying to incorporate esri-loader into my Nativescript Vue application in order to display a basic map. The code snippet I am using is outlined below: <script> import * as esriLoader from 'esri-loader&ap ...

What measures can I take to ensure TypeScript transpiles prototype methods effectively?

Having some issues defining methods on a TypeScript class and then accessing them. Even though the methods are defined, it's giving an error that they don't exist. TypeScript: export class ColumnHeader extends JSONObject { // ... i ...

The NestJS server encounters an unhandled exception leading to a server

As a newcomer to Nest.js and in the process of building a REST API server with typeorm, I have encountered an issue related to async functions. If I forget to include the await keyword while using an async function, it may result in an exception like &apos ...

Simplified Method for Verifying Null and Undefined in Typescript

Hey there, I'm currently working on an Angular 11 project and I'm facing a challenge when it comes to checking for null and undefined values. In my scenario, I have three strings - equipmentId, roomId, and personnelId, as well as a boolean flag ...

Creating a custom Map type in TypeScript

I am exploring the concept of defining a Map type in Typescript using generics. Essentially, I want to create something similar to: EntityMap<U, V>, where U can only be either a string or a number This is what I have managed to come up with so far: ...

What is the recommended way of inserting new data into a table in vue.js?

Is it possible to update the table data whenever I want, even after initializing the Vue instances? I've attempted to use the following methods but the data is still not updating: ・$nextTick ・$set <script> var overall = new Vue({ ...

After implementing AXIOS, don't forget to refresh the static content in VUE

I'm encountering some issues with Vue.js: Currently, I have a list of elements that I'm iterating through using v-for in my script. This array is retrieved from Axios (API) in the created() lifecycle hook. Additionally, I have a static variable ...

Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Greetings! As a newcomer to typescript, I find myself with a query regarding the use of Theme in emotionJs. Here's the snippet of code that has been causing me some trouble: const GlobalStyle: React.FC = (props) => { const Theme = useTheme(); ...

What steps are involved in setting up a project using Vue 3 alongside Storybook and PrimeVue?

I am trying to utilize primevue components in my stories, but I am facing some challenges. Currently, I am working with the latest versions of storybook, primevue, vite, and vue, all while incorporating Typescript. Below is an example of a component I am ...

How can I remove specific items from a PrimeNG PickList?

Currently, I'm working on a page where updates are made using PrimeNG PickList. The initial state of the target list is not empty, but when selected items are moved from source to target list, they are not removed from the source list as expected. Fr ...

Children components are not re-rendered by React

I created a basic task manager, but I'm encountering issues when trying to manage all the data from a single point within the TaskManager component. Essentially, I have a TaskManager component that acts as the container for all the data. Within this ...

[ERROR] There was a problem encountered during the execution of the ionic-app-scripts subprocess

I encountered an error while running my Ionic project. Below is the error message: [ERROR] ionic-app-scripts has unexpectedly closed (exit code 1). The Ionic CLI will exit. Please check any output above for error details. ionic3-firebase-shopping-car ...

Creating a robust system for resetting passwords using the powerful combination of Django Rest Framework, Serializers, and Vue.js

I am currently in the process of implementing a reset password feature, but I am struggling to find comprehensive tutorials on how to do so using DRF and Vue.js. My approach involves utilizing serializers for data passing without incorporating HTML views. ...

Unable to locate the identifier 'Annotorious'

Currently utilizing NextJS with TypeScript The following script has been added: <Head><link href="/css/bindingbox.min.css" rel="stylesheet"></link><script async type="text/javascript" src="/scripts/an ...

The visibility of the button is dependent on refreshing the page with the F5

I'm currently experiencing an issue with my code. The backoffice button is not showing up when I log in as an admin, unless I refresh the page by pressing F5. useEffect(() => { // Ensure window.FB and window.FB.XFBML are defined before calling ...