vs-code-prettier-eslint icon indicating copy to clipboard operation
vs-code-prettier-eslint copied to clipboard

mess with import sort && no logs to debug that

Open barsikus007 opened this issue 1 year ago • 16 comments

Describe the bug I have imports/order rule, but when I use Prettier ESLint extension instead of Prettier ESLint CLI, imports sorts in strange way (there are mounted folders in imports, but it works when I run format in cli)

To Reproduce When I run VS Code Prettier ESLint format action on save, it brokes my imports (pic.1): image If I run Prettier ESLint CLI command, it format imports as it should (pic.2): image I assume, that smth is not passed to eslint --fix when I call format action

I tried to rollback, but I got Error: Expected `input` to be a `string`, got `object` on 5.1

Expected behavior It should format imports like on pic.2

Screenshots If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

  • VS Code Prettier ESLint extension [6.0.0]
  • Visual Studio Code: [1.86.0]
  • Node: [20.11]
  • Package Manager [pnpm 8]
  • prettier: [3.2.4]
  • eslint: [8.37.0]

System Specifications (please complete the following information):

  • OS: [WSL Uwuntu 22.04]
  • Processor: [AMD R7 4800HS]
  • RAM Size: [WSL 20GB System 40GB]

barsikus007 avatar Feb 08 '24 06:02 barsikus007

@barsikus007 If you rollback to Prettier 2.0 as well as the extension, does it fix the issue?

idahogurl avatar Feb 08 '24 15:02 idahogurl

rollback to Prettier 2.0 as well as the extension

I rollbacked prettier to 2.8.8 and extension to 5.1.0 (then 5.0.3) and problem still exist

I rollbacked extension to 3.1.0 and I have Error: r is not a constructor in my logs

barsikus007 avatar Feb 08 '24 16:02 barsikus007

rollback to Prettier 2.0 as well as the extension

I rollbacked prettier to 2.8.8 and extension to 5.1.0 (then 5.0.3) and problem still exist

I rollbacked to 3.1.0 and I have Error: r is not a constructor in my logs

FYI, we had to upgrade eslint, prettier, prettier-eslint, eslint-config-prettier and this vscode extension in order for everything to behave as expected.

ozyx avatar Feb 08 '24 21:02 ozyx

@ozyx ooh, could you give versions of your tools? (cause I have latest 😅) ((except node, which is lts)

barsikus007 avatar Feb 08 '24 22:02 barsikus007

@ozyx ooh, could you give versions of your tools? (cause I have latest 😅) ((except node, which is lts)

Sure, check out our package.json

ozyx avatar Feb 08 '24 22:02 ozyx

@ozyx, I updated tools and packages, but unfortunately, bug still persist..

barsikus007 avatar Feb 08 '24 23:02 barsikus007

I modified extension and enabled logging Unlike cli, extension returned me some interesting lines of logs:


log.ts:437   ERR [Extension Host] Trace: prettier-eslint [TRACE]: executeOnText returned the following report: Array [
  Object {
    "errorCount": 4,
    "fatalErrorCount": 0,
    "filePath": "/absolutePath/frontend/src/components/Clients/ClientsModal/Commission.tsx",
    "fixableErrorCount": 0,
    "fixableWarningCount": 0,
    "messages": Array [
      Object {
        "column": 29,
        "endColumn": 57,
        "endLine": 6,
        "line": 6,
        "message": "Unable to resolve path to module '@/components/shared/Modals'.",
        "nodeType": "Literal",
        "ruleId": "import/no-unresolved",
        "severity": 2,
      },
      Object {
        "column": 22,
        "endColumn": 54,
        "endLine": 7,
        "line": 7,
        "message": "Unable to resolve path to module '@/components/shared/Typography'.",
        "nodeType": "Literal",
        "ruleId": "import/no-unresolved",
        "severity": 2,
      },
      Object {
        "column": 8,
        "endColumn": 17,
        "endLine": 13,
        "line": 13,
        "message": "Unable to resolve path to module '@/types'.",
        "nodeType": "Literal",
        "ruleId": "import/no-unresolved",
        "severity": 2,
      },
      Object {
        "column": 27,
        "endColumn": 44,
        "endLine": 14,
        "line": 14,
        "message": "Unable to resolve path to module '@/assets/images'.",
        "nodeType": "Literal",
        "ruleId": "import/no-unresolved",
        "severity": 2,
      },
    ],
    "source": _messed_up_

my tsconfig have

{
    "compilerOptions": {
        ...
        "paths": {
            "@/*": ["*"],
            ...
        },
        "baseUrl": "src",
    },
    "include": ["src"],
    ...
}

my .eslintrc.yaml have

settings:
  'import/resolver':
    typescript: {}

I guess, that it ignores tsconfig on import/resolver

barsikus007 avatar Feb 14 '24 05:02 barsikus007

This issue is stale because it has been open for 14 days with no activity.

github-actions[bot] avatar Mar 18 '24 17:03 github-actions[bot]

any updates?

barsikus007 avatar Mar 18 '24 23:03 barsikus007

@barsikus007 I have the same issue. For now I'm using eslint-plugin-simple-import-sort instead, which seems to work better with this vscode plugin.

PooSham avatar Apr 02 '24 16:04 PooSham

@barsikus007 Another solution might be to use the Prettier and ESLint vscode plugins instead of this one and have this configuration in settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript][typescript][json]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

PooSham avatar Apr 03 '24 05:04 PooSham

@barsikus007 Another solution might be to use the Prettier and ESLint vscode plugins instead of this one and have this configuration in settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript][typescript][json]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

there is downside of 2nd solution

barsikus007 avatar Apr 03 '24 08:04 barsikus007

@barsikus007 I have the same issue. For now I'm using eslint-plugin-simple-import-sort instead, which seems to work better with this vscode plugin.

thx, I'll try that solution

barsikus007 avatar Apr 03 '24 08:04 barsikus007

@barsikus007 Another solution might be to use the Prettier and ESLint vscode plugins instead of this one and have this configuration in settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript][typescript][json]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

there is downside of 2nd solution

This solution does not mean I run prettier as an eslint rule, these settings are vscode settings. This will make vscode run eslint first and then prettier (codeActionsOnSave is run before formatting), so it's essentially the same thing as running prettier-eslint. Like they mention, "Those are useful if some aspect of Prettier’s output makes Prettier completely unusable to you".

PooSham avatar Apr 03 '24 09:04 PooSham

@barsikus007 Another solution might be to use the Prettier and ESLint vscode plugins instead of this one and have this configuration in settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript][typescript][json]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

there is downside of 2nd solution

This solution does not mean I run prettier as an eslint rule, these settings are vscode settings. This will make vscode run eslint first and then prettier (codeActionsOnSave is run before formatting), so it's essentially the same thing as running prettier-eslint. Like they mention, "Those are useful if some aspect of Prettier’s output makes Prettier completely unusable to you".

oh, sorry, I didn't notice that..

barsikus007 avatar Apr 03 '24 09:04 barsikus007

This issue is stale because it has been open for 14 days with no activity.

github-actions[bot] avatar May 03 '24 17:05 github-actions[bot]

This issue was closed because it has been inactive for 14 days since being marked as stale.

github-actions[bot] avatar May 17 '24 17:05 github-actions[bot]