Skip to content

Instantly share code, notes, and snippets.

@nvanselow
Last active December 6, 2021 11:35
Show Gist options
  • Save nvanselow/8370cc06619393efa6a5763ba25e7da6 to your computer and use it in GitHub Desktop.
Save nvanselow/8370cc06619393efa6a5763ba25e7da6 to your computer and use it in GitHub Desktop.
Linter for JSX and ES6
{
"env": {
"browser": true,
"node": true
},
"extends": "google",
"installedESLint": true,
"plugins": [
"react"
],
"ecmaFeatures": {
"jsx": true
}
}

ESLint for Atom

Helps with ES6 and JSX linting

So now that we have ES6 and JSX, our JSHint linter no longer works and throws all sortes of crazy errors. However, there is something called ESLint we can use instead.

To install this in Atom (do this part once):

  1. First disable JSHint if you installed it. Go to settings (CMD + ,) -> Packages -> search for JSHint and click "Disable"
  2. In the console, run the command apm install linter
  3. In the console, run the command apm install linter-eslint

For each project (as far as I can tell):

  1. In the console run, npm i --save-dev eslint eslint-plugin-react eslint-config-google
  2. Copy the .eslintrc.json file provided to the root folder. (Note: This file can be edited to change the options for how the linter works and what it throws flags for.)
  3. Quit Atom and restart. (Note: Quitting Atom may not always be necessary. I've had some success with just closing and reopening the file or saving the file to initiate linting)

Hints

  • Is a single line ok, but still giving your problems? Add // eslint-disable-line after the offending line. For example, I keep getting a lint error for import React from 'react'; because we never use the variable React. Making the line like this: import React from 'react'; // eslint-disable-line gets rid of the error.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment