eslint-config-ryansobol

Ryan Sobol'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 || >= 6.0.0

Global usage

Install the package globally.

npm install -g eslint eslint-config-ryansobol

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: [
    'ryansobol/browser',
    'ryansobol/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-ryansobol

Create a .eslintrc.js configuration file.

touch .eslintrc.js

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

module.exports = {
  extends: [
    'ryansobol/browser',
    'ryansobol/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	ryansobol/es5
ECMAScript 6	ryansobol/es6
ECMAScript 7	ryansobol/es7
ECMAScript 8	ryansobol/es8

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

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

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

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

Overriding rules

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

module.exports = {
  extends: 'ryansobol/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	ryansobol/browser
Express	ryansobol/express
jQuery	ryansobol/jquery
Materialize	ryansobol/materialize
Mocha	ryansobol/mocha
Node.js	ryansobol/node
React	ryansobol/react

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

module.exports = {
  extends: [
    'ryansobol/browser',
    'ryansobol/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: [
    'ryansobol/browser',
    'ryansobol/es6',
    'ryansobol/jquery'
  ]
};

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

module.exports = {
  extends: [
    'ryansobol/es6',
    'ryansobol/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: [
    'ryansobol/browser',
    'ryansobol/es6',
    'ryansobol/node',
    'ryansobol/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: [
    'ryansobol/browser',
    'ryansobol/es6',
    'ryansobol/node',
    'ryansobol/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: [
    'ryansobol/browser',
    'ryansobol/es6',
    'ryansobol/node',
    'ryansobol/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: [
    'ryansobol/browser',
    'ryansobol/es6',
    'ryansobol/node',
    'ryansobol/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.

• Fixing bugs
• Adding tests
• Writing documentation
• Adding rules for another plugin (e.g. eslint-plugin-angular)
• Changing rules that don't follow the project's philosophy

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.