vue3-webpack遇到Eslint各种报错 Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法

这篇具有很好参考价值的文章主要介绍了vue3-webpack遇到Eslint各种报错 Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

报错一:

VUE3 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor

8:1  error  Delete `⏎`  prettier/prettier
✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option

原因:与创建项目时选择的 eslint 的设置问题,可以通过“—fix”选项修复
.解决方法
package.json
//原代码

 "scripts": {
    ...
    "lint": "vue-cli-service lint"
  },

更改:

"scripts": {
   ...
    "lint": "eslint --fix --ext .js,.vue src"
  },

报错二:
提示建议我们使用特殊注释禁用某些警告。使用//eslint disable next line忽略下一行。使用/eslint disable/忽略文件中的所有警告。

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决办法:
我们在 .eslintrc.js 里面注释掉 plugin:prettier/recommended 就可以了

'extends': [
    // 'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
    //'plugin:prettier/recommended'
  ],

报错三:
这个报错是建议我们使用 驼峰命名

6:9  error  Component name "My" should always be multi-word  vue/multi-word-component-names

解决办法:
① 按照规则走,改驼峰命名
②但是像以上我就一个 My ,这样要写个驼峰不是很合理,所以可以在 .eslintrc.js 文件写一条规则:

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 关闭驼峰命名规则
    'vue/multi-word-component-names': 0,
  },

报错四:

Error-Do not use “// @ts-ignore“ because it alters compilation errors问题的处理

Error-Do not use “// @ts-ignore“ because it alters compilation errors问题的处理

使用TS编写代码时,有些情况下,比如第三方的库对象,我们想增加一些属性,并且确认是没问题的,但是TS检查时会报错导致不能正常编译运行

解决办法:

我们通过添加// @ts-ignore来告诉TS该条语句不检查类型问题,此时是可以正常编译了,但是// @ts-ignore这条注释标红了很难受:
这个我们可以通过修改.eslintrc.js文件来消除该提示:

module.exports = {
	...
	rules: {
		...
		"@typescript-eslint/ban-ts-comment": "off",
	}
}

报错五:使用Vue3 Script Setup时 ESLint 报错 ‘defineProps‘ is not defined

Vue 3 的 Script Setup 语法引入了 defineProps、defineEmits、defineExpose、withDefaults 的编译器宏。然而某些情况下,ESLint 会报错以上编译器宏函数未定义。

本文将介绍两种解决方案来解决这个问题(假定你的项目使用 Vue-Cli 进行初始化)。

Step 1. 检查 eslint-plugin-vue 的版本

npm list eslint-plugin-vue

若版本在 v8.0.0 以上,跳转到 Step 2,否则直接到 Step 3 的内容。

Step 2. 版本为 v8.0.0+

打开 .eslintrc.js 文件并修改如下:

  env: {
    node: true,
    // The Follow config only works with eslint-plugin-vue v8.0.0+
    "vue/setup-compiler-macros": true,
  },

Step 3. 版本为 v8.0.0 以下

打开 .eslintrc.js 文件并修改如下:

  // The Follow configs works with eslint-plugin-vue v7.x.x
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },

 更多的Eslint编写参考如下:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'prettier/prettier': 'error',
    'no-extra-semi': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-interface': 'off'
  }
}

源头解决(不推荐)

Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法

问题描识:使用vue的时候,使用一个全局变量或在当前方法调用别的方法,ESLint的语法会出现ESLint: ‘Aliplayer’ is not defined. (no-undef),说未定义,这时我们可以添加配置,取消这个校验。
在node_modules文件夹下面的eslint文件夹下面的conf里面的eslint-recommended.js文件注释掉"no-undef": “error”,这行代码

node_modules

        --eslint

                --conf

                        --eslint-recommended.js

vue3-webpack遇到Eslint各种报错
Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法

 文章来源地址https://www.toymoban.com/news/detail-478522.html

到了这里,关于vue3-webpack遇到Eslint各种报错 Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Eslint:vue3项目添加eslint(standard规则)

    创建指令为:npm creat vite@latest 根据指令依次运行: 这样子我们就创建了一个纯净的vite+vue3+ts的项目模板,运行起来为: (1)安装eslint: npm install -D eslint (2)初始化eslint: npx eslint --init 在package.json中增加一句脚本用于检测和修复代码: 此时运行npm run lint,会看到这么一串

    2024年04月15日
    浏览(38)
  • Vue3最佳实践 第八章 ESLint 与 测试 ( ESLint )

      ​在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词,ESLint 是个什么样的组件会给为项目做些什么吗?ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具

    2024年02月04日
    浏览(46)
  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(81)
  • vue3项目中关闭 eslint 检验

    关闭 eslint 检验 在 Vue 3 项目中,可以通过修改 package.json 文件或者配置 .eslintrc.js 文件来关闭 ESLint 检验。 修改 package.json 文件 在 package.json 文件中,找到 “lint” 命令,将其中的 eslint 删除即可。例如: 配置 .eslintrc.js 文件 在 Vue 3 项目中,ESLint 的配置文件默认是 .e

    2024年01月19日
    浏览(42)
  • vue3项目 - Eslint 配置代码风格

    总结: Prettier   (代码规范的插件,格式化 )--- 美观 Eslint   (规范、纠错、检验错误 )----- 纠错 首先, 禁用 Prettier 插件,安装 ESLint 插件,配置保存时自动修复 再 配置代码风格文件 .eslintrc.cjs (Prettier 配置 + ESLint 配置, 附配置代码 ) 配置内容 如, Prettier:单引号、

    2024年02月04日
    浏览(41)
  • vscode vue3+vite 配置eslint

    vue2+webpack+eslint配置 目前主流项目都在使用 vue3+vite ,因此针对 eslint 的配置做了一下总结。 安装插件,执行以下命令 执行上述命令,package.json 中 会自动添加以下内容 在在根目录创建 .eslintrc.js 文件 (命令方式) .eslintrc.js 文件的内容 在项目根目录下创建一个名为 .prettier

    2024年02月13日
    浏览(41)
  • 在 Vue3 项目中如何关闭 ESLint

    ESLint 是一个用于检查 JavaScript 代码质量的工具,它可以帮助开发者遵循一致的编码规范,并发现潜在的错误和问题。然而,在某些情况下,我们可能希望关闭 ESLint,例如在一些小型项目中或者在特定的开发阶段。本文将介绍如何在 Vue3 项目中关闭 ESLint。 第一步:找到配置文

    2024年02月08日
    浏览(55)
  • vue3+ts项目中eslint校验配置

    eslint中文官网:ESLint - Pluggable JavaScript linter - ESLint中文 ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具,其目的是使代码风格更加一致并避免错误,合理利用可以提高代码质量。 1.安装eslint pnpm i eslint -D 2.生成eslint配置文件 npx eslint --init 3.安装vue3代码环境校

    2024年02月04日
    浏览(57)
  • 【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

    package.json中 vite后面加上 --open 回答问题如下: 使用eslint仅检查语法,还是检查语法及错误,选第二个 使用的是什么模块,选第一个 项目使用的是什么框架,选vue 项目中使用TyoeScript ,选yes 项目运行在哪,选浏览器 创建的配置类型需要什么类型的,选Javascript 需要安装这些

    2024年02月09日
    浏览(82)
  • Vue3 - 解决 build / dev 打包运行时突然出现一堆 ts 相关的报错,强制关闭整个项目的 ts 代码语法校验和验证(webpack / vite 均可)

    无论您是 vite 还是 webpack,都可以 100% 去掉运行或打包时的 ts 语法验证。 本文 实现了在 vue3 + ts 开发中,关闭运行、打包部署命令时出现的各种 ts 校验报错,去掉对 ts 的验证, 有些朋友对 ts 不是很了解(所以在写代码时没注意一些语法),导致最终 build 打包时出现了很多

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包