reactjs - Cypress 在我的 ts 文件旁边添加了 js 文件

标签 reactjs typescript webstorm cypress

我在 WebStorm 的 TypeScript 中使用 Cypress。我已经在项目 A1 上工作了几个星期,我添加了 Cypress,我将 TS 添加到 Cypress,然后事情开始变得有点有趣,包括在 Cypress 和我的 src 文件夹中与 ts 文件一起添加了 js 文件. (tsx 文件没有这样做,只有 ts)
所以我重新启动了项目:我创建了一个全新的 Create React App 项目,A2,并开始将文件一个一个(或一个文件夹一个文件夹)从 A1 拖到 A2。我通过运行 cypress open 将 Cypress 文件添加到 A2当 A2 中没有 cypress 文件时,导致 Cypress 添加其文件。然后我从 A1 添加了我的测试(将代码复制到新文件中,而不是复制文件)并设置各种配置文件和内容,例如:

  • TS 识别我的自定义 cypress 命令
  • 不会创建额外的 JS 文件

  • 然后我把A1工程里的所有文件都删了,拖进去所有的文件,减去node_modules文件夹,从 A2,然后运行 ​​yarn install .
    一切正常,除了 Cypress 文件夹仍然在 ts 文件旁边创建 js 文件。
    很难确定发生这种情况的实际时刻:我写了这篇文章并放弃了它,因为事情似乎运作良好。但是几个小时后,我注意到 js 文件又回来了!仅在 Cypress 文件夹中,包括 Cypress 文件夹(/integration、/plugins 等)中的所有 ts 文件。
    这是一些 tsconfigs:cypress/tsconfig.json
    {
      "compilerOptions": {
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress"]
      },
      "include": [
        "**/*.ts", "**/*.d.ts"
      ]
    }
    
    <project_root>/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": "react"
      },
      "include": [
        "src"
      ]
    }
    
    哦不,现在突然间它在我的 src 中用 ts 制作了 js 文件文件夹!
    当我删除所有这些额外的 js 文件(在 src 文件夹中,在正在运行的应用程序中生成警告)时,我也会从 WebStorm 收到这些警告:

    Oops! Something went wrong! :( ESLint: 6.7.2. ESLint couldn't find the plugin "eslint-plugin-import". (The package "eslint-plugin-import" was not found when loaded as a Node module from the directory "/Users/tuzmacbookpro2017/dev/Sunrise/IVD".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: npm install eslint-plugin-import@latest --save-dev The plugin "eslint-plugin-import" was referenced from the config file in "nginx/front_end/package.json » eslint-config-react-app". If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.


    不过, react 服务器和柏树服务器和运行器似乎都很高兴。
    帮助!这些js文件是怎么回事? (我知道 TS 将 ts 转换为 js 或其他什么,但通常文件实际上不会像这样显示)

    最佳答案

    请确保 重新编译更改 中未启用设置 |语言和框架 | typescript

    关于reactjs - Cypress 在我的 ts 文件旁边添加了 js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63836873/

    相关文章:

    reactjs - 如何 : onClick/onChange for a <select>'s <option> in a child component

    reactjs - const Page 和 class Page 使用 GatsbyJS/ReactJS 扩展 React.Component 的区别

    webstorm - 如何在 WebStorm 下在 TSLint 中启用类型检查?

    typescript - 无法使用 Vue 从 TypeScript 中的基类更新属性

    node.js - WebStorm 在导入时显示保留字

    webstorm - WebStorm 的可移植安装?

    javascript - 使用 Reflux,资源是 2 家商店还是 1 家商店? (自行车/CurrentBike 与自行车)

    javascript - 将 onPress 重定向传递给子组件 React Native

    javascript - Chrome 消息扩展程序 : From injected script to background

    reactjs - Webpack 无法解析 ant design 模块