CODEWITHSUNDEEP
reactjstypescripteslinttypescript-eslint
Joji
Joji

Reputation: 5646

Confusion about how `create-react-app --template typescript` hooked up with typescript-eslint

I created a react project using npx create-react-app my-app --template typescript. And I found that somehow typescript-eslint is already enabled by default. enter image description here

I checked the eslint config inside of the package.json

"eslintConfig": {
    "extends": "react-app"
  },

I thought in order for typescript-eslint to be enabled you would need either "extends": ["plugin:@typescript-eslint/recommended" in your package.json or .eslintrc. But in this case I cannot find either one of these in the codebase. I wonder how the eslint for typescript got enabled?

Upvotes: 1

Views: 300

Answers (1)

Brad Zacher
Brad Zacher

Reputation: 3243

CRA is intended to be a one-stop shop for setting up your react app. This includes build configs, folder structures, and everything required to develop a react app with the best practices.

Whilst not really explicitly listed anywhere, CRA comes with a preconfigured linting experience using the eslint-config-react-app config.

On their main page, they mention:

Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app. (emphasis mine)

It's also mentioned in places like the IDE experience, but in a "you should already know this is a thing" kind of way: https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor

For typescript projects, the CRA config ofc includes tooling from the @typescript-eslint project, as it is the standard for linting typescript code.

Without using this project, they would run into many issues attempting to lint typescript codebases (the biggest being that it wouldn't work at all).

The above docs contain information about how you can further configure your linting experience if you want.

Upvotes: 2

Related Questions