Studio Meta ESLint Configurations

Set of ESLint configurations for multiple usages.

Installation

Install the package with NPM:

npm install --save-dev eslint prettier @studiometa/eslint-config

Usage

To use the basic configuration, you just have to install this package and reference it in your ESLint configuration file:

module.exports = {
  extends: '@studiometa/eslint-config',
};

If you have a legacy project with ES5 code, you can use the legacy configuration:

module.exports = {
  extends: '@studiometa/eslint-config/src/legacy',
};

Rules documentation

Find below some documentation on the rules this configuration extends. Some are best practices, some are more opinionated choices.

eslint:recommended

These rules report common problems we can encounter in JavaScript. The full list can be found in the ESLint documentation.

eslint-config-airbnb-base

People at Airbnb have written a detailed documentation of their JavaScript style guide and have published ESLint configurations to enforce it.

Custom rules configurations

Below are some rules specific to this configuration.

Best practices

Some rules considered as best practices.

Rule	Configuration
curly	['error', 'all']
dot-notation	'warn'
eqeqeq	['warn', 'always']
no-alert	'error'
no-empty-function	'error'
no-eval	'error'
no-implicit-coercion	['error', { allow: ['!!'] }]
no-implicit-globals	'error'
no-multi-spaces	'warn'
no-param-reassign	['warn', { props: false }]
no-useless-concat	'warn'
no-useless-return	'warn'
strict	['error', 'function']
vars-on-top	'error'
wrap-iife	['error', 'any']
yoda	['error', 'never']

Possible errors

These rules help developpers avoir some possible errors.

Rule	Configuration
no-console	process.env.NODE_ENV !== 'production' ? 'off' : 'error'
no-debugger	process.env.NODE_ENV !== 'production' ? 'off' : 'error'

Stylistic issues

Rule	Configuration
array-bracket-spacing	[ 'warn', 'always', { arraysInArrays: false, objectsInArrays: false }, ]
camelcase	['warn', { properties: 'always' }]
comma-dangle	['warn', 'always-multiline']
comma-spacing	['warn', { before: false, after: true }]
indent	['warn', 2]
max-len	[ 'warn', { code: 80, ignoreUrls: true, ignoreRegExpLiterals: true }, ]
no-multi-assign	'warn'
no-trailing-spaces	'warn'
no-unneeded-ternary	'warn'
quotes	['warn', 'single']
require-jsdoc	[ 'warn', { require: { FunctionDeclaration: true, MethodDefinition: true, ClassDeclaration: true, ArrowFunctionExpression: false, FunctionExpression: false, }, }, ]
semi	['warn', 'always']
semi-style	['warn', 'last']
space-before-blocks	'warn'

ES6

Rule	Configuration
arrow-spacing	['warn', { before: true, after: true }]
no-var	'error'
object-shorthand	'error'
prefer-const	'error'
prefer-template	'error'
rest-spread-spacing	['warn', 'never']
template-curly-spacing	['warn', 'never']

Overrides

Overrides are used to define specific configuration for sets of limited file globs.

Build files

Used for: webpack.config.js, gulpfile.js, nuxt.config.js, webpack.mix.js

Rule	Configuration
global-require	off

Prettier

Used for: *.js

The plugin:prettier/recommended plugin turns off all ESLint stylistic rules that might conflict with Prettier. You can find out more on the project's repository. |

Vue

Used for: *.vue

For all *.vue files, we use the official ESLint plugin created by Vue.js. The following rules are also specified:

Rule	Configuration
code>vue/html-closing-bracket-newline	[ 'error', { singleline: 'never', multiline: 'never', }, ]
indent	'off'
vue/script-indent	[ 'error', 2, { baseIndent: 1, switchCase: 1, }, ]