Autofix does not work on .vue files #185

mysticatea · 2016-12-15T11:27:05Z

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.

The text was updated successfully, but these errors were encountered:

dbaeumer · 2016-12-15T11:30:43Z

This is because of BenoitZugmeyer/eslint-plugin-html#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 · 2016-12-15T15:14:59Z

@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 · 2016-12-16T09:51:38Z

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 · 2016-12-16T09:56:28Z

Oh, I had not aware of that. Thank you for pointing it out!
I will fix it.

mysticatea · 2016-12-16T10:07:28Z

Hmm, actually, I could not reproduce it with eslint --fix command... 🤔

dbaeumer · 2016-12-16T11:01:36Z

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 } ]

mysticatea · 2016-12-16T11:05:01Z

Thank you so much!

dbaeumer · 2016-12-16T11:09:57Z

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 · 2016-12-16T13:40:23Z

@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 · 2016-12-16T13:56:57Z

@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 BenoitZugmeyer/eslint-plugin-html#38

dbaeumer · 2016-12-16T13:58:22Z

@mysticatea I can't reproduce it with an simple example either:

Will investigatre further.

dbaeumer · 2016-12-16T14:03:41Z

It does reproduce with this example

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<html>
  <script>
    function foo() {
    }
    foo();;
  </script>
</html>

dbaeumer · 2016-12-16T14:12:16Z

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 · 2016-12-16T14:20:50Z

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 · 2016-12-16T14:22:21Z

Minimal case:

<script>

foo();;
</script>

dbaeumer · 2016-12-16T14:30:56Z

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 · 2016-12-16T15:13:42Z

@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 · 2016-12-16T15:41:48Z

@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 · 2016-12-17T05:30:22Z

@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 · 2016-12-18T19:58:32Z

@aeschli would your HTMl parser help here?

mysticatea · 2016-12-18T20:59:19Z

Oh, sorry, that problem has solved in vuejs/vue-eslint-parser@c3150da.
I have published vue-eslint-parser 0.1.3.

dbaeumer · 2016-12-19T07:29:05Z

Great. Thanks a lot. Will give a test today.

dbaeumer · 2016-12-19T11:17:49Z

Verified that the problem is gone using vue-eslint-parser 0.1.4

congrady · 2016-12-19T11:44:29Z

@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 · 2016-12-19T12:25:30Z

@dbaeumer thank you very much!

@congrady please try removing plugins property.

congrady · 2016-12-19T12:35:56Z

Works like a charm! 👍 Thank you so much!

zzzgit · 2017-02-15T03:02:58Z

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

dbaeumer · 2017-02-15T07:28:41Z

@zzzgit you need to let the eslint extension know that it should autofix your file type. Some like described in comment #185 (comment)

zzzgit · 2017-02-15T15:32:48Z

thanks,it works

Asing1001 · 2017-06-12T16:28:37Z

I only add this to settings.json and it works :

"eslint.validate": [
        { "language": "vue", "autoFix": true },
        { "language": "html", "autoFix": true }
    ]

zp1112 · 2017-10-27T00:57:22Z

@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": {
      ...
  }
}

dbaeumer · 2017-10-27T08:22:50Z

@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.

mysticatea mentioned this issue Dec 16, 2016

\r\n makes confusing vue-eslint-parser vuejs/vue-eslint-parser#4

Closed

dbaeumer closed this as completed Dec 16, 2016

dbaeumer mentioned this issue Dec 19, 2016

Provided ESLint Auto fix information have incorrect positions BenoitZugmeyer/eslint-plugin-html#38

Closed

KNTH01 mentioned this issue Jul 14, 2017

[feature request] lint file with extension other than *.js #42

Closed

vscodebot bot locked and limited conversation to collaborators Nov 21, 2017

Autofix does not work on .vue files #185

Autofix does not work on .vue files #185

Comments

mysticatea commented Dec 15, 2016

dbaeumer commented Dec 15, 2016

Uh oh!

congrady commented Dec 15, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

mysticatea commented Dec 16, 2016

Uh oh!

mysticatea commented Dec 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

mysticatea commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

congrady commented Dec 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

dbaeumer commented Dec 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

congrady commented Dec 16, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbaeumer commented Dec 16, 2016

Uh oh!

mysticatea commented Dec 17, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbaeumer commented Dec 18, 2016

Uh oh!

mysticatea commented Dec 18, 2016

Uh oh!

dbaeumer commented Dec 19, 2016

Uh oh!

dbaeumer commented Dec 19, 2016

Uh oh!

congrady commented Dec 19, 2016

Uh oh!

mysticatea commented Dec 19, 2016

Uh oh!

congrady commented Dec 19, 2016

Uh oh!

zzzgit commented Feb 15, 2017

Uh oh!

dbaeumer commented Feb 15, 2017

Uh oh!

zzzgit commented Feb 15, 2017

Uh oh!

Asing1001 commented Jun 12, 2017

Uh oh!

zp1112 commented Oct 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbaeumer commented Oct 27, 2017

Uh oh!

mysticatea commented Dec 16, 2016 •

edited

Loading

congrady commented Dec 16, 2016 •

edited

Loading

dbaeumer commented Dec 16, 2016 •

edited

Loading

congrady commented Dec 16, 2016 •

edited

Loading

mysticatea commented Dec 17, 2016 •

edited

Loading

zp1112 commented Oct 27, 2017 •

edited

Loading