ReactSensei

Add Eslint, Stylelint and Prettier

May 03, 2020

Add eslint

  • Create eslintrc in the root of your project

.eslintrc

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "es5",
      // "bracketSpacing": false,
      "jsxBracketSameLine": true,
    }],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "comma-dangle": ["error", "only-multiline"],
    "react/no-danger": "off",
    "no-underscore-dangle": [0],
    "react/prop-types": 0,
    "react/jsx-boolean-value": 0,
    "no-console": 0,
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "to" ]
    }],
    "consistent-return": 0,
    "array-callback-return": 0,
  },
  "plugins": [
    "flowtype",
    "react",
    "jsx-a11y",
    "import",
    "prettier"
  ],
  "settings": {
    "ecmascript": 7,
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "modulesDirectories": ["node_modules"]
      }
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "mixpanel": true,
    "Raven": true,
    "isCallback": true,
    "returnsPromise": true,
    "webpackIsomorphicTools": true
  }
}

Add Prettier

.prettierrc

{
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Add stylelint

  • Create .stylelintrc.json in root of your project

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "plugins": [
		"stylelint-order"
	],
	"rules": {
		"order/order": [
			"custom-properties",
			"declarations"
		],
    "order/properties-order": [
      { "properties": [ "content", "quotes" ] },

      { "properties": [ "display", "visibility" ] },
      { "properties": [ "position", "z-index", "top", "right", "bottom", "left" ] },
      { "properties": [ "box-sizing" ] },
      { "properties": [ "flex", "flex-basis", "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "align-content", "align-items", "align-self", "justify-content", "order" ] },
      { "properties": [ "width", "min-width", "max-width", "height", "min-height", "max-height" ] },
      { "properties": [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left" ] },
      { "properties": [ "padding", "padding-top", "padding-right", "padding-bottom", "padding-left" ] },
      { "properties": [ "float", "clear" ] },
      { "properties": [ "overflow", "overflow-x", "overflow-y" ] },
      { "properties": [ "clip", "zoom" ] },
      { "properties": [ "columns", "column-gap", "column-fill", "column-rule", "column-span", "column-count", "column-width" ] },
      { "properties": [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ] },

      { "properties": [ "transform", "transform-origin", "transform-style", "backface-visibility", "perspective", "perspective-origin" ] },
      { "properties": [ "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay" ] },
      { "properties": [ "animation", "animation-name", "animation-duration", "animation-play-state", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction" ] },

      { "properties": [ "border", "border-top", "border-right", "border-bottom", "border-left", "border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width" ] },
      { "properties": [ "border-style", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style" ] },
      { "properties": [ "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius" ] },
      { "properties": [ "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color" ] },
      { "properties": [ "outline", "outline-color", "outline-offset", "outline-style", "outline-width" ] },
      { "properties": [ "stroke-width", "stroke-linecap", "stroke-dasharray", "stroke-dashoffset", "stroke" ] },

      { "properties": [ "opacity" ] },
      { "properties": [ "background", "background-color", "background-image", "background-repeat", "background-position", "background-size", "box-shadow", "fill" ] },

      { "properties": [ "color" ] },
      { "properties": [ "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-effect", "font-style", "font-variant", "font-weight" ] },
      { "properties": [ "font-emphasize", "font-emphasize-position", "font-emphasize-style" ] },
      { "properties": [ "letter-spacing", "line-height", "list-style", "word-spacing" ] },
      { "properties": [ "text-align", "text-align-last", "text-decoration", "text-indent", "text-justify", "text-overflow", "text-overflow-ellipsis", "text-overflow-mode", "text-rendering", "text-outline", "text-shadow", "text-transform", "text-wrap", "word-wrap", "word-break" ] },
      { "properties": [ "text-emphasis", "text-emphasis-color", "text-emphasis-style", "text-emphasis-position" ] },
      { "properties": [ "vertical-align", "white-space", "word-spacing", "hyphens" ] },
      { "properties": [ "src" ] },

      { "properties": [ "tab-size", "counter-reset", "counter-increment", "resize", "cursor", "pointer-events", "speak", "user-select", "nav-index", "nav-up", "nav-right", "nav-down", "nav-left" ] }
    ]
	}
}
  • Add these as your dev-dependencies

package.json

// MORE CODE

  "devDependencies": {
    "node-sass": "^4.14.0",
    "stylelint": "^13.2.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.0.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2"
  },

// MORE CODE

© 2020