Eslint with Drupal style

Note: with Drupal 9.x moving to eslint greater than 5.x this setup of having a globally installed plugins and configs will not work under eslint 6+ without major effort setting it up per project. As such if you need the changes provided in eslint 6+ it probably better to web/core yarn install the modules with just have eslint and prettier installed globally or running them from their node_modules path.

see:

• ESLint cannot find global install
• Migrating to ESLint v6.0.0: Plugins and shareable configs are no longer affected by ESLint’s location

ESLint bundled with the original Airbnb Style and prettier/recommended configs. Global installation is supported! No struggle with peer dependencies, easily integrates with your code editors.

See airbnb/javascript and prettier/eslint for more information.

See instructions for WebStorm, VSCode, Sublime Text and Atom

Installation

Install it globally:

yarn global add eslint-config-drupal-bundle

or

npm -g install eslint-config-drupal-bundle

You can install it locally as well:

yarn global add eslint-config-drupal-bundle

or

npm install --save-dev eslint-config-drupal-bundle

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 👍

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-drupal-bundle/node_modules/eslint',
  }
},

WebStorm

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

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

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-drupal-bundle/node_modules/eslint",
   }

   Relative path for local installation:

   {
     "eslint.nodePath": "node_modules/eslint-config-drupal-bundle/node_modules/eslint",
   }

6. Create .eslintrc.js file inside your working project root:

   process.chdir(__dirname);
   
   module.exports = {
     extends: [
       'drupal-bundle',
     ],
   };

   

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": ["drupal-bundle"]
   }

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!

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-drupal-bundle

   

7. Create .eslintrc file inside your working project:

   {
     "extends": ["drupal-bundle"]
   }

8. Press Ctrl + Shift + P -> enter "lint" -> click "Linter:Lint"

Custom Config

Add your own rules to the .eslintrc file in your project folder. Note: you may want to add root: true to your project.eslintrc to limit eslint looking up parent directories for additional configs.

Credit

All credit to doasync and the original eslint-config-airbnb-bundle of which this is a fork just adding extra config/dependencies of prettier to have function under Drupal 8.6+.