React and Prettier/eslint 应用循环运行脚本

huangapple go评论76阅读模式
英文:

React and Prettier/eslint app looping run script

问题

My Create React App is compiling over and over. Aside the fact is shouldn't do that its also very distracting.

this is the output from the default npm run start

I'm guessing it's something to do with linting, ideas?

React and Prettier/eslint 应用循环运行脚本

EDIT:

scripts requested:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:check": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix --max-warnings=0",
    "prettier:check": "prettier . --check",
    "prettier:fix": "prettier . --write"
  }

EDIT 2:
I have now removed all eslint packages from the project and deleted the prettier and eslint files and the app still behaves as shown in the GIF attached to this


EDIT 3:

For anyone who sees this, it still isn't solved.

  • removed linting completely
  • redone all my typescript types and interfaces making sure they're correctly referenced etc...
  • tried it on Mac, Windows, Linux all of them do the same thing.
  • Launched the app outside of an IDE using Powershell and zsh they do the same thing
  • updated all my packages
  • got a fresh tsconfig file
  • removed node_modules
  • tried yarn an npm both of them do the same

I'm at a loss here, the comments and answers are all helpful but none of them solve the issue.

英文:

My Create React App is compiling over and over. Aside the fact is shouldn't do that its also very distracting.

this is the output from the default npm run start

I'm guessing it's something to do with linting, ideas?

React and Prettier/eslint 应用循环运行脚本

EDIT:

scripts requested:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:check": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix --max-warnings=0",
    "prettier:check": "prettier . --check",
    "prettier:fix": "prettier . --write"
  }

EDIT 2:
I have now removed all eslint packages from the project and deleted the prettier and eslint files and the app still behaves as shown in the GIF attached to this


EDIT 3:

For anyone who sees this, it still isn't solved.

  • removed linting completely
  • redone all my typescript types and interfaces making sure they're correctly referenced etc...
  • tried it on Mac, Windows, Linux all of them do the same thing.
  • Launched the app outside of an IDE using Powershell and zsh they do the same thing
  • updated all my packages
  • got a fresh tsconfig file
  • removed node_modules
  • tried yarn an npm both of them do the same

I'm at a loss here, the comments and answers are all helpful but non of them solve the issue.

答案1

得分: 2

有几种可能的情况。

以下是我过去遇到过的一些情况:

  1. 有一个文件在不断变化。也许你的IDE打开了,由于某种原因正在保存文件,或者脚本正在更新它,或者由于某种其他原因正在更新,从而重新启动编译。
  2. 缓存可能搞乱了事情。尝试运行 npm start -- --reset-cache。清除缓存可能有帮助。
  3. 切换环境。即在一个清晰且新鲜的虚拟机上设置项目。
  4. 暂时禁用 linting 和 prettier。从 package.json 中删除所有 eslintprettier 命令,然后重新运行项目。
英文:

there are seveal things that could be happening.

here are some from what I've encountered in the past:

  1. There is a file that keeps changing on you. maybe you IDE is opened and for some reason is saving the file, or a script is updating it, or for some other reason it's being updated and thus reinitiates the compilation.
  2. Cache might be messing things up. Try running npm start -- --reset-cache. Clearing the cache might be helpful.
  3. Switchup the environment. i.e. setup the project on a clear&fresh virutal machine.
  4. Disable linting & prettier temporarily. Remove all eslint and prettier commands from package.json and rerun the project.

答案2

得分: 0

我的猜测是你的项目目录中可能有一个文件不断被更新。webpack检测到这些更新,并且每次重新构建你的项目。

以下是测试这个理论的一些方法:

  1. 下载一个文件监视器应用程序,并将其指向你的项目目录,查看哪些文件被修改了。
  2. 不要使用 react-scripts start 来启动你的应用,而是创建一个简单的 webpack.config.js 文件(或者react-scripts中复制默认的配置文件),然后使用 webpack serve 作为启动脚本来运行你的项目。使用一个插件来确定哪些文件正在被更新
英文:

My guess is that there's a file somewhere in your project directory that gets updated continually. webpack detects the updates and rebuilds your project each time.

Here are some ways to test this theory:

  1. Download a file watcher application and point it at your project directory to see if/which files are being modified.
  2. Instead of loading your app with react-scripts start, create a minimal webpack.config.js (or copy the default one from react-scripts) and run your project with webpack serve as your start script. Use a plug-in to determine which files are being updated.

huangapple
  • 本文由 发表于 2023年2月16日 04:08:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464974.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定