@madgex/eslint-config-madgex

Overview

This module allows us to have a common set of rules across multiple code repositories, without having to copy/paste those rules everywhere. See "ESLint's Sharable Configs article" for more details.

Adopting almost all of the popular AirBnB Style Guide, we have tweaked some of the rules and added support for the popular Prettier code formatting tool.

NOTE: Bitbucket markdown formatting is really bad, it breaks the npm command in step 1. View source to see the un-mangled line.

Installation

1. Run this command in your node project to install everything needed by the config:

   npx install-peerdeps --dev @madgex/eslint-config-madgex
   

2. You can see in your package.json there are now a big list of devDependencies.

3. Create an .eslintrc.js file in the root of the project and configure ESLint to use the Madgex ruleset by adding the following code to the .eslintrc.js file:

   module.exports = {
     extends: "@madgex/eslint-config-madgex"
   };
   

4. Create an .prettierrc file in the root of the project. Add the following config to tell prettier to use the same formatting rules as ESLint:

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 120,
     "singleQuote": true,
     "trailingComma": "es5",
     "bracketSpacing": true,
     "arrowParens": "always",
     "endOfLine":"auto",
   }
   

5. You can add two scripts to your package.json to lint and/or fix:

   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   

Editor integration

VSCode provides good support for ESLint & Prettier via 2 plugins:

Open VSCode and press CMD + P to open the command bar, then install using:

ext install dbaeumer.vscode-eslint > ext install prettier-vscode

Other editor integrations for eslint can be found, as well as editor integrations for Prettier.

Recommended settings for VSCode

You can format your document as you work with this setting:

"editor.formatOnSave": true,

If working with Vue you can integrate linting with this user setting:

"eslint.validate": ["javascript", "javascriptreact", "vue"],

---

Ignoring files/dirs from linting

If you'd like to exclude certain files from ESLint then you can create a .eslintignore file too.

Package dependencies, i.e. what comes with it this module

• eslint
• eslint-config-airbnb-base
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-promise
• eslint-plugin-prettier
• prettier

What's different from AirBnB

We disable these:

no-debugger - allow devs to use the debugger statement in development, only trigger a warning if the NODE_ENV is production. no-console - allow console logging. no-plusplus - allow devs to use the ++ and -- unary operators. linebreak-style - due to working in a cross-platform environment, allow Unix and Windows line feeds.

Alter this setting:

arrow-body-style - for readability, always require braces in arrow functions. This can often be auto-fixed by eslint.

Adding linting to your package.json

Add these two lines to your package.json scripts to add the npm linting scripts. Run with npm run lint and npm run lint-fix.

"lint": "eslint .",
"lint-fix": "eslint . --fix"