添加plugin:@typescript-eslint/recommended-requiring-type-checking后,提示tsconfig中未包含该文件
我用 npx create-react-app my-app --template typescript 创建一个项目,然后我向其中添加打字稿类型检查,但我的 App.tsx 报告以下错误: 解析错误:ESLint 已配置...
使用 React hooks 获取输入值以在 oMdb api 上搜索
我想使用 React Hooks 通过 oMdb api 进行电影搜索。 结果并不如预期。我似乎违反了一些我不明白的 React Hooks 规则。 这是代码。 挂钩搜索 H...
我有一个 eslint 配置,它扩展了其他一些配置。这些包依赖于“@typescript/eslint-plugin”,但它们使用不同的版本。 扩展:['airbnb', 'airbnb-typescript', '@some-p...
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败
我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。 我运行了以下命令: % npx create-react-app REDACTED --模板打字稿
如何修复“在索引 0 处找到带有非文字参数的 fs.readFile”?
我正在尝试在 TypeScript 项目中添加 eslint-plugin-security。然而,对于这些代码 从 'fs' 导入 { Promise as fsp }; 从 'fs' 导入 fs; 从“路径”导入路径; 常量索引=等待...
react-native-document-scanner-plugin 适用于 Android 的 React Native 文档扫描仪插件无法自动扫描或正确裁剪
我目前正在开发一个React Native应用程序,它包含使用react-native-document-scanner-plugin的文档扫描功能。虽然该插件在 iOS 设备上运行完美,但我已经
我很好奇在 React 中支持 Web hooks 的最佳方式是什么? 假设您构建了一个 Web 应用程序,并且有一个通知图标。当通知出现时,图标会改变颜色。 最简单的解决方案...
从 'react' 导入 React, { useEffect, useRef, useState }; // eslint-disable-line import/no-webpack-loader-syntax // @ts-忽略 从'!mapbox-gl'导入mapboxgl; 导入'mapbox-gl/dist/mapbox-gl....
大家好我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题: 这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好,我正在将我的 vue3 项目从 js 迁移到 typescript,我遇到了这个问题:</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code><script setup lang="ts"> const toto = (msg: string) => { console.log(msg) } </script> </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 13, 'sourceType': 'module' }, 'plugins': [ 'vue' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript,因为 eslint 不支持开箱即用。 首先,您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>,然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。 安装完这些后,请按如下方式更新您的配置 - </p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true, node: true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 12, 'sourceType': 'module', parser: '@typescript-eslint/parser' }, 'plugins': [ 'vue', '@typescript-eslint' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言,问题是我使用解析器选项作为数组,而不是字符串:</p> <pre><code> parserOptions: { - parser: ['@typescript-eslint/parser'], + parser: '@typescript-eslint/parser', }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS,此配置有帮助</p> <pre><code> overrides: [ { files: ['*.vue'], parser: 'svelte-eslint-parser', parserOptions: { parser: { // Specify a parser for each lang. ts: '@typescript-eslint/parser', js: 'espree', typescript: '@typescript-eslint/parser' } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2,我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>
如何在 Redux Saga 中使用 React Hook?
我正在为我的应用程序设置语言。但我有一个问题。 我使用 React.useContext() 来设置语言。但是当我在 saga 的 toast 中修复它时,它会记录: [错误:无效的挂钩调用。 Hooks 只能在 ins 中调用...
Nextjs 14 应用程序路由器抱怨我违反了 Hooks 规则,而我却没有
警告:无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 您的 React 版本可能不匹配...
启用 ESLINT:我收到错误:无法读取未定义的属性(读取“getTokens”)
当我尝试启用 ESLint 时,我的 React 应用程序遇到错误。我正在努力寻找原因,但还没有任何结果。有谁知道这个问题的原因可能是什么?哈...
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板(样板)存储库,它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试,并使用 Webpack 构建。 然而,TailwindCSS 实用程序类不...
React:[eslint]第0行:解析错误:DeprecationError:'originalKeywordKind'自v5.0.0以来已被弃用,无法再使用
我正在尝试将 TypeScript 集成到我用 CRA 创建的 React 项目中。 我一直有以下错误: 第 0 行:解析错误:DeprecationError:'originalKeywordKind' 已被弃用...
相当于 @typescript-eslint 中的 noUnusedParameters
我正在努力改善React+TS项目的开发者体验。我发现 noUnusedLocals 和 noUnusedParameters 对于该项目非常有用,但这些规则使开发变得复杂,尤其是......
警告:尝试在已经呈现的 <UINavigationController> 上呈现 <RNNSideMenuController> <RCTModalHostViewController>
我正在使用应用内支付-react-native-plugin插件将Square支付方法集成到react native中。在 iOS 中,如果在添加新卡反应本机 p 上打开卡输入模型,则会产生问题...
我想在 NextJs 中执行 npm run build 时禁用某些文件夹的 eslint 我不想这样配置: 模块. 导出 = { eslint: { dirs: ['pages', 'utils'], // 仅在 ... 上运行 ESLint
使用 typescript-eslint 创建自定义规则时可以访问常量值吗?
我正在尝试使用 @typescript-eslint/utils 添加自定义 ESLint 规则,以在 Category 的 prop 类型与正则表达式不匹配时显示警告: 从'@typescript-eslint导入{ESLintUtils,TSESTree}...
我编写了一个自定义 ESLint 规则,如下所示: //------------------------------------------------ ------------------------------------------ // 规则定义 //---------------------------------------------------------。 ..
为什么 @typescript-eslint/no-redeclare 规则指示误报?
我有一个 typescript 项目,其中通过 eslint 和 typescript-eslint 支持 linting。 请注意,这只是一个最小的工作示例。 这是一个repl链接 索引.ts 函数 testfn(值:...
从 TypeScript 的 esLint 中删除函数警告中缺少返回类型
我正在将 eslint 与 TypeScript 结合使用。 我想关闭对函数显式返回类型的检查。 我已在 .eslintrc.js 中的规则中添加了属性“@typescript-eslint/exp...
Symfony/VueJS 组件 // 导入 从“../hooks/getUser”导入 getUser; 从 'vue-router' 导入 { useRoute } // 增值服务 常量路由 = useRoute() 常量 { 用户 } = getUser(1) const 路线我...
在 `@typescript-eslint/parser` AST 中获取超类引用
给定以下类层次结构: 类 Foo { foo成员= 1; } 类 Bar 扩展 Foo { 酒吧成员 = 2; } @typescript-eslint/parser 的 AST 输出将 extends Foo 语句引用为
通过 github 操作创建 EC2 AMI 时出现错误:exec: "session-manager-plugin": $PATH 中找不到可执行文件
==> learn-packer.amazon-ebs.ubuntu:exec:“session-manager-plugin”:在 $PATH 中找不到可执行文件 learn-packer.amazon-ebs.ubuntu:启动 portForwarding 会话“Amy-
在使用我发布的包时出现错误“TextEncoder 不是构造函数”
我用 ReactJs、TypeScript 和 rollup 编写了一个包。 这是我的 rollup.config 从“@rollup/plugin-node-resolve”导入解析; 从“@rollup/plugin-typescript”导入打字稿; 进口...
Maven-shade-plugin 检测到某些类文件存在于两个或多个 JAR 中
我正在尝试使用 maven-shade-plugin,但收到警告: javafx-controls-18.0.1-win.jar,javafx-graphics-18.0.1-win.jar, javafx-media-18.0.1-win.jar、javafx-web-18.0.1-win.jar 定义 1 覆盖...
eslint 在将特定文件添加到ignorePatterns时会忽略所有文件
我正在尝试在 Next.js 项目中实现 eslint,但我不希望 next.config.js 被 linted。 我尝试将ignorePatterns添加到.eslintrc.json,添加.eslintignore文件并添加eslintIgnore
我正在使用 Angular 项目,并且我的 ESLint 设置无法检测私有类变量何时未使用,例如 @成分{...} 导出类ExampleComponent { 私人示例属性:str...
ESLint 错误:带有建议的规则必须将 `meta.hasSuggestions` 属性设置为 `true`(无显式任何规则)
我正在尝试向 .eslintrc.json 添加规则以禁止任何类型。 我将规则 ("@typescript-eslint/no-explicit-any": "error") 添加到我的设置中: { “环境”:{ ...
我有一个多模块Maven项目: 项目根目录 模块:主应用程序 模块:附加模块 - 取决于主应用程序 我正在使用 maven-jar-plugin 来编译额外的 JAR 文件
我想要一个带有默认值的表单,并且用户输入的任何值都会被捕获。这是我的代码: 从“preact/hooks”导入{useState}; 导出默认函数 test() { 合作...
获取 typescript-eslint 来检测纱线存储库中的单次运行模式
我在大约 20 个 TypeScript 项目的 monorepo 中遇到了 typescript-eslint 内存不足错误。这是一个已知问题,缓解措施之一是启用单次运行检测...
typescript-eslint 规则,防止将带有类型参数的回调传递给不安全的函数
我试图在我的打字稿代码库中对任何内容都非常严格。我正在使用所有 no-unsafe-* 规则,因此我的 .eslintrc.js 包括: '@typescript-eslint/no-unsafe-argument': '错误', '@
如何禁用 eslint 上的错误(prettier/prettier)?
在编码时,我没有使用 eslint。现在我安装了它,它让我的编辑器充满了更漂亮/更漂亮的错误,这些错误似乎并没有让我的代码更漂亮。我正在寻找一种方法...
如何在 AWS Elastic Beanstalk 环境/应用程序中运行 artisan migrate?
我已经完成了所有这些事情来部署我的应用程序,但我无法在部署中运行 php artisan migrate。我已经尝试了从container_commands到.ebextensions/.platform/hooks的许多解决方案,但没有任何效果......
我一直在寻找一个 eslint 插件,它可以在通用变量/参数/函数名称上给出错误。我只找到相当乏味的答案(列出每个可能的符号而不进行模式匹配)...
在 ESlint 中,如果有对象位于不同行,则使所有对象道具位于不同行
正在努力解决 eslint 的配置问题,基本上我想要实现的是在解构语句中,如果任何属性位于新行上,那么所有属性都应该位于单独的行上,相同...
Jenkinsfile / recordIssues 从文件创建“过滤器”数组
我们使用“Warnings Next Generation Plugin”中的 recordIssues 来可视化 Trivy-Dockerimage-Scanner“aquasec/trivy”生成的结果。这个工具可以...
在自定义 ESLint 规则的修复程序中,是否有一种简单的方法可以删除节点以及后面的换行符?
在自定义规则中(严格来说,是用于 typescript-eslint 的规则,但我不认为它对答案有影响),我想在某些情况下删除 ImportDeclaration 节点。问题是当我...
错误“@nestjs/swagger/plugin”找不到插件! 启动我的 Nestjs 项目时出现此错误。我不知道出了什么问题。 Nestjs/swagger 包已安装。
我的代码如下: /** * 输入自动完成提供者 */ 类InputAutoCompletionProvider { // eslint-disable-next-line class-methods-use-this 提供完成项目(文档,位置...
如果你有一个覆盖,你想“降级”js解析器,你如何关闭父级的扩展? parserOptions 很容易重写,因为它是基于键的。延长...
Android 项目:找不到 org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.1
这是我遇到的错误 失败:构建失败并出现异常。 出了什么问题: 配置根项目“android”时出现问题。 无法解析所有配置文件':
我想使用对象文字表示法来生成命名空间: const featureGoogleAnalytics = { gTagId: 'G-XXXXXXX', // 您的 Google Analytics ID ... resetConsent: () => { // eslint-disable...
如何停止maven输出“[警告]配置选项'appendAssemblyId'设置为false。”?
我有一个生成jar的maven项目,但没有附加maven-assemble-plugin的appendAssemblyId。 如何让 Maven 停止发出警告:“配置选项‘appendAssemblyId’已设置...
我在尝试使用 vsCcode 中的文字类型时遇到一些问题。使用文档中的示例, 你可以看到 eslint 正在抱怨代码。 (解析错误:输入expected.eslint) 我...
Laravel 10 Vite“npm run build”创建空文件
由于某种原因,运行该命令时,某些脚本会编译,而某些脚本的内容会被“删除”。这是我的 vite.config.js 文件: 从“laravel-vite-plugin”导入 laravel; 导入vu...
我制作了第一个 Spring 应用程序,现在我需要将其打包到 jar 文件中进行部署。在 pom.xml 中,我指定了 maven-jar-plugin 以便自动创建清单文件......
Codenameone:使用 gradle 8 时,必须将 JAVA17_HOME 环境变量设置为 Java 17 JDK 的位置
自从在 NetBeans 12.6 上升级到 codenameone-maven-plugin:7.0.150 以来,我一直无法构建 codenameone Android Gradle 项目。 收到以下错误消息: 生成 android gradle