Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linting TSX in Vue SFC file throw error #176

Open
4 tasks done
Cat1007 opened this issue Dec 30, 2022 · 6 comments
Open
4 tasks done

Linting TSX in Vue SFC file throw error #176

Cat1007 opened this issue Dec 30, 2022 · 6 comments

Comments

@Cat1007
Copy link

Cat1007 commented Dec 30, 2022

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I'm using eslint-plugin-vue.
  • I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.22.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

What did you do?

Configuration
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
  ],
  plugins: ["vue", "@typescript-eslint"],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser:"@typescript-eslint/parser" ,
    extraFileExtensions: [".vue"],
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
    ecmaVersion: 2020,
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    "vue/no-unused-components": 1,
  },
  overrides: [
    {
      files: ["*.ts", "*.tsx", "*.vue"],
      rules: {
        "@typescript-eslint/no-unused-vars": [1, { args: "none" }],
        "vue/multi-word-component-names": 0,
      },
    },
  ],
};
<script setup lang="tsx">
import TestComp from "./TestComp.vue";
const testFunc = () => {
  return <TestComp test={1}></TestComp>;
};
</script>

What did you expect to happen?

no error

What actually happened?

throw Error Parsing error: '>' expected.eslint
image

when I use single .tsx file these has no error

Link to Minimal Reproducible Example

https://github.com/Cat1007/parseErrorDemo

see src/HasErrorComp.vue

Additional comments

No response

@laterdayi
Copy link

same question

@DrJume
Copy link

DrJume commented Nov 6, 2023

It seems to be always interpreted as false, if parserOptions.project is provided:
https://typescript-eslint.io/packages/parser/#jsx:~:text=If%20parserOptions.project%20is%20provided,as%20if%20this%20is%20false

@FrankFang
Copy link

Any idea?

@cumt-robin
Copy link

Any idea?

这么巧,还有一小时前的,今天也遇到这个问题了

@wmelton
Copy link

wmelton commented Feb 27, 2024

This fixed the issue for me:

Eslint:

"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser"
},

@aolyang
Copy link

aolyang commented Sep 27, 2024

Starting in Vue 3.4, Vue no longer implicitly registers the global JSX namespace. To instruct TypeScript to use Vue's JSX type definitions

in your tsconfig.json

{
    "compilerOptions": {
        "jsx": "preserve",
        "jsxImportSource": "vue"
    }
}

Probably I think, Weather you are using Typescript (Typescript support compile js/jsx too), if you are using @typescript-eslint/parser, you can enable ecmaFeatures.jsx = true for a common fix.

// vue eslint config, this is eslint 9 flat config
const eslint9FlatConfig = [
    {
        files: ["*.vue", "**/*.vue"],
        languageOptions: {
            parser: "vue-eslint-parser",
            parserOptions: {
                parser: "@typescript-eslint/parser",
                sourceType: "module",
                ecmaFeatures: {
                    jsx: true
                }
            }
        }
    }
]

And this works for me, also in single repo and monorepo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants