Skip to main content
Mostly just minor things edited.
Source Link

When I run npx create-react-app ...some-name, a bare-bonebones React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to bebeing present, as there is this:

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

HoweverUsually, wheneverwhen I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pickpicks it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. 
When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. 
This is also evident as...

  • ...one … one cannot run the eslint command in the project root.
  • ...ESLint … ESLint does not seem to be a dependency within package.json.
  • ...VS … VS Code doesn't pick up that there is ESLint present.
  • ...there … there is no .eslintrc.* file in the project root.
  • ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

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

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

  • ...one cannot run the eslint command in the project root.
  • ...ESLint does not seem to be a dependency within package.json.
  • ...VS Code doesn't pick up that there is ESLint present.
  • ...there is no .eslintrc.* file in the project root.
  • ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

When I run npx create-react-app some-name, a bare-bones React project is created for me. When I then peek into package.json, there seems to be some evidence of ESLint being present, as there is this:

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

Usually, when I install ESLint as a dev dependency and configure it, VS Code picks it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. 
When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have read -- let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. 
This is also evident as

  • … one cannot run the eslint command in the project root.
  • … ESLint does not seem to be a dependency within package.json.
  • … VS Code doesn't pick up that there is ESLint present.
  • … there is no .eslintrc.* file in the project root.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

Notice removed Reward existing answer by dwjohnston
Bounty Ended with glenrothes's answer chosen by dwjohnston
Notice added Reward existing answer by dwjohnston
Bounty Started worth 100 reputation by dwjohnston
added 840 characters in body
Source Link
lkbaerenfaenger
  • 6.7k
  • 6
  • 27
  • 35

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

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

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

  • ...one cannot run the eslint command in the project root.
  • ...ESLint does not seem to be a dependency within package.json.
  • ...VS Code doesn't pick up that there is ESLint present.
  • ...there is no .eslintrc.* file in the project root.
  • ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

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

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

  • ...one cannot run the eslint command in the project root.
  • ...ESLint does not seem to be a dependency within package.json.
  • ...VS Code doesn't pick up that there is ESLint present.
  • ...there is no .eslintrc.* file in the project root.
  • ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up?

When I run npx create-react-app ..., a bare-bone React project is being created for me. When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:

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

However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up. In this case, VS Code does not seem to recognize that there is any kind of linter present/configured. This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json. When I try to run eslint . within the project's root directory, it says "command not found".

I tried to breathe life into this ESLint configuration by expanding it, so now I have this:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

This changes nothing. I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.

This leads me to a simple question: Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?

As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:

ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so. This is not only evident by the sheer number of people who post about their struggles of getting the two to work together. This is also evident as...

  • ...one cannot run the eslint command in the project root.
  • ...ESLint does not seem to be a dependency within package.json.
  • ...VS Code doesn't pick up that there is ESLint present.
  • ...there is no .eslintrc.* file in the project root.
  • ...etc.

So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

added 840 characters in body
Source Link
lkbaerenfaenger
  • 6.7k
  • 6
  • 27
  • 35
Loading
added 840 characters in body
Source Link
lkbaerenfaenger
  • 6.7k
  • 6
  • 27
  • 35
Loading
edited body
Source Link
Dennis Vash
  • 52.8k
  • 11
  • 110
  • 128
Loading
Source Link
lkbaerenfaenger
  • 6.7k
  • 6
  • 27
  • 35
Loading