Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
                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
                Nov 23, 2021 at 16:23
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']
                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.
– RVA
                Sep 3, 2022 at 11:36
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',
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 
                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.
– Community
                Jan 25 at 19:41
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.