eslint-config-kmcgrady

10.0.4 • Public • Published

eslint-config-kmcgrady

Build Chat License NPM

Ken McGrady's shareable ESLint configuration

Philosophy

A major aspect of the ESLint philosophy is that it doesn't promote any particular coding style. While there are many different styles of writing JavaScript, the ESLint rules in this shareable configuration adhere the following philosophy.

  • Declare all available rules
  • Support ECMAScript 5 and above
  • Be compatible with alternative parsers
  • Break the build when code fails any rule
  • Equip developers with powerful semantics
  • Teach developers how to write maintainable code
  • Allow any rule to be overridden on a per project basis

Dependencies

Dependency Type Version
eslint Peer ^3.10.2
eslint-plugin-react Required ^6.7.1
node Engine `^4.2.0

Global usage

Install the package globally.

npm install -g eslint eslint-config-kmcgrady

Change into your project's directory.

cd path/to/project

Create a .eslintrc.js configuration file.

touch .eslintrc.js

Add language configuration and environment configuration to the .eslintrc.js file.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6'
  ]
};

Run eslint globally and fix any linting errors.

eslint .

Local usage

Change into your project's directory.

cd path/to/project

If you haven't already, create a package.json file.

npm init

Install the package locally and add it to the package.json file as a development dependency.

npm install -D eslint eslint-config-kmcgrady

Create a .eslintrc.js configuration file.

touch .eslintrc.js

Add language configuration and environmnent configuration to the .eslintrc.js file.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6'
  ]
};

Run eslint locally and fix any linting errors.

./node_modules/.bin/eslint .

Additionally, add a script to the package.json file.

{
  "script": {
    "lint": "eslint"
  }
}

Then run the npm script and fix any linting errors.

npm run lint .

Language configuration

A project is linted by one of the following language configurations.

Language Module
ECMAScript 5 kmcgrady/es5
ECMAScript 6 kmcgrady/es6
ECMAScript 7 kmcgrady/es7
ECMAScript 8 kmcgrady/es8

Add the following code to the .eslintrc.js file of an ECMAScript 6 project.

module.exports = {
  extends: 'kmcgrady/es6'
};

Or add the following code to the .eslintrc.js file of an ECMAScript 7 project.

module.exports = {
  extends: 'kmcgrady/es7'
};

Overriding rules

Customize any rule by overriding it in the .eslintrc.js file.

module.exports = {
  extends: 'kmcgrady/es6',

  rules: {
    'brace-style': [2, '1tbs', { allowSingleLine: true }],
  }
};

Environment configuration

Additionally, a project is linted by any of the following environment configurations.

Environment Module
browser kmcgrady/browser
Express kmcgrady/express
jQuery kmcgrady/jquery
Materialize kmcgrady/materialize
Mocha kmcgrady/mocha
Node.js kmcgrady/node
React kmcgrady/react

Add the following code to the .eslintrc.js file of an ECMAScript 6 project that's running in a browser.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6'
  ]
};

Add the following code to the .eslintrc.js file of an ECMAScript 6 project that's running in a browser and using jQuery.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6',
    'kmcgrady/jquery'
  ]
};

Add the following code to the .eslintrc.js file of an ECMAScript 6 project that's running in Node.js.

module.exports = {
  extends: [
    'kmcgrady/es6',
    'kmcgrady/node'
  ]
};

Add the following code to the .eslintrc.js file of an ECMAScript 6 project that's running in both a browser and Node.js as well as using React.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6',
    'kmcgrady/node',
    'kmcgrady/react'
  ]
};

NOTE: To include .jsx files in the linting, use the eslint . --ext .js,.jsx command.

Parsers options

Parser options, like support for ECMAScript 6 modules, can be specified in the .eslintrc.js file.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6',
    'kmcgrady/node',
    'kmcgrady/react'
  ],

  parserOptions: {
    sourceType: 'module'
  }
};

Alternative parsers

The default parser is Espree but alternative parsers, like babel-eslint, can be specified in the .eslintrc.js file.

module.exports = {
  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6',
    'kmcgrady/node',
    'kmcgrady/react'
  ],

  parser: 'babel-eslint'
};

ESLint environments

Additional ESLint environments, like worker, can also be specified in the .eslintrc.js file.

module.exports = {
  env: {
    worker: true
  },

  extends: [
    'kmcgrady/browser',
    'kmcgrady/es6',
    'kmcgrady/node',
    'kmcgrady/react'
  ]
};

Contributing

If you want to customize any of the rules for your own project, see the section on overriding rules to learn how.

Pull requests are very much welcome for the following.

Credits

Thanks to the Shopify team for publishing eslint-config-shopify under a permissive license.

Also, thanks to my colleagues and students at Galvanize for helping me with testing.

Package Sidebar

Install

npm i eslint-config-kmcgrady

Weekly Downloads

0

Version

10.0.4

License

MIT

Last publish

Collaborators

  • kmcgrady