ADVANCED-TOPICS.md

Usage

Disable Rules

Disabling Rules with Inline Comments

Disable Rule For Single Line

// eslint-disable-next-line no-alert
alert('foo');

⚠️ don't use // eslint-disable-line as formatter like prettier will move them to a separate line.

Disable Rule For A Block Of Lines

/* eslint-disable no-alert */
alert('doing awful things');
/* eslint-enable no-alert */

Disable Linting Completely

/* eslint-disable */
…
/* eslint-enable */

// eslint-disable-next-line

Disable Multiple Rules

Separate them with , (comma)

/* eslint-disable no-alert, no-console */
…
/* eslint-enable */

// eslint-disable-next-line no-alert, no-console

Declare Global Variables

You can do that at several levels: file, globally or per directory.

Using env

For the common use-cases you can leverage the env property to setup an environment that defines global variables.

At File Level

/* global loginUser, logmatic */

or

/* eslint-env node, browser, jquery */

At Global Level

Edit your configuration file to add a globals object where each key is a global variable we want to use:

  {
    globals: {
      loginUser: true,
      logmatic: true
    }
  }

or add a env object where each key is a predefined preset of globals:

{
  env : {
    node: true,
    jquery: true,
    browser: true,
  }
}

In Specific Directory

Create a .eslintrc.js file in the targeted directory.

module.exports = {
  globals: {
    logmatic: true,
  }
};

Existing Presets

Core

Core configuration, currently design for ES6. All others configurations extend this one.

• file: core.js
• usage: not directly, refer to Default Configuration

Default Configuration

Default configuration, extends eslint:recommended and core.js.

• usage:

  extends: [ 'peopledoc' ]
  

• file: index.js

Ember Configuration

For Ember project, extends eslint:recommended, ember/recommended and core.js.

• usage:

  extends: [ 'peopledoc/ember' ]
  

• file: ember.js

ES5 Configuration

For legacy projects using ES5 and jquery, it disables ES2015 and ES2016 feature based on es5

• usage:

  extends: [ 'peopledoc/es5' ]
  

• file: es5.js

• targeted environment: browser

Create a new preset

Let's assume you want to create a new preset for ES8.

1. First, write documentation of your preset in the README.md ;
2. Next, create a new file at the root of the project es8.js ;
3. Then add a basic configuration that extends at least eslint:recommended:

module.exports = {
  extends: [ 'eslint:recommended' ]
};

1. Be sure to update the package.json files property in order to make it available during npm install:

"files": [
  "core.js",
  …
+  "es8.js"
]

1. Create a pull request es8;

2. Try to install your PR on a project:

    npm install --save-dev peopledoc/eslint-config-peopledoc
   

I want to…

Support a specific syntax

Specify the version of ECMAScript syntax you want to use.

• what to use: parserOptions.ecmaVersion

• example: for ES6 syntax, use

  { parserOptions: { ecmaVersion: 6 } }

Use a specific environment

This will declare globals variable and other options.

• what to use: env

• values: es6, browser, node, much more

• dive in: environments.js and globals.

• example: for new ES6 global variables, use

  { "env": { "es6": true } }

Use a plugin

Plugins can expose additional rules and environments

• what to use: plugins

• dive in: Working with Plugins

• example: use eslint-plugin-es5 to forbid ES2015 and ES2016 in our ES5 config:

  plugins: ['es5'],
  extends: [
    'eslint:recommended',
    'plugin:es5/no-es2015',
    'plugin:es5/no-es2016'
  ],