Not compatible with typescript-eslint #811
Comments
|
https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error "parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
} |
|
Naturally, I tried that, but it completely overrides the |
|
both plugins applies default parser, vue parser has option to set up additional parser in parserOptions you can keep plugins but you have to specify both parsers (override what plugins are setting) i' using this in few projects and its working fine. |
|
I don't know what to tell you man, it's definitely not working fine for me. Does anything else in my eslintrc stick out to you? |
module.exports = {
root: true,
+ parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
},
env: {
browser: true,
},
extends: [
+ "plugin:@typescript-eslint/recommended",
"plugin:vue/recommended",
"@vue/prettier",
"plugin:prettier/recommended",
"@vue/typescript",
- "plugin:@typescript-eslint/recommended",
],
// required to lint *.vue files
plugins: [
"vue",
"@typescript-eslint"
],
// add your custom rules here
rules: {
// allow async-await
"generator-star-spacing": "off",
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
}
} |
|
@vue/typescript sets parsers, as far as i remmember order of configs in your case is important, and you can remove i added fix for it there vuejs/vue-cli@189ea54 let me know if this helped |
|
Still doesn't work, .ts files aren't parsed: module.exports = {
root: true,
env: {
browser: true,
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:vue/recommended",
"@vue/prettier",
"@vue/typescript",
"plugin:prettier/recommended",
],
// required to lint *.vue files
plugins: [
"vue",
"@typescript-eslint"
],
// add your custom rules here
rules: {
// allow async-await
"generator-star-spacing": "off",
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
}
} |
|
errors are gone?
you should try running eslint with --ext set eslint ./src/ --ext .vue,.js,.ts |
|
Hmm I think we're getting somewhere, I'll have to come back to this later today |
|
Ok so I can't specify it with I can simplify my config down to just this: module.exports = {
root: true,
env: {
browser: true,
},
extends: [
"plugin:@typescript-eslint/recommended",
"@vue/typescript",
"plugin:vue/essential"
],
plugins: [
"vue",
"@typescript-eslint"
]
}If I remove any of the However, I don't get .ts file linting. If I move |
|
you need ext, what IDE you are using? in vscode it should work, in Intelij Idea / Webstorm -> you should add in atom its working with no issues |
|
you can also try to use overrides and enable and change parser for ts files {
....
"overrides": [
{
"files": [
"*.ts"
],
"parser": "@typescript-eslint/parser"
}
]
} |
|
I am using IntelliJ EAP. But I'll try the override+parser idea. |
|
I get pretty close with an override: module.exports = {
root: true,
env: {
browser: true,
},
extends: [
"plugin:@typescript-eslint/recommended",
"@vue/typescript",
"plugin:vue/essential"
],
plugins: [
"vue",
"@typescript-eslint"
],
overrides: {
files: ["*.ts"],
parser: "@typescript-eslint/parser"
}
}But then I start getting the |
|
Here's how I ended up resolving this problem: First, I put all my Vue components in one directory, separate from everything else. Then, I was able to make two separate I put this one in the root of the project: module.exports = {
root: true,
env: {
browser: true,
},
parserOptions: {
project: './tsconfig.json',
},
extends: [
'airbnb-base',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
'prettier',
'prettier/@typescript-eslint',
],
plugins: ['@typescript-eslint', 'prettier'],
rules: {
// allow async-await
'generator-star-spacing': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js',
},
},
},
};...and I put this one in the Vue module.exports = {
extends: ['plugin:vue/recommended', '@vue/typescript', 'prettier/vue'],
plugins: ['vue', 'prettier'],
};and voila, problem solved. Not the most optimal solution, but it works well. |
|
@forresthopkinsa, the following ESLint configuration does work for me (linting module.exports = {
root: true,
env: {
node: true
},
extends: [
'prettier',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
'plugin:vue/recommended',
'@vue/prettier',
'@vue/typescript'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}; |
|
@forresthopkinsa, the following ESLint configuration does work for me (linting *.ts as well as *.vue): I followed your instruction, but it is still that *.vue but *.ts can be eslinted. @armano2 |
|
@@forresthopkinsa @@armano2 module.exports = {
extends: [
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
'plugin:vue/base',
'prettier',
'prettier/vue',
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2018,
sourceType: 'module',
},
}; |
I move |
* added correct config files: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md https://github.com/typescript-eslint/typescript-eslint/tree/master/docs/getting-started/linting https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md vuejs/eslint-plugin-vue#811 https://eslint.vuejs.org/user-guide/#faq https://stackoverflow.com/questions/49129296/vue-js-eslint-parsing-error-unexpected-token * some fixes of the src/* files after running eslint
* added correct config files: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md https://github.com/typescript-eslint/typescript-eslint/tree/master/docs/getting-started/linting https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md vuejs/eslint-plugin-vue#811 https://eslint.vuejs.org/user-guide/#faq https://stackoverflow.com/questions/49129296/vue-js-eslint-parsing-error-unexpected-token * some fixes of the src/* files after running eslint
Tell us about your environment
Please show your full configuration:
What did you do?
Added
typescript-eslintplugin so that I could get linting support for non-vue .ts filesWhat did you expect to happen?
Expected Vue files to still be linted as usual, but now with .ts files also being linted
What actually happened?
And the erroneous Vue lint errors go away as soon as I remove
"plugin:@typescript-eslint/recommended"from theextendsblock. Of course, if I do that, then I lose linting support for my .ts files.Here is my package.json.
The text was updated successfully, but these errors were encountered: