ESLint cannot format test.jsx

[toddcford]

I'm having an issue with the initial set up of ESLint and Prettier. I've installed ESLint, created the configuration file, and added all the dependencies specified, but when I test that it's working in "pages/test.jsx" I get the error:

"Extension 'ESLint' cannot format 'builderbook/book/1-begin/pages/test.jsx"

Can anyone help with this?

[klyburke]

@toddcford thanks for reporting. I will look into this. Note that I may be busy this weekend.

In the meantime, could you please create a public repo with the exact code you are running? I will try running it as well to troubleshoot.

[klyburke]

@toddcford I went through ESLint and Prettier set up instructions in Chapter 1 and did not reproduce the error you see.

Here are a couple of things to try:

• In your 1-begin folder, delete the node_modules folder and yarn.lock file. Then re-run yarn after you've added all necessary dependencies. Then retry the pages/test.jsx file with ESLint.
• Try creating the pages/test.jsx file in the 1-end folder (be sure to run yarn first). Does ESLint work there? If it works, the issue is likely in your 1-begin code. If you create a public repo with this code, I can troubleshoot.

Let me know if this helps or if you still encounter the problem. Thanks!

[toddcford]

Thanks for getting back to me Kelly. I create a public repository here with the code I'm running: https://github.com/toddcford/builderbook_ESLint_error

I tried both suggestions above, but still can't seem to get ESlint working.

[klyburke]

Thanks for trying my suggestions and sharing a repo.

I ran your code and still did not reproduce the error you see. All works as expected on my machine. There may be a problem with your ESLint set up.

Here are a few things to check:

1. Make sure you have the latest version of ESLint installed and enabled in your VS Editor. After installing, you may need to restart VS Editor.

2. At the bottom right of VS Editor, you should see ESLint with check boxes next to it.

3. In VS Editor, go to File > Preferences > Settings. In the top right, click the icon for "Open Settings (JSON)". Your settings should include the following:

4. Make sure you have the latest version of VS Editor.

---

With all of the above settings, I was able to format your code using ESLint. Please let me know if you still have an issue.

[deasystephen]

I am having the same problem now, but didn't have it until recently. I was going through the book and didn't have problems but last week I started again. Now I am getting the same "ESLint cannot format..." for every file. What I noticed is that the test.jsx example works, I just see the error appearing in the VSCode status line when I manually save the file. This happens 100% of the time even with a new git clone of the whole book and walking through the text in chapter 1.

[deasystephen]

Adding some context, if I clone the book repo again from scratch and then go through Chapter 1, the error starts happening during setup of the linting and prettier; https://builderbook.org/books/builder-book/set-up-node-js-project-vs-code-editor-and-lint-set-up-next-js-project-material-ui-integration-server-side-rendering-custom-styles#vs-code-editor

I haven't tried uninstalled the dbaeumer.vscode-eslint and redoing the whole thing again yet including the plugin install but I don't think that is the problem...

[klyburke]

@deasystephen Thanks for catching this problem too and reporting it. I will keep digging.

Can you confirm your version of VS Editor and your version of ESLint? Find VS Editor version by clicking Help > About. Find ESLint version by clicking extensions on the left menu of VS Editor, then select ESLint.

[deasystephen]

VS Code: Version: 1.59.1 (Universal) Commit: 3866c3553be8b268c8a7f8c0482c0c0177aa8bfa Date: 2021-08-19T11:53:52.479Z Electron: 13.1.7 Chrome: 91.0.4472.124 Node.js: 14.16.0 V8: 9.1.269.36-electron.0 OS: Darwin x64 20.6.0

ESLint: v2.1.23

[tima101]

@toddcford @deasystephen I went through Chapter 1 and highlighting and auto-fixing work as expected. Meaning VS code editor extension and its settings work as expected. I do see one second flash of Extension 'ESLint' cannot format... inside editor's Status bar, it disappears quickly after I press Ctrl + S to auto-format code. However, auto-formatting of code works as expected.

---

EDIT: @deasystephen VS code editor auto-updates extensions. This is probably why you haven't seen this message before. I tried extension's version 2.1.13 and most recent 2.1.23 - both have flash of Extension 'ESLint' cannot format.... However, highlighting and auto-fixing work as it should. My eslint is not installed globally so there should not be any conflict with locally (inside project) installed plugins. Since highlighting and auto-fixing work I will just wait for this flash of message to be fixed in future versions of extension.

[klyburke]

@deasystephen Thank you for the screenshot. Helped me understand where to find the Extension 'ESLint' cannot format... message.

I started Chapter 1 from scratch, and I do see that message in every file when I save. Still, highlighting and auto-fixing work as expected.

This error was discussed in the below issue last year. This comment specifically demonstrates the behavior you are seeing: https://github.com/microsoft/vscode-eslint/issues/1086#issuecomment-707132949

The author of the extension said he would fix it in future versions (as soon as 2.1.13), but even in the latest version 2.1.23, I see the flash of Extension 'ESLint' cannot format....

Since highlighting and auto-formatting work, we will wait to see if future versions resolve the message in the status bar.

[deasystephen]

Sounds good, thanks folks. Appreciate the quick followup!