From 0fb44ba3f46cef0a35fbd1eb862808cd106287d0 Mon Sep 17 00:00:00 2001 From: Jonathan Flower Date: Tue, 15 Nov 2022 13:52:47 -0500 Subject: [PATCH] docs(website): help troubleshoot issues with multiple parsers (#5612) * Help troubleshoot issues with multiple parsers This might not be a perfect fit for the typescript-eslint docs, since this is specific to Vue. However, I expect the issue effects other custom parsers as well. Including multiple parsers like this is counter intuitive because it seems like a mistake to include two "parser"s. It would have been a huge help to me to have found this in the troubleshooting guide. more info: https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser devs running into this issue: https://github.com/vuejs/vue-eslint-parser/issues/45#issuecomment-988625895 https://stackoverflow.com/questions/66597732/eslint-vue-3-parsing-error-expected-eslint * fix typos * grouping vue related questions * Apply suggestions from code review * More syntax highlighting Co-authored-by: Josh Goldberg --- docs/linting/TROUBLESHOOTING.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/linting/TROUBLESHOOTING.md b/docs/linting/TROUBLESHOOTING.md index e477267c476..8c8319a1aaf 100644 --- a/docs/linting/TROUBLESHOOTING.md +++ b/docs/linting/TROUBLESHOOTING.md @@ -86,6 +86,21 @@ module.exports = { }; ``` +## I am running into errors when parsing TypeScript in my .vue files + +If you are running into issues parsing .vue files, it might be because parsers like [`vue-eslint-parser`](https://www.npmjs.com/package/vue-eslint-parser) are required to parse `.vue` files. In this case you can move `@typescript-eslint/parser` inside `parserOptions` and use `vue-eslint-parser` as the top level parser. + +```diff +- "parser": "@typescript-eslint/parser", ++ "parser": "vue-eslint-parser", + "parserOptions": { ++ "parser": "@typescript-eslint/parser", + "sourceType": "module" + } +``` + +The `parserOptions.parser` option can also specify an object to specify multiple parsers. See the [`vue-eslint-parser` usage guide](https://eslint.vuejs.org/user-guide/#usage) for more details. + ## One of my lint rules isn't working correctly on a pure JavaScript file This is to be expected - ESLint rules do not check file extensions on purpose, as it causes issues in environments that use non-standard extensions (for example, a `.vue` and a `.md` file can both contain TypeScript code to be linted).