Vscode-eslint: Autofix does not work on .vue files
I'm using ESLint with vue-eslint-parser then I enabled vscode-eslint for .vue files.
vue-eslint-parser supports autofix for .vue files. But eslint.autoFixOnSave option and eslint.executeAutofix command did not work on .vue files.
mysticatea
All 32 comments
This is because of https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/38. I took a defensive approach here to ensure that this doesn't break code especially when enable during save. I will update the readme to make this more clear.
I am still debating whether I should provide different options for different file types.
dbaeumer
on 15 Dec 2016
@dbaeumer Any estimated time on this?
Sacrificing autofix when migrating from React to Vue.js is a huge issue for me and my team.
Anyway, great job with the plugin! Thanks for the good work!
congrady
on 15 Dec 2016
I am working on making this a configuration. However as long as the plugins are not fixing this I can't do much. The vue-eslint-parser is showing the same problem. That auto fix positions are of therefore applying them results in incorrect textual changes:
@mysticatea are you aware of this. I tested this with the vue-eslint-parser plugin.
dbaeumer
on 16 Dec 2016
Oh, I had not aware of that. Thank you for pointing it out!
I will fix it.
mysticatea
on 16 Dec 2016
Hmm, actually, I could not reproduce it with eslint --fix command... :thinking:
mysticatea
on 16 Dec 2016
I published version 1.2.2 of the ESLint extension. It allows for selective autoFix configuration. From the readme:
Added configuration options to enable code actions and auto fix on save selectively per language. In release 1.2.1 code actions and auto fix on save very still only
available for JavaScript. In 1.2.2 you can now enable this selectively per language. For compatibility it is enabled by default for JavaScript and disabled by default for all
other languages. The reason is that I encounter cases for non JavaScript file types where the computed fixes had wrong positions resulting in 'broken' documents. To enable it simply
provide an object literal in the validate setting with the properties language and autoFix instead of a simple string. An example is:
"eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true } ]
Thank you so much!
mysticatea
on 16 Dec 2016
Hmm, actually, I could not reproduce it with eslint --fix command...
OK. Let me have a look then. I take the fixes directly from the reported problem.
dbaeumer
on 16 Dec 2016
@dbaeumer Thank a lot.
Still not working properly, having very similar issue that you encountered.
When I try to autofix my elsint issues, I get incorrect textual changes.
Instead of fixing doublequote issue, my tag got modified in a weird way:
congrady
on 16 Dec 2016
@congrady yes, this is why I made this an option and disabled by default. Which ESLint plugin are you using? eslint-pluing-html? If so please follow https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/38
dbaeumer
on 16 Dec 2016
@mysticatea I can't reproduce it with an simple example either:
Will investigatre further.
dbaeumer
on 16 Dec 2016
It does reproduce with this example
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<html>
<script>
function foo() {
}
foo();;
</script>
</html>
The reported problem looks like this:
And the range [117, 118] reported in the fix denotes "(" of "foo()".
The string content is
@mysticatea any idea why this is happening ?
dbaeumer
on 16 Dec 2016
An easier example is
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<html>
<script>
foo();;
</script>
</html>
The fix denotes position [91,92] in that string which is the ")" of foo()
dbaeumer
on 16 Dec 2016
Minimal case:
<script>
foo();;
</script>
OK. I found it. It is related to the line ending everything works correct if the line ending is Unix style \n and it is broken when the line ending is Windows style \r\n.
Since I pass the string with \r\n to ESlint I am expecting the fixes to be computed taking this into account. There is no problem with ESLint on JS files with this.
dbaeumer
on 16 Dec 2016
@dbaeumer Tried updating eslint-plugin-html to 'BenoitZugmeyer/eslint-plugin-html#v2'
Issue still persist (autofix doesn't fix the real problem, but instead does random stuff).
And I started getting this error everytime I edit my .vue file
congrady
on 16 Dec 2016
@congrady can you please open an issue against 'BenoitZugmeyer/eslint-plugin-html with steps to reproduce. There is little I can do to fix this.
dbaeumer
on 16 Dec 2016
@dbaeumer Oh, wow, thank you very very much for the investigation!!
I confirmed the bug of vue-eslint-parser with \r\n.
EDIT: parse5 HTML parser seems to remove \r...
mysticatea
on 17 Dec 2016
@aeschli would your HTMl parser help here?
dbaeumer
on 18 Dec 2016
Oh, sorry, that problem has solved in https://github.com/mysticatea/vue-eslint-parser/commit/c3150daeab65388d125d8887901751ed017d6d96.
I have published vue-eslint-parser 0.1.3.
mysticatea
on 18 Dec 2016
Great. Thanks a lot. Will give a test today.
dbaeumer
on 19 Dec 2016
Verified that the problem is gone using vue-eslint-parser 0.1.4
dbaeumer
on 19 Dec 2016
@dbaeumer Hello, could you please show me a working .eslintrc config file? For me it stil doesn't work, using this configuration:
Doesn't fix the right issue and some issues aren't even shown.
congrady
on 19 Dec 2016
@dbaeumer thank you very much!
@congrady please try removing plugins property.
mysticatea
on 19 Dec 2016
Works like a charm! 馃憤 Thank you so much!
congrady
on 19 Dec 2016
- add
"parser": "vue-eslint-parser"into.eslintrc - add
"vue"to"eslint.validate"for the editor's setting - add
"plugins":["vue"]into.eslintrc
besides the 3 steps,what else I have missed?
autofix still not works
and the linting behavior changed,less mistakes been shown after the 3 steps
zzzgit
on 15 Feb 2017
@zzzgit you need to let the eslint extension know that it should autofix your file type. Some like described in comment https://github.com/Microsoft/vscode-eslint/issues/185#issuecomment-267570350
dbaeumer
on 15 Feb 2017
thanks,it works
zzzgit
on 15 Feb 2017
I only add this to settings.json and it works :
"eslint.validate": [
{ "language": "vue", "autoFix": true },
{ "language": "html", "autoFix": true }
]
Asing1001
on 12 Jun 2017
@dbaeumer Still not working properly,When I try to autofix my elsint issues, I get incorrect textual changes.fix information have incorrect positions.This is my config
// 灏嗚缃斁鍏ユ鏂囦欢涓互瑕嗙洊榛樿璁剧疆
{
"editor.fontSize": 18,
"eslint.autoFixOnSave": true,
"files.associations": {
"*.vue": "vue"
},
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.shell.windows": "F:\\Git\\bin\\bash.exe",
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
},
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"telemetry.enableCrashReporter": true,
"workbench.colorTheme": "Material Palenight",
"editor.fontFamily": "Courier New",
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript"
],
"fileheader.Author": "candy",
"fileheader.LastModifiedBy": "candy"
}```
and i was also tried to include parser in my .eslintec.json but didn't work .
```js
{
"env": {
"node": true,
"es6": true,
"browser": true
},
"globals": {
"$": true
},
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": [
"html"
],
"rules": {
...
}
}
zp1112
on 27 Oct 2017
@zp112 can you please open a new issues with steps on how to reproduce your problem (best would be a GitHub repository I can clone). I quickly tested it and autofix does work for me in my simple setup.
dbaeumer
on 27 Oct 2017
Related issues
LinusU
路
7Comments
lstrzebinczyk
路
6Comments
MuhammadJamaluddin
路
4Comments
JonathanWolfe
路
3Comments
greggman
路
7Comments
Most helpful comment
I only add this to settings.json and it works :