Discussion on: How To Set Up ESLint, TypeScript, Prettier with Create React App

View post

Before running "npm start" ensure you "npm installl typescript --save-dev".

Eslint doesn't work for me. The lint command fails with.

> eslint './src/**/*.{ts,tsx}'


Oops! Something went wrong! :(

ESLint: 5.16.0.
No files matching the pattern "'./src/**/*.{ts,tsx}'" were found.
Please check for typing mistakes in the pattern.

Both my .eslintignore and .eslintrc.json are identical copy and paste. I used "npx create-react-app eslint-integration-typescript-example"

{
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier"
    ],
    "env": {
        "browser": true,
        "jasmine": true,
        "jest": true
    },
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true
            }
        ]
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    "parser": "@typescript-eslint/parser"
}

{
  "name": "tslint-integration-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint './src/**/*.{ts,tsx}'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^16.8.18",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.17.1",
    "typescript": "^3.4.5"
  }
}

src/registerServiceWorker.js
src/**/__tests__/**

$ create-react-app --version
3.0.1

I can see that the file does have linting suggestions in the UI. But "npm run lint" doesn't work

Would really appreciate some guidance. This is the third guide I've tried to follow, each time with a fresh "CRA"

It works fine with standard javascript and I managed to get that to work as shown in this repo github.com/gruckion/eslint-integra... EDIT < doesn't work here either

The currently broken repo is here, github.com/gruckion/eslint-integra....

Stephen Rayner • May 26 '19

If you are having the same issue I was the cause is;

"lint": "eslint './src/**/*.{ts,tsx}'",

In order to get this to work, I had to remove the single quotes.

I am not sure why the single quote approach doesn't work for me. I read over the documentation and found it is called "glob" notation and it depends on the console your using (I am using git bash).

Placing your glob in double quotes will use nodes glob format. If you want to test it and don't want to globally install eslint use;

npx eslint './src/**/*.{ts,tsx}'

This works fine for me. with and without double or single quotes.

eslint.org/docs/user-guide/command...

If anyone has any idea why I can't run the script from my package.json with single quotes I would love to know.