chore(docs): update ESLint with Prettier, react, jsx-a11y

docs/docs/eslint.md

@@ -8,20 +8,18 @@ Gatsby ships with Prettier, which is a simple, opinionated code _formatter_. [ES
 
 ## How to use ESLint
 
-Here we will explore an ESLint configuration that acts like Prettier by adhering to [Standard.js](https://standardjs.com) rules. ESLint might seem intimidating at first, however it is aimed at providing a number of configurable options to make your code format fit your style. Run the following commands to remove Prettier and install ESLint.
+Here we will explore an ESLint configuration that will still use Prettier for formatting, but also provide linting rules recommended by the plugins. ESLint might seem intimidating at first, however it is aimed at providing a number of configurable options to make your code format fit your style. Run the following commands to install ESLint and the packages necessary for Prettier integration.
 
 ```shell
-# Remove the Prettier package
-npm rm prettier
-
 # Install ESLint and its packages
 npm install --save-dev eslint babel-eslint \
-  eslint-config-standard eslint-plugin-node \
-  eslint-plugin-standard eslint-plugin-react \
-  eslint-plugin-import eslint-plugin-promise
+  eslint-plugin-prettier eslint-config-prettier \
+  eslint-plugin-react eslint-plugin-jsx-a11y \
+  eslint-plugin-import eslint-plugin-promise \
+  eslint-plugin-node
 ```
 
-Now that we have our packages installed, remove `.prettierrc` from the root of your new Gatsby project and create a new file named `.eslintrc.js` using the commands below.
+Now that we have our packages installed, in the root of your project remove the existing Prettier configuration and create a new file named `.eslintrc.js` using the commands below.
 
 ```shell
 # Remove the Prettier config file
@@ -31,59 +29,157 @@ rm .prettierrc
 touch .eslintrc.js
 ```
 
-### Configuring ESLint
+## Configuring ESLint
 
-We recommend copying our default .eslintrc.js content below to your newly created `.eslintrc.js` file and modifying it per your needs. Reference ESLint's [rules documentation](https://eslint.org/docs/rules/) for more options.
+To get started configuring ESLint we recommend copying our default ESLint content below to your newly created `.eslintrc.js` file and modifying it per your needs. Reference ESLint's [rules documentation](https://eslint.org/docs/rules/) for more options. Sample rules from the plugins are also provided to demonstrate their capabilities.
 
 ```js:title=.eslintrc.js
 module.exports = {
-  extends: ["standard"],
-  plugins: ["standard", "react"],
+  extends: [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react",
+  ],
+  plugins: ["prettier", "react", "jsx-a11y"],
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaVersion: 8,
+    ecmaFeatures: {
+      impliedStrict: true,
+      classes: true,
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    es6: true,
+  },
+  settings: {
+    react: {
+      version: "latest",
+    },
+  },
   rules: {
-    "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",
-      },
-    ],
+    // https://github.com/yannickcr/eslint-plugin-react#configuration
+    "react/jsx-filename-extension": ["warn", { extensions: [".js", ".jsx"] }],
+    "react/jsx-uses-react": "error",
+    "react/react-in-jsx-scope": "error",
+    "react/no-deprecated": "error",
+    "react/prefer-stateless-function": "warn",
 
-    // options to emulate prettier setup
-    semi: ["error", "never"],
-    "max-len": ["error", { code: 80 }],
-    "template-curly-spacing": ["error", "always"],
-    "arrow-parens": ["error", "as-needed"],
+    // https://www.npmjs.com/package/eslint-plugin-jsx-a11y#supported-rules
+    "jsx-a11y/accessible-emoji": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/alt-text": "warn",
 
-    // standard.js
-    "space-before-function-paren": [
+    // prettier - gatsby-starter-default options
+    "prettier/prettier": [
       "error",
       {
-        named: "always",
-        anonymous: "always",
-        asyncArrow: "always",
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
+        semi: false,
+        singleQuote: false,
+        endOfLine: "lf",
+        jsxSingleQuote: false,
+        trailingComma: "es5",
+        bracketSpacing: true,
+        jsxBracketSameLine: false,
+        arrowParens: "avoid",
       },
     ],
+  },
+}
+```
 
-    // standard plugin - options
-    "standard/object-curly-even-spacing": ["error", "either"],
-    "standard/array-bracket-even-spacing": ["error", "either"],
-    "standard/computed-property-even-spacing": ["error", "even"],
-    "standard/no-callback-literal": ["error", ["cb", "callback"]],
+### Understanding the Plugins
 
-    // react plugin - options
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-  },
-  parser: "babel-eslint",
-  parserOptions: {
-    ecmaVersion: 8, // optional, recommended 6+
-  },
+In the example configuration file above we explored a few plugins, as well as _extending_ their recommended rule sets. Now we will discover the purpose of including these plugins and their value.
+
+#### eslint-plugin-react
+
+The React plugin assists your development experience with Gatsby by helping you remember to validate props, include default props, importing React any time JSX is used, and enforce handler naming convention (e.g. `handleClick()`). It requires a version to be specified, therefore can even prevent usage of deprecated implementations. Since Gatsby development utilizes React this is an excellent addition to accelerate your experience by bypassing errors before they're made.
+
+#### eslint-plugin-jsx-a11y
+
+> In short, A11Y means “accessibility”
+
+The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) tool is an accessibility linter for your code, helping you develop more inclusive Gatsby projects. This plugin encourages you to include alternative text for image tags, validates [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) props, and eliminates redundant role properties, among other things.
+
+Accessibility is often overlooked, and by developing with it in mind we can provide a phenomenal user experience. Including this plugin and its recommended rule set reduces the time required to implement accessibility by reminding you throughout development.
+
+### Running ESLint with a Script
+
+Now we will begin by adding a two `lint` scripts in your project's `package.json` file as shown below:
+
+```json:title=package.json
+{
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
+    "format": "prettier --write src/**/*.{js,jsx}",
+    "lint": "eslint --config .eslintrc.js src",
+    "lint:fix": "eslint --config .eslintrc.js --fix src"
+  }
+}
+```
+
+After the scripts are set up, you can try them out! It is optional to remove the `format` script, now that Prettier will be run with ESLint.
+
+- `lint` - ESLint will identify warnings and errors
+- `lint:fix`
+  - Prettier will format your code
+  - ESLint will format any fixable warnings or errors, along with custom rules outside of Prettier
+
+Rules in our new ESLint configuration have been set to `warn` or `error`, which can be very helpful for ensuring quality code adding [gatsby-plugin-eslint](https://www.gatsbyjs.org/packages/gatsby-plugin-eslint/?=eslint). This package will add ESLint capabilities to the Gatsby development process, thus providing all of the linting capabilities described in the scripts above while your building your new project.
+
+### Integrating ESLint with VS Code
+
+Adding ESLint to VS Code needs a little more configuring unlike the Prettier extension [as described in the Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-zero/#set-up-a-code-editor). Refer to the following steps to add and configure ESLint:
+
+1. Open the extensions view on VS Code (View => Extensions).
+2. Search for “ESLint”.
+3. Click “Install”
+4. Open your VS Code settings as JSON (CMD/Ctrl+Shift+P => "Preferences: Open Settings (JSON)")
+5. Input the following, we will cover:
+6. Disabling VS Code's built-in formatting
+7. Enabling ESLint validation
+8. Enabling ESLint auto-fix on save
+
+```json:title=settings.json
+{
+  // ...
+  "editor.formatOnSave": false,
+  "eslint.autoFixOnSave": true,
+  "eslint.validate": ["javascript", "javascriptreact"]
+  // ...
 }
 ```
+
+It is important to note that by disabling VS Code's built-in formatting, HTML files and alike will not be formatted. But not to worry, you can re-enable settings per language:
+
+```json:title=settings.json
+{
+  // ...
+  "[html]": {
+    "editor.formatOnSave": true
+  }
+  // ...
+}
+```
+
+## Conclusion
+
+Now you have a powerful environment formatting and highlighting mistakes as you go! To summarize, in this section we learned to:
+
+- Install ESLint and integrate with Prettier
+- Configure ESLint
+- Use scripts to run linting and fixing/formatting
+- Integrate with VS Code and format on save
+- Disable VS Code's built-in formatting
+- Enabling VS Code's built-in formatting per language