feat(gatsby-plugin-typescript): Supports linting

[ThewBear]

Description

Splitted from #16168 (comment)

eslint-config-react-app has supported linting Typescript since version 3.0.0 (facebook/create-react-app#6513).

It would be great if Gatsby also supports this.

Related Issues

#15976
#16168

[pieh]

Hey @ThewBear this is looking great. Please merge master branch in (failing node 12 test was a problem some time ago in master and was fixed there, and it's not related to your code change)

[pieh]

In core we do check if user has their own eslint config before adding eslint rule (which is opinionated, so this is a way for users to disable builtin one if they have their own config) -

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

Lines 305 to 307 in 3c8623c

	if (!hasLocalEslint(program.directory)) {
	configRules = configRules.concat([rules.eslint(schema)])
	}

And addition to that we only apply this loader in gatsby develop when building browser bundle.

In current implementation in this PR this part is missing, and it's not obvious how we could re-implement it (as hasLocalEslint function is internal one and not public one), but maybe we could examine config that gatsby build so far, and see if there is rule for eslint-loader to determine if typescript plugin should add config as well? This should cover both reservations?

Some quick code that could be clean up to check it:

const hasBuiltInEslintRule = webpackConfig => {
  try {
    return webpackConfig.module.rules.some(rule => {
      if (rule.enforce === `pre`) {
        return rule.use.some(use => {
          return /eslint-loader/.test(use.loader)
        })
      }
      return false
    })
  } catch {
    return false
  }
}

exports.onCreateWebpackConfig = ({ stage, getConfig }) => {
  console.log(`stage ${stage}: ${hasBuiltInEslintRule(getConfig())}`)
}

will output:

• in gatsby develop if there is no eslint config in root of directory

  stage develop-html: false
  stage develop: true
  

• in gatsby develop if there is eslint config in root of directory

  stage develop-html: false
  stage develop: false
  

• in gatsby build (regardless of existance of eslint config file):

  stage build-javascript: false
  stage build: true
  

So this is something you could use to determine wether to add eslint rule for .tsx? files or not

[pieh]

All right, I was testing it and few notes:

We do need to add typescript as peerDependency to gatsby-plugin-typescript, update plugin readme so users can copy install command to install it too and in code do some conditional check if typescript is installed before adding the rule (potentially warn users that typescript is not installed and builtin eslint won't be working on typescript files).

Pretty confusingly, you can use gatsby-plugin-typescript without typescript being installed right now (as the way it's implemented it's using babel plugin and not actual typescript to compile the code).

[LekoArts]

@ThewBear Hey 👋 Do you have time to address the requested changes?

[LekoArts]

@ThewBear Hey 👋 Kind reminder of the above ping 😊

[ThewBear]

@LekoArts Will address this weekend.

[wardpeet]

Nice one! This is great for typescript users. Could you perhaps add typescript as an optional dependency.

I've added 2 comments about variable names but besides that this is 👌

[wardpeet]

Tested and works! :) Thanks for adding this one and for your patience!

[wardpeet]

Fixed in [email protected]

[pvdz]

Looks like in some cases (at least one) user configs are not considered after all --> #21913