From 0292629018e58701f270361590cc3874d2fbb9f9 Mon Sep 17 00:00:00 2001 From: Luke Brobbin Date: Mon, 1 Apr 2019 20:50:47 +0100 Subject: [PATCH 1/6] Updated es-lint docs to instruct how to install eslint-config-react-app --- docs/docs/eslint.md | 65 ++++++++------------------------------------- 1 file changed, 11 insertions(+), 54 deletions(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index b53fca120d583..b26d3a0093f97 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -8,17 +8,17 @@ 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 designed to be used with React applications. 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 and necessary dependencies. ```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 +# Install install the necessary ESLint dependencies +npm install --save-dev eslint-config-react-app babel-eslint@9.x +eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x +eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x + ``` 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. @@ -33,57 +33,14 @@ touch .eslintrc.js ### 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. +We recommend copying the following .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. ```js:title=.eslintrc.js module.exports = { - extends: ["standard"], - plugins: ["standard", "react"], - 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", - }, - ], - - // options to emulate prettier setup - semi: ["error", "never"], - "max-len": ["error", { code: 80 }], - "template-curly-spacing": ["error", "always"], - "arrow-parens": ["error", "as-needed"], - - // standard.js - "space-before-function-paren": [ - "error", - { - named: "always", - anonymous: "always", - asyncArrow: "always", + globals: { + graphql: true, + __PATH_PREFIX__: true, }, - ], - - // 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"]], - - // react plugin - options - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - }, - parser: "babel-eslint", - parserOptions: { - ecmaVersion: 8, // optional, recommended 6+ - }, + extends: `react-app`, } ``` From 34a3f158c1310e725928f101e9415161039a0390 Mon Sep 17 00:00:00 2001 From: Luke Brobbin Date: Mon, 1 Apr 2019 21:28:14 +0100 Subject: [PATCH 2/6] Added escape character to satisfy lint --- docs/docs/eslint.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index b26d3a0093f97..b3a4ce33c03a7 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -15,9 +15,9 @@ Here we will explore an ESLint configuration designed to be used with React appl npm rm prettier # Install install the necessary ESLint dependencies -npm install --save-dev eslint-config-react-app babel-eslint@9.x -eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x -eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x +npm install --save-dev eslint-config-react-app babel-eslint@9.x \ +eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x \ +eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x ``` @@ -37,10 +37,10 @@ We recommend copying the following .eslintrc.js content below to your newly crea ```js:title=.eslintrc.js module.exports = { - globals: { - graphql: true, - __PATH_PREFIX__: true, - }, - extends: `react-app`, + globals: { + graphql: true, + __PATH_PREFIX__: true, + }, + extends: `react-app`, } ``` From 4bd1e5d02f4094f97c105f6260b1fca42c268a99 Mon Sep 17 00:00:00 2001 From: Luke Brobbin Date: Mon, 1 Apr 2019 22:07:47 +0100 Subject: [PATCH 3/6] Removed docs to remove Prettier, as well as adding additional notes about es lint config --- docs/docs/eslint.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index b3a4ce33c03a7..ba8dc60b901ec 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -8,11 +8,9 @@ Gatsby ships with Prettier, which is a simple, opinionated code _formatter_. [ES ## How to use ESLint -Here we will explore an ESLint configuration designed to be used with React applications. 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 and necessary dependencies. +Here we will explore an ESLint configuration designed to be used with React applications. 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 necessary dependencies. ```shell -# Remove the Prettier package -npm rm prettier # Install install the necessary ESLint dependencies npm install --save-dev eslint-config-react-app babel-eslint@9.x \ @@ -21,19 +19,16 @@ eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x ``` -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, create a new file named `.eslintrc.js` using the command below. ```shell -# Remove the Prettier config file -rm .prettierrc - # Create a config file for ESLint touch .eslintrc.js ``` ### Configuring ESLint -We recommend copying the following .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. +The snippet below mimics the default ESLint config Gatsby ships with. We recommend copying the content 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. ```js:title=.eslintrc.js module.exports = { From 05e0bd49c9268959ffaf6ef195d4d6e53a746e13 Mon Sep 17 00:00:00 2001 From: Luke Brobbin Date: Mon, 1 Apr 2019 22:17:04 +0100 Subject: [PATCH 4/6] Added link to full Gastby es lint config file --- docs/docs/eslint.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index ba8dc60b901ec..dcf1146946c7f 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -28,7 +28,7 @@ touch .eslintrc.js ### Configuring ESLint -The snippet below mimics the default ESLint config Gatsby ships with. We recommend copying the content 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. +The snippet below mimics the [default ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.json) Gatsby ships with . We recommend copying the content 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. ```js:title=.eslintrc.js module.exports = { From 2308577a0e3ae8d6b5b4fd3d7fb3976c9e44735e Mon Sep 17 00:00:00 2001 From: Luke Brobbin Date: Mon, 1 Apr 2019 22:37:39 +0100 Subject: [PATCH 5/6] Removed whitespace before full stop --- docs/docs/eslint.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index dcf1146946c7f..37d97c0101b9c 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -28,7 +28,7 @@ touch .eslintrc.js ### Configuring ESLint -The snippet below mimics the [default ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.json) Gatsby ships with . We recommend copying the content 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. +The snippet below mimics the [default ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.json) Gatsby ships with. We recommend copying the content 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. ```js:title=.eslintrc.js module.exports = { From 3fbdc27464fbdacede36e5b767aa3b546e5837c8 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 1 Apr 2019 18:03:29 -0700 Subject: [PATCH 6/6] Update the copy to remove mentions of Prettier --- docs/docs/eslint.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/docs/eslint.md b/docs/docs/eslint.md index 37d97c0101b9c..25fea3681c70d 100644 --- a/docs/docs/eslint.md +++ b/docs/docs/eslint.md @@ -4,22 +4,23 @@ title: ESLint ## Why use ESLint -Gatsby ships with Prettier, which is a simple, opinionated code _formatter_. [ESLint](https://eslint.org) can be both a _linter_ and _formatter_, meaning you can use it to check for syntactical errors as well as formatting. Prettier will work for most sites, however if you'd like to add linting capabilities _and_ highly-configurable formatting you should implement ESLint into your Gatsby project. +ESLint is an open source JavaScript linting utility. Code linting is a type of static analysis that is frequently used to find problematic patterns. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process. + +JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. ## How to use ESLint -Here we will explore an ESLint configuration designed to be used with React applications. 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 necessary dependencies. +Gatsby ships with a built-in [ESLint](https://eslint.org) setup. For _most_ users, our built-in ESlint setup is all you need. If you know however that you'd like to customize your ESlint config e.g. your company has their own custom ESlint setup, this shows how this can be done. -```shell +We'll replicate (mostly) the [ESlint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.json) so you can then add additional presets, plugins, and rules. -# Install install the necessary ESLint dependencies -npm install --save-dev eslint-config-react-app babel-eslint@9.x \ -eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x \ -eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x +```shell +# First install the necessary ESLint dependencies +npm install --save-dev eslint-config-react-app ``` -Now that we have our packages installed, create a new file named `.eslintrc.js` using the command below. +Now that we have our packages installed, create a new file at the root of the site named `.eslintrc.js` using the command below. ```shell # Create a config file for ESLint @@ -28,7 +29,7 @@ touch .eslintrc.js ### Configuring ESLint -The snippet below mimics the [default ESLint config](https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.json) Gatsby ships with. We recommend copying the content 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. +Copy the snippet below to the newly created `.eslintrc.js` file. Then add additional presets, plugins, and rules as desired. ```js:title=.eslintrc.js module.exports = {