Vscode-eslint: Extension 'ESLint' cannot format '*.tsx'

[kiprasmel]

Hello, I'm getting this error once I save my .tsx (react) file:

Extension 'ESLint' cannot format 'file.tsx'

@ the statusbar. The output window of eslint reports no errors / warnings, both with debug on & off.

My stuff:

• eslint config: https://github.com/sarpik/eslint-config-sarpik
• vscode-eslint config: https://github.com/sarpik/eslint-config-sarpik/blob/master/README.md#with-vs-code
• full vscode's setup: https://gist.github.com/sarpik/de9160a0602463fb752f2d84d7aa4fd8
  via https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync (don't override your own settings though)
• example repo in where this occurs: https://github.com/sarpik/turbo-schedule (./client/) (note that I'm using the global ~/.eslintrc.js file - I don't have one in the project yet (though I don't know how if CRA has it by default)).

system & vscode:

$ uname -a
Linux arch-usb 5.4.3-arch1-1 #1 SMP PREEMPT Fri, 13 Dec 2019 09:39:02 +0000 x86_64 GNU/Linux

$ vscodium --version
1.41.0
9579eda04fdb3a9bba2750f15193e5fafe16b959
x64

$ code-insiders --version
1.42.0-insider
e74405d11443c5361c31e2bc341866d146eee206
x64

.ts files work just fine.

---

Edit:

Demo: https://github.com/sarpik/cra-ts-vscode-eslint-broken-demo

[piotrblasiak]

I get this as well, for both ts and tsx files.

eslintrc:

{
    "extends": [
        "airbnb-typescript",
        "plugin:prettier/recommended"
    ],
    "globals": {
        "ASSET_PATH": true
    },
    "plugins": [
        "babel",
        "react",
        "emotion",
        "react-hooks"
    ],
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jasmine": true
    },
    "parser": "babel-eslint",
    "rules": {
        "import/no-extraneous-dependencies": 0,
        "import/extensions": 0,
        "react/no-multi-comp": 0,
        "react/sort-comp": 0,
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js"
                ]
            }
        ],
        "react/require-default-props": 0,
        "react/default-props-match-prop-types": [
            "error",
            {
                "allowRequiredDefaults": true
            }
        ],
        "react/destructuring-assignment": 0,
        "jsx-a11y/no-static-element-interactions": 0,
        "jsx-a11y/label-has-for": 0,
        "jsx-a11y/img-has-alt": 0,
        "camelcase": 0, // relay generates types with _ in the names, so need to allow non-camelcased,
        "no-underscore-dangle": 0,
        "lines-between-class-members": 0,
        "no-continue": 0,
        "react-hooks/rules-of-hooks": "error",
        "react/static-property-placement": 0,
        "react/state-in-constructor": 0,
        "react/jsx-props-no-spreading": 0
    }
}

vscode settings:

{
    "workbench.startupEditor": "newUntitledFile",
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "editor.minimap.enabled": false,
    "git.enableSmartCommit": true,
    "workbench.colorTheme": "Default Light+",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

[dbaeumer]

Do you have ESLint configured as the default formatter for TypeScript and TypeScript React files as well? Otherwise the TS language server will be used as a formatter. For works for me as expected if configured correctly

[kiprasmel]

Do you have ESLint configured as the default formatter for TypeScript and TypeScript React files as well?

Pretty sure that's true:

{
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }
}

(full config: https://github.com/sarpik/eslint-config-sarpik/blob/master/README.md#with-vs-code)

I don't even see the Format document WITH via right-click, only Format document.

Anything else I could help with?

[kiprasmel]

Update: nevermind, I think this is specific to CRA (& it's eslint config?).

I just created a sample test.tsx file, opened it via vscode - it got formatted just fine, everything worked.

function App(){
 return (
    <div>foo</div>
  )
    }

  export default App

function App() {
    return <div>foo</div>;
}

export default App;

---

In my CRA app, I don't have an eslint config - I try using my global one from ~/.eslintrc.js, and everything works fine except .tsx (and renaming to .ts does not help if the content is tsx, obviously:D).

[piotrblasiak]

Formatter is set correctly, as indicated by the error message

Extension 'ESLint' cannot format ...

and running

npx eslint --fix nameOfFile.ts also works so eslint config is clearly good.

And both Eslint and extension host output/logs are empty. So no idea what to do next...

[kiprasmel]

@piotrblasiak yeah same, formatting with eslint CLI works on the CRA app for me too. This must be an issue with eslint-vscode.

[dbaeumer]

Can one of you provide me with a GitHub repository I can clone that demos what you are experiencing. Without reproducible steps it is very hard to find out why this is not working for you.

[kiprasmel]

@dbaeumer sure - https://github.com/sarpik/cra-ts-vscode-eslint-broken-demo.
Please read it's README - I noticed that not only .tsx, but also .ts file are affected, at least in that repo.

[dbaeumer]

@sarpik I do have problems reproducing this since ESLint in the terminal doesn't report any issues on App.tsx nor does it fix any problems when using the --fix option.

Can you include the eslint configuration file you are using for the project?

[kiprasmel]

@dbaeumer Aight, I retried & got the same behaviour as you.

I've

1. ejected,
2. installed my eslint-config-sarpik,
3. extended it through package.json &
4. updated the demo

via PR #1 as explained in https://github.com/sarpik/eslint-config-sarpik#with-create-react-app.

The thing is - now everything works:D

Previously, I was using my global ~/.eslintrc.js, which is the same as the eslint-config-sarpik mentioned above.

---

In the original app, I did NOT eject and did not install my config - only used my global one. This is probably the problem.

Would it be possible to either

a) use your global configuration, or
b) add an .eslintrc for the CRA without ejecting?

Thanks!

[dbaeumer]

ESLint itself is very sensitive when it comes to global configuration and installs. In principal the eslint module and all plugins need to be installed either globally or locally. This is why they mainly recommend local installs.

The extension should actully react to changes in the .eslintrc configuration file if it is part of the workspace. I tested this and it does work for me. Anything special you can remember here?

The VS Code eslint plugin uses the ESLint npm module and hence is bound to their behavior and I don't want to change this. Major reason is that otherwise linting in VS Code will produce other results than linting in the terminal.

Bottom line: if it works in the terminal but not in VS Code it is a bug. If it doesn't work in both it is expected :-).

[vscodebot[bot]]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!