DevlogBoard GamesSlotsVlogAbout

ESLint in VS Code for Gatsby 5 blog

Published:
Published:

Table of contents

  1. Check that you have ESLint extension installed.
  2. (Optional) While you are playing with linters and VS Code extensions, you can think about a linter for Markdown files.
  3. Install required npm development packages
  4. Edit the config file

npm packages

  • @babel/eslint-parser (the parser)
  • eslint (the linter itself)
  • eslint-config-react-app (ESLint configuration used by Create React App)
  • eslint-plugin-import (little addon just for import statements)
  • eslint-plugin-jsx-a11y (for amazing SEO results)
  • eslint-plugin-react (for JSX)

Install them with yarn add --dev <packages>

ESLint config

My .eslintrc.js

module.exports = {
  extends: [
    require.resolve(`eslint-config-react-app`),
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
  ],
  plugins: ["react", "jsx-a11y"],
  rules: {
    // react plugin - options
    "react/jsx-indent": [2, 2, {indentLogicalExpressions: true}],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    
    "prefer-const": "error", // ?
    "no-var": "error", // optional, recommended when using es6+
    "no-unused-vars": 1, // recommended
    "arrow-spacing": ["error", { before: true, after: true }], // recommended
    indent: ["error", 2],
    "comma-dangle": [
      "error",
      {
        objects: "only-multiline",
        arrays: "only-multiline",
        imports: "never",
        exports: "never",
        functions: "never",
      },
    ],

    // options to emulate prettier setup
    // semi: ["warn", "never"],
    // quotes: ["warn", "double",  { "allowTemplateLiterals": true }],
    "max-len": ["error", { code: 160 }],
    "template-curly-spacing": ["error", "never"],
    "arrow-parens": ["error", "as-needed"],

    // standard.js
    "space-before-function-paren": [
      "error",
      {
        named: "never",
        anonymous: "never",
        asyncArrow: "always",
      },
    ],
  },
  parser: require.resolve(`@babel/eslint-parser`),
  parserOptions: {
    requireConfigFile: false,
    ecmaVersion: "latest",
    sourceType: `module`,
    ecmaFeatures: {
      jsx: true,
    },
  },
}

Notes

  • I made it working without gatsby-plugin-eslint. If I understand it correctly that plugin makes the build fail if you have any linter errors.
  • To disable a rule globally set it to "off" in .eslintrc.js file:
module.exports = {
  rules: {
    "react/prop-types": "off",
  }
}

Rate this page