Skip to content

Instantly share code, notes, and snippets.

@AndrewStanton94
Last active August 20, 2017 23:27
Show Gist options
  • Save AndrewStanton94/7c17ee01aeb0f69f6f4cf01ef6206e8d to your computer and use it in GitHub Desktop.
Save AndrewStanton94/7c17ee01aeb0f69f6f4cf01ef6206e8d to your computer and use it in GitHub Desktop.
{
"extends": ["eslint:recommended", "google"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"rules": {
"no-console": "off"
},
"env": {
"es6": true,
"node": true,
"browser": true
},
"plugins": [
"html"
]
}
@AndrewStanton94
Copy link
Author

Installing eslint with Atom

Purpose

A linter checks your code for problems. Using a editor plugin points out exactly where the issue is.

It can detect the syntax issues without having to run it, a time-saver.
It will highlight variables that are called but not defined, or defined and not called. This helps with typos and scope issues.
Some rules don't impact the way the code works but ensures that it is written in a clear consistent style, this can boost readability.

Prerequisites

  • Atom installed
  • Nodejs & NPM installed
  • A project with package.json created

Installation

In the terminal

Run npm install eslint eslint-config-google eslint-plugin-html --save-dev
This will install the linter and some addons.
The addons will make eslint use rules that match the google style guide and allow embedded javascript to be linted.

In atom

  1. Save the .eslintrc.json file in the root of the project.
    This is needed so that the linter knows what to do.

    • extends uses existing rules configurations. A good starting point with no effort.
    • parserOptions tells eslint what version of JavaScript is being used. Using features from newer versions will result in a warning.
    • rules the things eslint checks for. They can be configured here to override the values from the extends field.
    • env Used to add the keywords from different environments. E.g. the browser, nodeJS, workers. They can also be used with test frameworks.
    • plugins new features that expand eslint capability
  2. Open settings (Control Comma)

  3. Click install in sidebar

  4. Search linter-eslint

  5. Press install on linter-eslint

  6. It will start installing and will then ask to install some dependencies linter and others accept these.

  7. Click Settings for linter-eslint
    Tick Lint HTML Files

  8. Reload atom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment