Add content to eslint.md

[josefaidt]

Includes: why use ESLint, how to use it, and starter file

I used Yarn in the example, however I can switch this to an npm command (after finding issue #4514). Gatsby documentation is back & forth with yarn/npm from what I've noticed so I wasn't sure what I should use. Please consider defining the preferred package manager in the Gatsby Style Guide

Also, the L in ESLint is not capitalized on the sidebar

[jlengstorf]

This looks great! I'm going to let @shannonbux give this the 👍 👎, since she owns docs.

I had one comment as well. Thanks so much for contributing!

[jlengstorf]

I'd love to see the deletion and creation of files put into the instructions above or into a separate code block, e.g.:

# Remove the Prettier config file
rm .prettierrc

# Create a config file for ESLint
touch .eslintrc.js

It's a little easier to catch than in long form.

[josefaidt]

Updated 😀

[LekoArts]

I used Yarn in the example, however I can switch this to an npm command (after finding issue #4514). Gatsby documentation is back & forth with yarn/npm from what I've noticed so I wasn't sure what I should use.

Where did you saw a back & forth? I went through all docs yesterday (quickly) and mostly if not only saw npm. yarn is used for the Contribution docs as it’s necessary.
Therefore npm is the appropriate choice as I see it.

[LekoArts]

Sidenote: You can use ESLint with prettier as a formatter (as a plugin) and ESLint is only the linter then. I use it like that:
https://github.com/LeKoArts/portfolio/blob/feature/prismic/.eslintrc

[josefaidt]

@LekoArts I saw it in the Contribution docs. I could've sworn I saw it elsewhere previously, but when I went to look it was only the Contribution docs. I did go back and change it to npm, though.

Sidenote: You can use ESLint with prettier as a formatter (as a plugin) and ESLint is only the linter then. I use it like that:

I intentionally left it out of the configuration to fully demonstrate ESLint's power as a alternative package, but I could change it if yall prefer the Prettier integration in the starter config. The below piece is the primary reason I migrated away from Prettier in my personal projects:

    // standard.js
    'space-before-function-paren': ['error', {
      'named': 'always',
      'anonymous': 'always',
      'asyncArrow': 'always'
    }],

The configuration I committed is based on my current config so it is definitely opinionated, and performs a few extra formatting pieces Prettier does not perform.

If we want to move to the Prettier integration to present a smaller, more concise starter file for users that's analogous to the default-starter's initial Prettier setup I'm all for it.

[pieh]

Maybe it's worth to mention that in gatsby v2 there is basic eslint ( https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.js ) running as part of gatsby develop and it gets disabled when user provide their own eslint config

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 301 to 304 in 0fc973c

	// if no local eslint config, then add gatsby config
	if (!hasLocalEslint(program.directory)) {
	configRules = configRules.concat([rules.eslint(schema)])
	}

(if someone provide eslint rules we assume he will take care of linting)

[josefaidt]

@pieh That's super interesting, I did not realize that. I noticed it also has a GraphQL plugin. Do you know if the user provides an ESLint dotfile, will the provided dotfile be rolled into the user dotfile? It doesn't look like it does, therefore I should probably add that to my starter file. Any thoughts?

[pieh]

Do you know if the user provides an ESLint dotfile, will the provided dotfile be rolled into the user dotfile?

I don't understand what do you mean (too many user dotfiles :D)

[shannonbux]

This looks good to me--just address the couple comments I left and any others left in the conversation about this doc! Thanks for picking this up, @josefaidt!

[shannonbux]

@DSchau recently implemented a way to add the title of a file to the top of a code snippet. You would write it as follows:

```js:title=.eslintrc.js

[shannonbux]

This paragraph mentions "new" Gatsby project in the last sentence. Is there significance to that? Do you have to install ESLint at the beginning of a project?

[DSchau]

@shannonbux good catch! Want to just remove new here!

[josefaidt]

@pieh I misread that and the code at first I think, ignore me 😬
@shannonbux anytime, happy to contribute!

[shannonbux]

Thanks @josefaidt! Looks great and I added the capitalization to the doc-links.yml file for the sidebar 👍

[Siyfion]

@josefaidt Looks great, but just to add to this; if the example you provided at the bottom looks a little intimidating to anyone you can simplify it massively and still have Standard JS, Prettier and all the "recommended" ESLint settings, with this:

{
  "parser": "babel-eslint",
  "plugins": [
    "prettier",
    "react",
    "standard"
  ],
  "extends": [
    "standard",
    "plugin:react/recommended",
    "prettier",
    "prettier/react",
    "prettier/standard"
  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "16.4"
    }
  }
}

Then you simply keep your .prettierrc file and away you go!

Note: "jest": true, is only needed if you're doing testing with jest!