修复ESLint无法识别Vue3语法糖

于 2024-05-03 19:00:43 发布
阅读量312 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AhriProGramming/article/details/138422119
版权
本文介绍了如何在ESLint不原生支持Vue3语法糖的情况下，通过修改.eslintrc.js或package.json文件来适应Vue3的等特性。具体步骤包括添加特定的环境配置和调整插件设置。
摘要由CSDN通过智能技术生成

正常情况下，ESLint不支持Vue3语法糖，如<script setup>

情况①：项目包含.eslintrc.js文件

修改.eslintrc.js文件

情况②：项目无.eslintrc.js文件

修改package.json文件

package.json

 "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
       "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },

在"env"中加入"vue/setup-compiler-macros": true即可（必选）

将"plugin:vue/vue3-essential"修改为"plugin:vue/vue3-recommended"即可（可选）

这样就可以使用Vue3中的语法糖了

AhriProGramming
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
vue+eslint+vscode配置教程
12-11
例如，`parser`设置为`babel-eslint`来处理ES6+语法，`plugins`包含`html`以支持识别Vue文件中的JavaScript代码。 在`.eslintignore`文件中，你可以列出不想让ESLint检查的文件或目录，避免不必要的警告或错误。 ...
eslintpluginvue一个自定义的eslintparser可以直接处理vue文件并检查模板里的语法错误
08-08
4. **自定义解析器**：`eslint-plugin-vue` 包含一个自定义的 ESLint 解析器，它能解析 Vue 文件的特殊语法结构，避免了因 ESLint 无法识别 Vue 语法而导致的错误。 5. **规则配置**：用户可以根据项目需求自定义 `...
prettier设置内容
可以叫我啪叽的石头
11-19 1234
module.exports = { // 使用 2 个空格缩进 tabWidth: 2, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号
给 vite 创建的 Vue3 项目配置 ESLint
青蛙king的博客
04-21 8798
目录前言一、下载安装相关的依赖包 前言 在 vite 配置文件中，同一属性下，后引入的规则会覆盖前面的规则。 一、下载安装相关的依赖包 综合分析普遍使用的 eslint 依赖包后，推荐下面这一整套依赖包： 建议必配 eslint eslint-plugin-vue eslint-plugin-prettier （遇到 eslint 规则和 prettier 规则冲突） eslint-config-prettier（解决 eslint 规则和 prettier 规则冲突） eslint-define-co
使用setup语法糖,eslint检查报错
ATM_09的博客
08-12 1091
setup 语法糖 eslint报错
vue3一步一步的详细讲解配置ESLint
热门推荐
harmsworth的博客
06-03 1万+
vue3配置ESLint前言环境说明安装standard规范初步总结vue 官方推荐安装 ESLint对比2个package.json再次总结airbnb规范总结 前言 对于前端项目而言，ESLint 可以检查代码，统一代码风格，避免不必要的错误。在 vue3 中配置 ESLint，如下所示。 环境 vite 2.3.3 vue 3.0.5 说明 由于在 ESLint优先级 中 .eslintrc.js 的优先级最高，故使用 `.eslintrc.js 。 准备一个 vue3 项目，请移步 vite构
vue3中的setup函数
leveretz的博客
07-16 1362
vue3中的setup函数
VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突
最新发布
m0_37985967的博客
03-30 2207
手把手教你VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突
vue3: setup语法糖
qq_36413371的博客
06-02 252
官网链接 成员 setup中定义的变量会默认导出 使用props const props = defineProps<{msg: string}>() <template> <h1 ref="title"> {{ props.msg }} </h1> </template> 使用事件 给props设置默认值 const props = withDefaults(defineProps<Props>(
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
对于非基于 vue-cli 创建的项目，你需要手动安装相关依赖，如 `@vue/cli-plugin-eslint`、`@vue/eslint-config-prettier`、`babel-eslint`、`eslint`、`eslint-plugin-prettier` 和 `eslint-plugin-vue`。...
VSCode的Vue工具
08-12
它能够识别Vue组件中的HTML、JavaScript和CSS代码，并给予不同颜色的高亮显示，使得代码更易读，帮助开发者快速定位和理解代码结构。例如，HTML标签、属性和值会被高亮，JavaScript变量和关键字也会有独特的色彩标识...
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps‘ is not defined
澎湖Java架构师的博客
03-10 6587
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps’ is not defined Vue 3 的 Script Setup 语法引入了 defineProps、defineEmits、defineExpose、withDefaults 的编译器宏。然而某些情况下，ESLint 会报错以上编译器宏函数未定义。 本文将介绍两种解决方案来解决这个问题（假定你的项目使用 Vue-Cli 进行初始化）。 Step 1. 检查 eslint-plugin-vue 的
【前端】Vue3中通过ESLint校验代码是否符合规范
小冷coding的博客
05-04 2277
Vue3中通过ESLint校验代码是否符合编码规则 VUE3中项目使用的了ESLint插件校验代码是否符合编码规则，一起来看看eslint的安装方式，vs code编辑器，idea编辑器中方法。 文章目录Vue3中通过ESLint校验代码是否符合编码规则1.在项目中安装ESLint命令2.初始化ESLint配置命令3.查看eslint.js文件4.在package.json下添加验证脚本5.编辑器中安装eslint插件5.1 VS Code中安装eslint插件步骤，按下图操作5.2 Idea 中配置esl
【解决】vue项目vscode配置eslint不生效，无法自动检测
Run_youngman的博客
05-19 6575
解决eslint配置不生效的问题。
vue3+vite项目配置ESlint、pritter插件
咚の窝
09-13 9347
入行前端工作将近两年多时间了（如果算上实习），从一开始vue2入门，到现在vue3前端变化是真的快，刚了解webpack搭建项目流程，vite又横空出世，不得不说前端变化真的太快了，所以只有不停的学习才能跟得上大佬们的脚步；废话不多说，进入正题，由于公司的领导要求前端要有自己的脚手架项目，能拿过来就用，所以想着基于vite+vue3搭建一套基础的项目，但是想用在其他地方感觉通用性不强，所以打算做成一个集成系统，就是把工作中平时用到的技术剥离业务，做成一个demo演示系统，至于想即开即用，目前没有能力做这个脚
学习vue3踩坑分享（ 1 ）- 使用Element Plus ＜script lang=“ts“ setup＞ 加上lang=“ts“后编译错误
烟溪彭于晏的博客
06-28 1万+
学习vue3踩坑分享（ 1 ）- 使用Element Plus ＜script lang=“ts“ setup＞ 加上lang=“ts“后编译错误
vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
mrhaoxiaojun的博客
05-12 8251
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app && yarn // 默认是没有创建git仓库的，这里我们初始化一下 git init 这个模板是没有使用配置eslint和prettier的，接下来我们依次安装这些依赖。 集成eslint 首先我们安装eslint yarn add eslint -D 接下来初始化eslint: npx esl
Vue3+Ts+Vite 项目搭建&项目说明
kiku
07-26 2925
如题。
webstorm配置vue3语法糖
08-13
要在WebStorm中配置Vue 3语法糖，你可以按照以下步骤进行操作： 1. 确保你的WebStorm版本是最新的，以便支持Vue 3的新特性。 2. 打开WebStorm的设置(Settings)。你可以通过菜单栏的"File" -> "Settings"或使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值