How to set up Airbnb ESLint in VS Code?

Question

I've tried for hours to set up ESLint using the Airbnb linter in Visual Studio Code. I ran the commands found here: https://www.npmjs.com/package/eslint-config-airbnb and set the peer dependencies to the correct versions, but still no luck. I always get this error:

Unexpected top-level property "“extends”". . Please see the 'ESLint' output channel for details.

Does anyone know of a fix for this? I've read so many blogs and threads to no avail and am at the point where it seems like it's just more hassle than it's worth, though everyone says the Airbnb style guide is best for React.

Answer 1

1. Install the ESLint extension for VS Code. This will cause lint errors to show up inline, directly in the code editor (as opposed to just showing in the terminal when you use the command line).
2. Install eslint-config-airbnb and all of the dependencies (follow the instructions in the documentation). If you're using npm 5+, simply run this command in your terminal while inside of the project directory: npx install-peerdeps --dev eslint-config-airbnb.
3. Setup your ESLint configuration. You can add a basic config in your package.json file under the eslintConfig property, like so: "eslintConfig": { "extends": "airbnb" }

If you've done all of the above steps and are still getting the error you mentioned, see this thread, where a number of potential solutions are mentioned in the comments.

Specifically, in your case it sounds like your configuration is not getting read properly, for whatever reason. I would try adding it to your package.json as mentioned above to see if that solves it.