sveltejs / eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.
MIT License
373 stars 43 forks source link

Simple Fix not being applied #14

Closed SteveALee closed 5 years ago

SteveALee commented 5 years ago

I'm using this with vscode and prettier with prettier.eslintIntegration=true and find a simple test fix is not gettting applied. The rule is being applied as vscode shows the red squiggle.

I've managed to reproduce this when using eslint from the command line.

I've tried the test code both in a .js fie and a .svelte file and it works fine in the .js but not the .svelte. What is strange is eslint debug says it's writing to the file and notepad++ says the file has been updated but the contents have not changed. The stdout is also odd

$ npx eslint --fix src/App.svelte                                                                                                                          
...\src\App.svelte 5:9  error  Expected '===' and instead saw '=='  eqeqeq                                                                                                    
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.

so the test code in questions is:

  // eslint-disable-next-line no-constant-condition
  if (3 == 4) {
    console.log("SS")
  }

With the standard rules === should be used rather than == and the rule is fixable if both expressions are the same literal type (and it works just fine in a js file)

I can publish a project on GitHub if required but here is my basic config

.eslintrc
{
  "extends": ["standard", "prettier", "prettier/standard"],
  "plugins": ["svelte3"]
}
package.json - dev deps
...
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-svelte3": "^1.2.2",
...
    "svelte": "^3.4.1"
SteveALee commented 5 years ago

oh and

.vscode/settings.json
...
 "files.associations": {
    "*.svelte": "html"
  },
  "eslint.validate": [
    "javascript",
    {
      "language": "html",
      "autoFix": true
    }
  ]
...
SteveALee commented 5 years ago

Looking at the index.js I'm a bit confused as it does not look like a processing plugin as defined in the eslint plugin docs.

Specifically there is no allowing of autofix. Yet in the VScode config docs enabling autofix is specified.

Conduitry commented 5 years ago

To answer your last comment, yeah this doesn't use the official pre/postprocessing API that ESLint provides, because that API doesn't let you use the values of any settings in your eslintrc or base which extensions get processed on anything dynamically after the plugin is first loaded. So I'm resorting to awful monkeypatching of the ESLint internals - which is what eslint-plugin-html is doing as well, and where I got the idea.

For this actual issue, it would help yes if you could throw all of your files into a gist or a repo. If you're able to reproduce this with the eslint CLI, there's no need to include any editor-specific stuff.

SteveALee commented 5 years ago

Ha, I just read the code and spotted the monkey business :). Now I know why!

I'll pop them on github asap. Aren't gist single file?

SteveALee commented 5 years ago

OK try this repo.

To see the issue run:

Conduitry commented 5 years ago

Can you try v1.2.3 please?

SteveALee commented 5 years ago

That works a treat from the CLI! Thank you.

In code the main.js is corrected as expected when saving the file but not the App.svelte file :( In both cases the manual fix accessed from the lightbulb icon works. It's just the fix on save using the Prettier-eslint integration that seems broken.

PS I have the 2 main svelte code extensions installed now but not 100% sure what they do and how they might interact with installed deps given the readmes.

Conduitry commented 5 years ago

I edited node_modules/eslint-plugin-svelte3/index.js to put in some console.logs and then saved some files while looking at the 'Prettier' output panel in VS Code, and, as far as I can tell, this plugin is not getting run at all by Prettier. I don't know what other configuration might be necessary for this. I don't currently see evidence of a further bug in eslint-plugin-svelte3.

SteveALee commented 5 years ago

I agree and will raise it there.

Eslint--fix should be called. My guess it's file extension specific as .css etc never get invoked.

Thanks for the quick fix

frederikhors commented 5 years ago

@SteveALee it is not clear to me: can we develop Svelte files today with VSCode with standard.js rules?

I'm using https://github.com/UnwrittenFun/svelte-vscode and I'm using this

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: "module"
  },
  env: {
    es6: true,
    browser: true
  },
  extends: "standard",
  plugins: ["svelte3"],
  overrides: [
    {
      files: "*.svelte",
      processor: "svelte3/svelte3"
    }
  ]
};

As you can see it doesn't work neither on .js files.

frederikhors commented 5 years ago

@SteveALee

Reproduction project: https://github.com/frederikhors/svelte3-vscode-eslint

I'm using extension https://github.com/UnwrittenFun/svelte-vscode in VS Code.

Using this in command line: npx eslint --fix .\src\* works good, it changes App.svelte and main.js as I want: following standard.js rules.

VS Code doesn't follow standard.js rules on format command (on saving also).

maxmilton commented 5 years ago

@frederikhors please don't post in a closed thread, especially with an unrelated issue. You've already openned https://github.com/sveltejs/eslint-plugin-svelte3/issues/25 so there's no need to cross post. Remember, Github issue are not a support forum.

frederikhors commented 5 years ago

@MaxMilton sorry.