eslint-config-111studio

Javascript

Install

To start linting your code, please make sure you have an ESLINT plugin install on your IDE. When starting a new react / react-native or node project create a .eslinrc file with the following content :

{
    "extends": "111studio"
}

Then install eslint dependencies running the following command:

yarn add --dev eslint-config-111studio

Browser Compatibility checks

The config uses Eslint Plugin Compat with the following target :

settings: {
   targets: ['chrome >= 50', 'firefox', 'edge', 'safari', 'ie']
}
 

ES6

Use as much ES6 as possible.

ES7

You may use ES7 parsingly for:

Decorators

class Person {
  @cantEnum
  get kidCount() { return this.children.length; }
}
 
function cantEnum(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}

Object spread properties

let info = {fname, lname, ...rest};
 
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

DO NOT USE ANY OTHER ES7 FEATURES YET

ESLINT Rules

Default ESLINT rules

• comma-dangle: disallow trailing commas (fixable)
• no-cond-assign: disallow assignment operators in conditional expressions
• no-console: warns when using console
• no-constant-condition: disallow constant expressions in conditions
• no-control-regex: disallow control characters in regular expressions
• no-debugger: disallow the use of debugger
• no-dupe-args: disallow duplicate arguments in function definitions
• no-dupe-keys: disallow duplicate keys in object literals
• no-duplicate-case: disallow duplicate case labels
• no-empty: disallow empty block statements
• no-empty-character-class: disallow empty character classes in regular expressions
• no-ex-assign: disallow reassigning exceptions in catch clauses
• no-extra-boolean-cast: disallow unnecessary boolean casts
• no-extra-parens: disallow unnecessary parentheses
• no-extra-semi: disallow unnecessary semicolons (fixable)
• no-func-assign: disallow reassigning function declarations
• no-inner-declarations: disallow function or var declarations in nested blocks
• no-invalid-regexp: disallow invalid regular expression strings in RegExp constructors
• no-irregular-whitespace: disallow irregular whitespace outside of strings and comments
• no-negated-in-lhs: disallow negating the left operand in in expressions
• no-obj-calls: disallow calling global object properties as functions
• no-prototype-builtins: Disallow use of Object.prototypes builtins directly
• no-regex-spaces: disallow multiple spaces in regular expression literals
• no-sparse-arrays: disallow sparse arrays
• no-unexpected-multiline: disallow confusing multiline expressions
• no-unreachable: disallow unreachable code after return, throw, continue, and break statements
• no-unsafe-finally: disallow control flow statements in finally blocks
• use-isnan: require calls to isNaN() when checking for NaN
• valid-jsdoc: enforce valid JSDoc comments
• valid-typeof: enforce comparing typeof expressions against valid strings
• no-case-declarations: disallow lexical declarations in case clauses
• no-empty-pattern: disallow empty destructuring patterns
• no-fallthrough: disallow fallthrough of case statements
• no-redeclare: disallow var redeclaration
• no-self-assign: disallow assignments where both sides are exactly the same
• no-delete-var: disallow deleting variables
• no-undef: disallow the use of undeclared variables unless mentioned in /*global */ comments
• no-unused-vars: disallow unused variables
• no-mixed-spaces-and-tabs: disallow mixed spaces and tabs for indentation
• constructor-super: require super() calls in constructors
• no-class-assign: disallow reassigning class members
• no-const-assign: disallow reassigning const variables
• no-dupe-class-members: disallow duplicate class members
• no-new-symbol: disallow new operators with the Symbol object
• no-this-before-super: disallow this/super before calling super() in constructors

Stylistic rules

• Indents using spaces.
• Indents size is set to 2.
• Switch - Case indents are set to 1.
• Semi colon: YES
• Single quotes only
• camelCase variables only

ES6 Rules

• prefer-template: require template literals instead of string concatenation
• no-var: require let or const instead of var

React - JSX rules

• no-deprecated: Prevent usage of deprecated methods
• no-did-mount-set-state: Prevent usage of setState in componentDidMount
• no-did-update-set-state: Prevent usage of setState in componentDidUpdate
• no-direct-mutation-state: Prevent direct mutation of this.state
• prefer-es6-class: Enforce ES5 or ES6 class for React Components
• prefer-stateless-function: Enforce stateless React Components to be written as a pure function
• prop-types: Prevent missing props validation in a React component definition
• react-in-jsx-scope: Prevent missing React when using JSX
• require-render-return: Enforce ES5 or ES6 class for returning value in render function
• self-closing-comp: Prevent extra closing tags for components without children
• sort-comp: Enforce component methods order (Check order in the eslint file)
• sort-prop-types: Enforce propTypes declarations alphabetical sorting
• wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)
• jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable)
• jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
• jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
• jsx-equals-spacing: Enforce or disallow spaces around equal signs in JSX attributes (fixable)
• jsx-first-prop-new-line: Enforce position of the first prop in JSX
• jsx-handler-names: Enforce event handler naming conventions in JSX
• jsx-indent: Validate JSX indentation
• jsx-indent-props: Validate props indentation in JSX (fixable)
• jsx-key: Validate JSX has key prop when in array or iterator
• jsx-max-props-per-line: Limit maximum of props on a single line in JSX
• jsx-no-bind: Prevent usage of .bind() and arrow functions in JSX props
• jsx-no-duplicate-props: Prevent duplicate props in JSX
• jsx-no-literals: Prevent usage of unwrapped JSX strings
• jsx-no-target-blank: Prevent usage of unsafe target='_blank'
• jsx-no-undef: Disallow undeclared variables in JSX
• jsx-pascal-case: Enforce PascalCase for user-defined JSX components
• jsx-sort-props: Enforce props alphabetical sorting
• jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
• jsx-uses-react: Prevent React to be incorrectly marked as unused
• jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused

TODO

• Specify flow type annotation style.
• Specify indentation for ternary operator in JSX expressions.