Traitify's Javascript Style Guide

Note: This guide just outlines the differences from Airbnb's Guide

Rules

• arrow-parens

  "arrow-parens": ["error", "always"]

  Consistency

• babel/object-curly-spacing

  "babel/object-curly-spacing": "error"

  Replace non-babel version

• class-methods-use-this

  "class-methods-use-this": "off"

  Allows methods to be overridden

• comma-dangle

  "comma-dangle": ["error", "never"]

  Unnecessary

• consistent-return

  "consistent-return": "off"

  Makes it hard to return early for conditionals

• func-names

  "func-names": "off"

  Unnecessary and unused with arrow functions

• jsx-a11y/label-has-for

  Deprecated

  "jsx-a11y/label-has-for": ["error", {
    components: [],
    required: {
      some: ["nesting", "id"],
    },
    allowChildren: false,
  }]

  Unnecessary to have nesting for both

• keyword-spacing

  "keyword-spacing": ["error", {
    before: false,
    after: false,
    overrides: {
      as: {before: true, after: true},
      case: {before: true, after: true},
      catch: {before: true},
      const: {before: true, after: true},
      default: {before: true, after: true},
      else: {before: true, after: true},
      export: {before: true, after: true},
      from: {before: true, after: true},
      import: {before: true, after: true},
      let: {before: true, after: true},
      return: {before: true, after: true},
      this: {before: true, after: true},
      try: {before: true, after: true}
    }
  }]
  

  Whitespace - Preference

• lines-between-class-members

  "lines-between-class-members": ["error", "never"]

  Whitespace - Preference

• no-else-return

  "no-else-return": "off"

  Allows more functional styles

• no-multiple-empty-lines

  "no-multiple-empty-lines": ["error", {max: 1, maxBOF: 0, maxEOF: 0}]

  Little stricter

• no-underscore-dangle

  "no-underscore-dangle": "off"

  Doesn't allow const key = _key.toLowerCase()

• no-unused-expressions

  "no-unused-expressions": ["error", {allowShortCircuit: true, allowTernary: true}]

  Short circuits and ternaries are efficient

• object-curly-newline

  "object-curly-newline": ["error", {multiline: true, consistent: true}]

  Too strict

• object-curly-spacing

  "object-curly-spacing": "off"

  Incompatible with babel/object-curly-spacing

• prefer-destructuring

  "prefer-destructuring": ["error", {
    VariableDeclarator: {
      array: false,
      object: true,
    },
    AssignmentExpression: {
      array: false,
      object: false,
    },
  }, {
    enforceForRenamedProperties: false,
  }]

  Assignment expression looks funky with parens

• quote-props

  "quote-props": ["error", "consistent-as-needed", {keywords: false}]

  Consistency

• quotes

  "quotes": ["error", "double", {allowTemplateLiterals: true}]

  Double quotes are life

• react/destructuring-assignment

  "react/destructuring-assignment": "off"

  Overactive and solved by prefer-destructuring

• react/jsx-boolean-value

  "react/jsx-boolean-value": ["error", "always"]

  Prefer explicit

• react/jsx-filename-extension

  "react/jsx-filename-extension": "off"

  Unnecessary

• react/jsx-one-expression-per-line

  "react/jsx-one-expression-per-line": "off"

  Creates unnecessary white space issues

• react/no-did-update-set-state

  "react/no-did-update-set-state": "off"

  Makes hacks needed for prop change triggers

• react/prefer-stateless-function

  "react/prefer-stateless-function": "off"

  Prefer React

• react/react-in-jsx-scope

  "react/react-in-jsx-scope": "off"

  Global React

• space-before-function-paren

  "space-before-function-paren": ["error", "never"]

  Whitespace - Preference

TODO

These rules are turned off temporarily

• react/no-unused-state

  "react/no-unused-state": "off"

  Remove when rule is fixed for setState function

• react/sort-comp

  "react/sort-comp": "off"

  Remove when airbnb includes componentDidCatch