Airbnb not being recognized from eslintrc in builderbook.

[callahanp]

ESLint: Failed to load config "airbnb" to extend from. Referenced from: /work/builderbook/.eslintrc.js. Please see the 'ESLint' output channel for details.

ESLint output channel is attached
eslint_output.txt

If you are not seeing this error, you have config-airbnb and config-airbnb-base installed in such a way that your particular installation works. On a fresh install of builderbook, you see the error above. You may or may not experience this error if you have eslint or airbnb installed globally.

Curiously, you cannot get builderbooks linting to work in visual studio code, with the .eslintrc.js in the builderbook folder. you have to move it into the working folder then linting works correctly. If the copy remains at the higher level, it will be found and used, with the result that the airbnb line will cause linting to fail completely.

I believe this stems from ongoing problems mentioned in microsoft/vscode-eslint#696. Dbaumer references microsoft/vscode-eslint#815 which further refers to a fix that works in VSCode insiders edition. Apparently to fix this properly, changes were needed in vsCode itself.

[dbaeumer]

@callahanp this is pretty sure a working directory setup issue which should be simplified with the next version. Can you please retest this with the next version.

Please note that if you use a mono repository you will still need to configure working directories. I tried hard to get around this but it is not possible due to the fact that ESLint itself is very sensitive to this.

[callahanp]

I'll leave it to the builderbook team to respond officially, but I will do some testing with more current versions and get back to you if I have any success. Can I assume that the fix will only work with vscode insiders and eslint 6.7.3 when released, or in the meantime, eslint from github?

[tima101]

@callahanp I will look into it. Last time I checked, both highlighting and auto-fixing worked for me in VS editor.

@NguyenDa18 @dbaeumer Does ESLint highlighting and auto-fixing work for you?

---

#252
#250

[tima101]

@callahanp Just tested again, root project in this repo and chapter 8-end, I see highlighting and auto-fixing working as expected.

I also tested yarn lint command, worked as it should as well.

Here what I auto-fixed just now:
ca591f4

---

Did you try removing node_modules/yarn.lock and re-installing dependencies?

---

@callahanp @dbaeumer ESLint works fine for this root project and book chapter projects without setting eslint.workingDirectories.

But I had to add eslint.workingDirectories to our TypeScript project:
https://github.com/async-labs/saas/blob/master/.vscode/settings.json

[tima101]

@callahanp Here is a link to code fixed by ESLint:
ca591f4

[delgermurun]

@callahanp I just tested too. ESLint error highlighting and auto fixing works fine on vs-code.
Tried removing node_modules and install again via yarn. It works fine too.

All dependencies installed locally, no globally installed eslint or any other related packages.

I tested the root project and book/8-end source files.

Here is my vs-code's info. I use stable version, not a insider.

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T14:57:51.166Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.0.0

[dbaeumer]

@tima101 two things you can do to improve this.

• Use the new [{ "mode": "auto" }] value for eslint.workingDirectories
• Use the new { "pattern": glob pattern } pattern entry for eslint.workingDirectories

See also https://github.com/microsoft/vscode-eslint#settings-options

[klyburke]

Highlighting and auto-fix are working for me too. I tested in 8-end with the .eslintrc.js file at the root, not directly within the 8-end folder.

---

However, I do see the issue brought up in #252 . An error is identified by Eslint, but when I click cmd+S, the function does not change. It looks like it's trying to change (quick flash of style), but it ends up staying the same.

This is in reference to the example we have in Chapter 1, section Eslint and Prettier: https://builderbook.org/books/builder-book/app-structure-next-js-hoc-material-ui-server-side-rendering-styles#eslint-and-prettier

We expect that this function:

[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

will be automatically changed to:

[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

Screenshot of unchanged function:

[dbaeumer]

@klyburke can you check if increasing the editor.codeActionsOnSaveTimeout value fixes it. The time eslint has in save to compute the fixes is limited and might not be enough for larger files. If this doesn't solve it can you fix all errors by executing the command ESLint: Fix all auto fixable problems. If this doesn't work can you provide me with a GitHub repository I can clone that demos this?

[tima101]

@dbaeumer Could you please create pull request with edits to this file:
https://github.com/builderbook/builderbook/blob/master/.vscode/settings.json

I am not sure we need these settings but if these settings help @callahanp to resolve issues, we can merge them.

[tima101]

@callahanp @klyburke @delgermurun @dbaeumer This is what found about #252
#252 (comment)

@delgermurun @klyburke Can you guys test and confirm?

@callahanp Thank you for reporting!

[callahanp]

Updated to Node 12.14.0
Updated VSCode to 1.41
cd builderbook # not builderbook/book/1-begin
code ./
builderbook.vscode/extensions.js:
{
"recommendations": [
"dbaeumer.vscode-eslint"
]
}
settings.json:
{
"window.zoomLevel": -1,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
added book/1-begin/pages
builderbook/book/1-begin/pages/index.js:
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
pressed ctrl-s
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});

Notes: After updating visual studio code, check that the eslint and any other extensions are working, are updated if necessary and that they are not requiring a restart of visual studio code to start working again.