indexzero
11/2/2016 - 1:38 AM

Replacing JSCS with ESlint

Replacing JSCS with ESlint

ESLint support for autofix has improved considerably in the last 12 months. With jscs being formally deprecated for some time now and the notable problems with JSX autofix interop the time has come to drop it. Below you will find an as close as possible mapping of jscs options to eslint.

This is not a complete file including all the various exceptions and options that eslint needs to mimic the current jscs behavior, but it should illustrate that it is possible and worth pursuing.

{
  "esnext": true,
  "plugins": ["jscs-jsx-rules"],
  "requireCurlyBraces": ["else","for","while","do","try","catch","switch"],
  "requireSpaceBeforeKeywords": ["else","while","catch"],  // keyword-spacing
  "requireSpaceAfterKeywords": true,                       // keyword-spacing
  "disallowSpacesInsideJsxExpressionContainers": false,    // react/jsx-curly-spacing
  "requireSpacesInsideJsxExpressionContainers": true,      // react/jsx-curly-spacing
  "requireSpaceBeforeBlockStatements": true,       // space-before-blocks
  "requireParenthesesAroundIIFE": true,            // wrap-iife
  "requireSpacesInConditionalExpression": true,    // space-infix-ops
  "requireSpacesInAnonymousFunctionExpression": {  // --
    "beforeOpeningRoundBrace": true,               // space-before-function-paren 
    "beforeOpeningCurlyBrace": true,               // space-before-blocks
    "allExcept": ["shorthand"]                     // space-before-function-paren
  },
  "requireSpacesInNamedFunctionExpression": {       // space-before-blocks
    "beforeOpeningCurlyBrace": true                 // ^
  },                                                // ^
  "disallowSpacesInNamedFunctionExpression": {      // space-before-function-paren
    "beforeOpeningRoundBrace": true                 // ^
  },                                                // ^
  "requireSpacesInFunctionDeclaration": {           // space-before-blocks
    "beforeOpeningCurlyBrace": true                 // ^
  },                                                // ^
  "disallowSpacesInFunctionDeclaration": {          // space-before-function-paren
    "beforeOpeningRoundBrace": true                 // ^
  },                                                // ^
  "disallowSpacesInCallExpression": true,              // func-call-spacing: [2, "never"]  
  "requireBlocksOnNewline": 1,                         // brace-style: [2, "1tbs", { "allowSingleLine": true }] 
  "disallowKeywordsOnNewLine": ["catch","else"],       // brace-style
  "requireSpacesInsideObjectBrackets": "allButNested", // object-curly-spacing
  "disallowSpacesInsideArrayBrackets": "all",          // array-bracket-spacing
  "disallowSpacesInsideParentheses": true,             // space-in-parens
  "validateParameterSeparator": ", ",               // comma-spacing
  "requireDotNotation": true,                       // dot-notation
  "disallowSpaceAfterObjectKeys": true,             // key-spacing
  "requireSpaceBeforeObjectValues": true,           // object-curly-spacing
  "requireCommaBeforeLineBreak": true,              // comma-style
  "disallowSpaceAfterPrefixUnaryOperators": true,   // space-unary-ops, space-infix-ops
  "disallowSpaceBeforePostfixUnaryOperators": true, // space-unary-ops, space-infix-ops
  "requireSpaceBeforeBinaryOperators": true,        // space-unary-ops, space-infix-ops
  "requireSpaceAfterBinaryOperators": true,         // space-unary-ops, space-infix-ops
  "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties", // camelcaase
  "requireCapitalizedConstructors": true,       // NOFIX – new-cap
  "disallowKeywords": ["with"],                 // NOFIX – no-with
  "disallowMultipleLineStrings": true,          // NOFIX – no-multi-str
  "disallowMixedSpacesAndTabs": true,           // NOFIX – no-mixed-spaces-and-tabs
  "disallowTrailingWhitespace": true,           // no-trailing-spaces
  "requireLineFeedAtFileEnd": true,             // eol-last
  "disallowTrailingComma": true,                // comma-dangle
  "validateLineBreaks": "LF",                   // linebreak-style
  "validateIndentation": 2,                     // indent
  "requireSpaceAfterLineComment": true,         // spaced-comment
  "disallowYodaConditions": true,               // yoda
  "disallowNewlineBeforeBlockStatements": true, // ???
  "validateQuoteMarks": {                       // quotes, jsx-quotes, quote-props
    "mark": "'",                                // ^
    "escape": true                              // ^
  }
}

NOTES

space-before-function-paren: [2, {"anonymous": "always", "named": "never", "asyncArrow": "always"}]

ADDITIONAL FIXABLES

block-spacing
no-lonely-if
padded-blocks
dot-location
generator-star-spacing
arrow-spacing
arrow-parens
arrow-body-style
template-curly-spacing
no-useless-computed-key
react/jsx-equals-spacing
react/jsx-indent-props