Skip to content

doasync/eslint-config-airbnb-standard

Repository files navigation

Airbnb+ JavaScript Standard Style

ESLint Airbnb Standard JS logo

ESLint on steroids (extends "airbnb" + "standard" configs). Global installation!

NPM Version NPM Downloads GitHub issues Telegram Tweet

It uses original Airbnb Style config extended with JavaScript Standard Style config (with semicolons).

See airbnb/javascript and standardjs for more information. Compare configs.

Another package

If you want to install Airbnb config only, check this package:

ESLint + Airbnb : eslint-config-airbnb-bundle

Installation

Install it globally:

npm install --global eslint-config-airbnb-standard

You can install it locally as well:

npm install --save-dev eslint-config-airbnb-standard
Setup your IDE / Editor:

WebStorm

VSCode

Sublime Text 3

Atom

Usage

You can now run feature packed eslint from any directory:

eslint -v

Create .eslintrc file in your project. Setup your IDE / Editor. And be smart!

ES6, ES7, React, JSX, async/await - all new features supported by default 👍

Custom Config

Add your own rules to the .eslintrc file in your project folder. For example, you can turn off semicolons (semi -> "never"):

{
  "extends": ["airbnb-standard"],
  "rules": {
    "semi": ["error", "never"]
  }
}

ESLint inside

You shouldn't add eslint to your dependencies. It's bundled with this package, just specify the path if you need. Here is an example for eslint-loader:

{
  loader: 'eslint-loader',
  options: {
    eslintPath: 'eslint-config-airbnb-standard/node_modules/eslint',
  }
},

Sublime Text 3

  1. Install this package globally

  2. Go to: Preferences -> Package Control -> install package

  3. Install SublimeLinter

  4. Install SublimeLinter-contrib-eslint

  5. Run:

    npm bin -g

    ... and copy the path

  6. Go to: Tools -> SublimeLinter -> Open User Settings

    Paste the path to NodeJS installation folder inside "paths" for your OS and save:

    "paths": {
        "linux": [
            "~/.nvm/versions/node/v8.8.1/bin"
        ],
        "osx": [],
        "windows": ["%AppData%\\npm"]
    },
  7. Create .eslintrc file inside your working project:

    {
      "extends": ["airbnb-standard"]
    }
  8. Restart Sublime Text

  9. Go to Tools -> SublimeLinter -> Lint this view

  10. You can switch to squiggly underline mark style from Tools. Have fun!

Example

VSCode

  1. Install this package globally (or locally)

  2. Go to: View -> Extension or press CTRL + SHIFT + X

  3. Search for ESLint extension, click it and press "Install" button

  4. Press "Reload" button or reopen the editor

  5. Go to: File -> Preferences -> Settings

    Add ESLint path to your workspace settings (do not use ~):

    {
      "eslint.nodePath": "/home/username/.nvm/versions/node/v10.5.0/lib/node_modules/eslint-config-airbnb-standard/node_modules/eslint",
    }

    Relative path for local installation:

    {
      "eslint.nodePath": "node_modules/eslint-config-airbnb-standard/node_modules/eslint",
    }
  6. Create .eslintrc.js file inside your working project root:

    process.chdir(__dirname);
    
    module.exports = {
      root: true,
      parser: 'babel-eslint',
      parserOptions: {
        allowImportExportEverywhere: true,
        codeFrame: false
      },
      extends: [
        'airbnb-standard',
      ],
    };

    VSCode errors

WebStorm

File ➤ Settings / Default Settings ➤ Languages and Frameworks ➤ JavaScript ➤ Code Quality Tools ➤ ESLint

ESLint settings

Global installation in not necessary for WebStorm, but it is handy for the "Default Settings".

Atom

  1. Install this package globally

  2. Go to: Edit -> Preferences -> Install

  3. Install Linter

  4. Install linter-eslint

  5. Run:

    npm prefix -g

    ... copy the prefix path

  6. Go to: Preferences -> Packages -> linter-eslint -> Settings

    a) Check "Use global ESLint installation" option at the bottom

    b) Paste the prefix path to the field "Global Node Installation Path" and append:

    /lib/node_modules/eslint-config-airbnb-standard

    Example

  7. Create .eslintrc file inside your working project:

    {
      "extends": ["airbnb-standard"]
    }
  8. Press Ctrl + Shift + P -> enter "lint" -> click "Linter:Lint"

About

Airbnb's JS ESLint config + JS Standard Style + semicolons

Resources

License

Stars

Watchers

Forks

Packages

No packages published