TSLint 不适用于 CRA 和 TypeScript

Posted 2023-02-22

【中文标题】TSLint 不适用于 CRA 和 TypeScript

【英文标题】：TSLint not working with CRA and TypeScript

【发布时间】：2019-05-30 18:25:40

【问题描述】：

我花了好几个小时试图为使用 create-react-app 创建的 TypeScript 项目启用 linting。

wmonk/create-react-app-typescript 存储库现已弃用 因此，我遵循了 CRA 文档中的 these 说明

问题是上面建议的实现没有向新创建的项目添加任何 linting。

到目前为止我已经尝试过：

安装 TypeScript TSLint Plugin 作为我的 VSCode 的扩展 使用以下配置在我的项目上创建tslint.json 文件：

  
    "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"
    ]
  

将 lint 脚本 添加到我的 package.json

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

然后我尝试运行yarn lint or npm run lint，但没有文件被上述任何方法删除

这是我的package.json 文件：

  "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"
  

这是 npx create-react-app [project-name] --typescript 自动生成的tsconfig.json

  "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"
  ]

有什么想法吗？

【问题讨论】：

您是否缺少tslint.json？您能否更新帖子的内容以及运行npm run lint 时会发生什么输出？

tslint.json 是添加到帖子中的第一个代码块。当我运行 npm run lint 时，我没有收到任何错误，因此也没有 linting，因为我故意添加了打字稿错误来测试它......

【参考方案1】：

我必须经历相同的过程来确定如何让 TSLint 和 Pretter 用于 CRA + TypeScript 项目。

我创建了这个gist，其中包含有关如何进行相应设置的分步说明。

简而言之，上述解决方案是确保您在 package.json 中安装了适当的 VSCode 扩展和适当的依赖项，以便 TSLint 和 Prettier 跟踪您的更改。

【讨论】：

非常感谢，这正是我所需要的。我最初的设置缺少更多的依赖包。

在您的 gist @Jonca33 中很好地收集和结构化信息。谢谢，会派上用场的！