eslint-config-drupal-bundle

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+.