Closed mysticatea closed 7 years ago
dbaeumer
commented
7 years ago 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.
congrady
commented
7 years ago @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!
dbaeumer
commented
7 years ago 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.
mysticatea
commented
7 years ago Oh, I had not aware of that. Thank you for pointing it out! I will fix it.
mysticatea
commented
7 years ago Hmm, actually, I could not reproduce it with eslint --fix command... :thinking:
dbaeumer
commented
7 years ago 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!
dbaeumer
commented
7 years ago 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.
congrady
commented
7 years ago @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:
dbaeumer
commented
7 years ago @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
commented
7 years ago @mysticatea I can't reproduce it with an simple example either:
Will investigatre further.
dbaeumer
commented
7 years ago 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
commented
7 years ago 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
commented
7 years ago 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.
congrady
commented
7 years ago @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
dbaeumer
commented
7 years ago @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.
mysticatea
commented
7 years ago @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...
dbaeumer
commented
7 years ago @aeschli would your HTMl parser help here?
mysticatea
commented
7 years ago 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.
dbaeumer
commented
7 years ago Great. Thanks a lot. Will give a test today.
dbaeumer
commented
7 years ago Verified that the problem is gone using vue-eslint-parser 0.1.4
congrady
commented
7 years ago @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.
mysticatea
commented
7 years ago @dbaeumer thank you very much!
@congrady please try removing plugins property.
congrady
commented
7 years ago Works like a charm! 👍 Thank you so much!
zzzgit
commented
7 years ago "parser": "vue-eslint-parser" into .eslintrc"vue" to "eslint.validate" for the editor's setting"plugins":["vue"] into.eslintrcbesides 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
dbaeumer
commented
7 years ago @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
zzzgit
commented
7 years ago thanks,it works
Asing1001
commented
7 years ago I only add this to settings.json and it works :
"eslint.validate": [
{ "language": "vue", "autoFix": true },
{ "language": "html", "autoFix": true }
]
zp1112
commented
7 years ago @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": {
...
}
}@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.
I'm using ESLint with vue-eslint-parser then I enabled
vscode-eslintfor.vuefiles.vue-eslint-parsersupports autofix for.vuefiles. Buteslint.autoFixOnSaveoption andeslint.executeAutofixcommand did not work on.vuefiles.