ESLint Example in the book is not working

[callahanp]

The text gives "This type of Eslint error is a result of Airbnb's format rule for arrow functions."

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

Pressing ctrl-s does not change the function to an arrow function as stated in the text.

linting seems to object only to the fact that the function has no name, not that a nameless function should be expressed as an arrow function.

[tima101]

@callahanp I confirm this problem. Thank you.

Here is what I found to fix it:

1. Upgrade your VS Editor and ESLint extension (by @dbaeumer)
   Most latest versions are: 1.41.1 for VS Editor and 2.0.11 for ESLint extension

2. Upgrade all dependencies with yarn upgrade --latest

3. Update your Workspace settings to be

{
  "window.zoomLevel": -1,
  "files.autoSave": "afterDelay",
  "git.enableSmartCommit": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Apparently eslint.autoFixOnSave got depreciated!
And to make auto-fixing to work by ESLint, you have add:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

4. Inside .eslintrc.js file, add setting 'prefer-arrow-callback': 'error' just before 'prettier/prettier'

module.exports = {
  parser: 'babel-eslint',
  extends: ['airbnb', 'plugin:prettier/recommended'],
  env: {
    browser: true,
    jest: true,
  },
  plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
  rules: {
    'max-len': ['error', 100],
    'no-underscore-dangle': ['error', { allow: ['_id'] }],
    'no-mixed-operators': 'off',
    'prefer-destructuring': [
      'error',
      {
        VariableDeclarator: {
          array: false,
          object: true,
        },
        AssignmentExpression: {
          array: true,
          object: false,
        },
      },
      {
        enforceForRenamedProperties: false,
      },
    ],
    'import/prefer-default-export': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js'],
      },
    ],
    'prefer-arrow-callback': 'error',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
        arrowParens: 'always',
        printWidth: 100,
        semi: true
      },
    ],
  },
};

Then try auto-fixing this block of code:

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

It will become:

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

Phew!

[tima101]

@callahanp @klyburke Check this commit: 5a78d83

@klyburke Please upgrade packages in chapter folders and book text in Chapter 1. Thanks.

[callahanp]

Working as expected.

Visual Studio Code at 1.41.1
ESLint at 2.0.11
yarn run from the builderbook top level project directory.
code started from the builderbook top level project directory.

test case:
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
result:
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
Note that prettier still wants to make the spacing two spaces instead of four on the line containing const and return. const and return were marked with a red wavy line.
These prettier corrections did not happen automatically on save. I had to manually position the cursor to the first error click on the blue bubble which then appeared and select fix all prettier problems from the pop-up menu

This issue and #251 may have been complicated by an intervening upgrade to Visual Studio Code.
After upgrading Visual Studio Code, you may have to tend to the updates of extensions such as ESLint. I"m not sure if the update process for extensions is automatic, or if there is something that must be triggered by opening the extensions view. At one point today, several days after updating Visual Studio Code, I found that eslint was not operating at all. I opened the extensions tab and saw a note that a restart of code was required to enable the updated extension. An exit from VSCode and restart caused eslint with airbnb extensions to start working as expected.

[tima101]

Re-opened till we make all edits.

[klyburke]

@tima101 edited Chapter 1 text for the changes in Workspace settings and .eslintrc.js.

[victorray84]

ESLint couldn't find the config "airbnb" to extend from. I'm getting the following error:

Oops! Something went wrong! :(

ESLint: 6.1.0.

ESLint couldn't find the config "airbnb" to extend from. Please check that the name of the config is correct.

[tima101]

@victorray84 Hi. Have you followed these steps (part of the book):
#252 (comment)

?

[victorray84]

@victorray84 Hi. Have you followed these steps (part of the book):
#252 (comment)

?

Yes, I've followed the steps. Still getting the same error.

[klyburke]

@victorray84 , thanks for reporting. I'll need more information to figure out the problem.

• Are you running code in one of the book folders? If so, which one?
• When you get this error, what command are you trying to run?
• Have you pulled all latest changes from our repo? You might have an older package that needs to be updated.
  • Delete both your node_modules folder and yarn.lock file.
  • Then pull all latest changes and re-run the yarn command.

[victorray84]

Hi, Thanks for ur reply. The comments are given below:

1. I'm running the code from 1-Begin folder according to the book
2. I was getting the error after running the yarn lint command.
3. I've deleted the both node_modules and yarn.lock file and take the latest pull. I'm still getting the above mentioned error.

[delgermurun]

Hello @victorray84

Did you try to run yarn lint inside book/1-begin folder? If so, it will not work because there is no lint command inside book/1-begin/package.json's scripts.

I've cloned fresh new code from this repo. And gone to book/1-begin folder and installed dependencies (yarn install).

I have Yarn v1.21.1 installed and I tried yarn lint inside book/1-begin it gives me below error:

yarn run v1.21.1
error Command "lint" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Then I tried to run yarn lint from repo's root folder after installing dependencies from root folder (installed this file's dependencies). And it gives me lots of lint error, with means command worked correctly.

I hope it helps. Thanks.

[victorray84]

Hi,
Thanks for ur reply. I think u should update the book with latest dependencies. Now, it's working.

[klyburke]

@victorray84 Thank you again for bringing up this issue. I realized that Chapter 1 listed older packages for package.json. I've updated the book text to list the latest packages we are using in the book.