TSLint not working with CRA and TypeScript

Question

I'm banging my head for hours trying to enable linting for a TypeScript project created with create-react-app.

• The wmonk/create-react-app-typescript repo is now deprecated
• Therefore, I followed these instructions from the CRA documentation

The issue is that the suggested implementation above doesn't add any linting to the newly created project.

So far I've tried:

• Installing TypeScript TSLint Plugin as an extension to my VSCode
• Creating a tslint.json file on my project with the following config:

  {
    "rules": {
      "no-debugger": false,
      "no-console": false,
      "interface-name": false
    },
    "linterOptions": {
      "exclude": [
        "config/**/*.js", "node_modules/**/*.ts", "coverage/lcov-report/*.js"
      ]
    },
    "extends": [
      "tslint:recommended", 
      "tslint-react", 
      "tslint-config-prettier"
    ]
  }

• Adding a lint script to my package.json

 "scripts": { 
     "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose"
 }

Then I tried running yarn lint or npm run lint but no files get ever linted from any of the approaches above

this is my package.json file:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^23.3.11",
    "@types/node": "^10.12.18",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.2",
    "typescript": "^3.2.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose",
    "tslint-check": "tslint-config-prettier-check ./tslint.json"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "tslint": "^5.12.0",
    "tslint-config-prettier": "^1.17.0",
    "tslint-react": "^3.6.0"
  }
}

This is the tsconfig.json auto-generated by npx create-react-app [project-name] --typescript

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Any thoughts?

Feisty

Are you missing a tslint.json? Could you please update the post with the contents of it and what output happens when you run npm run lint? – Poulson

tslint.json is the very first code block added to the post. When I run npm run lint I get no errors, therefore no linting either, since I intentionally added typescript errors to test it... – Feisty

Answer 1

I had to go through the same process figuring how to get TSLint and Pretter to work on a CRA + TypeScript project.

I created this gist with step-by-step instructions on how you can set it up accordingly.

The above solution, in a nutshell, is to make sure that you have the appropriate VSCode extensions installed and the appropriate dependencies in your package.json so your changes get tracked by both TSLint and Prettier.

Palladian

thank you very much, that's exactly what I needed. My original set-up was missing more dependencies packages. – Feisty

Nicely gathered and structured info in your gist @Jonca33. Thanks, will come in handy! – Praxis