Vue使用ESLint踩过的坑

最新推荐文章于 2023-05-10 09:01:48 发布
最新推荐文章于 2023-05-10 09:01:48 发布
阅读量2.6k 收藏 7
点赞数 1
分类专栏： 前端 # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44140478/article/details/105467767
版权
在使用Vue UI创建项目并启用代码校验时，遇到每次修改代码都会报错但再次运行服务又正常的问题。经过多次尝试和排查，发现错误源自ESLint的语法格式校验。了解到错误信息后，决定接受这种校验以提升代码质量，同时记录遇到的常见错误以助于提升编码习惯。
摘要由CSDN通过智能技术生成

这次项目用vue UI创建项目，过程中选择了代码校验，之后每次项目更改代码几乎都报错，但是重新npm run serve两次又好了。刚开始以为是代码写的不对，于是重写代码。后来又以为是项目创建的有问题，删了重新创建。前前后后经过了十几个小时。后来发现错误的背后能够隐约看到样式基本就是我想要的样子，但是每次都要运行两次太麻烦了，百度查找解决办法，有的说要禁用webpack配置文件里的"loader"但是我的项目没有webpack，于是翻看项目各个文件夹寻找哪里有使用什么"loader"的，最后根据Error指引找到了eslint-loader,但是这个东西不像webpack是在配置文件可以找到，禁用就好。我打开index.js文件以为是使用了严格模式的问题，就把第一行注释了，结果没用。后来耐心翻译一下屏幕上的error才发现是语法格式校验不通过（这时候我才知道是使用了代码校验的原因）。于是也不想着要去掉校验这一步了，虽然很苦恼（代码最后没有空格也会报错）但是有助养成良好的代码习惯，何乐而不为呢。于是总结一下遇到的error，就当养成代码习惯了，哈哈
在这里插入图片描述

1、Missing space before value for key 'methods'
最低0.47元/天 解锁文章
朕℡
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决常见ESLint语法报错问题
fenqi19980808的博客
07-30 3326
一、格式化自动添加分号，逗号 解决办法：打开VScode摁住 Ctrl + Shift + p 搜索setting，然后在里面输入以下代码： { "vetur.format.defaultFormatterOptions": { "prettier": { // 格式化不加分号 "semi": false, // 格式化为单引号 "singleQuote": true,
VUE 使用中踩过的坑
08-28
Vue 使用中踩过的坑 在 Vue 开发中，有很多潜在的坑需要注意和解决。这篇文章总结了一些常见的 Vue 使用问题，包括路由变化页面数据不刷新、异步回调函数中使用 this、setInterval 路由跳转继续运行、Vue 滚动行为...
operator=的经典错误和正确使用。转
琴剑飘零
12-27 1471
http://blog.csdn.net/sxhlovehmm/article/details/44976951
vue告警：Infix operators must be spaced 导致项目页面无法切换
weixin_44185736的博客
04-13 1万+
在vue启动页面，可以看到定位到的错误信息。 Infix operators must be spaced 翻译：中缀运算符必须间隔 定位到错误点，发现“=”与其他字符连接，无空格，给其加上空格，即 this.spuForm.pmsProductImageList= [] 改为：this.spuForm.pmsProductImageList = [] 修改保存之后，vue...
前端开发代码规范工具
sxmfendou的博客
05-10 1794
前端工程化的常见代码规范工具有：ESLint: 一个用于 JavaScript、JSX 等语言的可配置的代码检查工具。Stylelint: 一个 CSS/Less/Sass 等样式代码的 linter。Prettier: 支持多种语言的代码格式化工具。Husky: 一个流行的用于配置 git hooks 的工具。lint-staged: 对提交到暂存区的文件进行检查的工具。EditorConfig: 统一不同编辑器配置的工具。commitlint: 检查提交消息是否符合规范。
Vue使用ESLint代码的问题
叮当的猫猫的博客
07-27 739
vue插件eslint
JavaScript Standard Style
学习、记录、分享
08-07 780
以前都是用的django框架下原生模板，最近研究前后端分离，django+vue，配置完后，django部分没什么问题，vue项目npm install，npm run build 后报了一堆错误，一个个按照错误提示改正，特此记录，原来读书书写规范问题 JavaScript Standard Style English • Español (Latinoamérica) • Français ...
vue常见错误汇总（自看）
失眠的树的博客
09-09 591
解决办法汇总 eslint: Expected indentation of 2 spaces but found 4 缩进报错 ，所有缩进只能用两个空格 Newline required at end of file but not found 需要在最后的后面再加一行!!! Missing space before value for key ‘name’ 在关键字“值”之前缺少空格 A space is required after ‘,’ 在，后面要加空格 space-before-bloc
vue-eslint-parser：.vue文件的ESLint自定义解析器
02-05
Vue-Eslint解析器 .vue文件的ESLint自定义解析器。 :right_arrow_curving_up: 动机该解析器使我们可以.vue文件的<template> 。 如果我们在使用复杂的指令和表达式，我们很容易在上犯错。 该解析器和规则会捕获一些...
vue cli3.0 引入eslint 结合vscode使用
10-16
本文主要介绍如何在使用Vue CLI 3.0创建的Vue项目中引入ESLint代码检测工具，并结合Visual Studio Code（VSCode）编辑器来实现代码的实时检测与自动修复。 ### 知识点一：ESLint简介 ESLint是一款插件化的...
详解Vue取消eslint语法限制
10-18
在开发Vue应用时，我们经常使用ESLint来保证代码的质量和一致性。ESLint是一款强大的静态代码分析工具，它会检查代码中的语法错误、潜在问题，并遵循一定的编码规范。然而，在某些情况下，Vue项目的ESLint配置可能...
webpack4配置之——25：webpack引入eslint
kevin的博客
04-04 3066
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 webpack 引入 eslint 首先安装webpack支持eslint三件套: yarn add eslint eslint-loader eslint-friendly-formatter -D 然后修改webpack.dev.conf.js文件，添加如下rule： { test: /\.js$/, use:...
'operator =' must be a <Unknown> member
weixin_34184561的博客
10-02 211
赋值运算符“=”，不能以友元函数方式重载，只能重载为某类中的成员函数.
生产环境webapck.config.js配置详解
chen__cheng的博客
03-28 330
生产环境webapck.config.js配置详解1.处理css文件1.提取出css为单独文件2.css兼容性处理3.压缩css4.完整css处理代码2.js处理1.js语法检查eslint2.js兼容性处理3.js压缩处理3.html处理 生产环境不同于开发环境在于，生产环境需要优化代码，保证在上线之后运行更快且兼容各大浏览器。以开发环境中css资源打包为例：先把css资源构建一个commmjs模块，形成一个字符串，接着在js文件中创建style标签将构建的字符串插入到style标签中，而如果样式资源很多
es6
韩梦飞沙_韩亚飞
04-03 2284
Unexpected trailing comma不期望的后面的逗号==Extra semicolon额外的分号==A space is required after ','在“之后”需要一个空格==Expected consistent spacing预期一致的间距==Infix operators must be spaced内定操作符必须是间隔的==Missing space before ...
Missing space before value for key 'path'vue.js解决空格报错
热门推荐
a_靖的博客
08-19 1万+
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 找到 webpack.base.config.js文件注释掉下面的东西！！ module: { rules: [ /*{ test: /\.(js|vue)$/, loader: 'eslint-loader', e...
Expected indentation of 8 spaces but found 6
pardon110的博客
05-28 1万+
使用ESlint进行代码提示，经常报如下提示： ✘ http://eslint.org/docs/rules/key-spacing Missing space before value for key 'variables' src\components\Admin\LogIn.vue:45:19 variables:{ ^...
vue3 eslint eslint.config.js
最新发布
07-03
Vue 3 中的 ESLint 是一个用于 JavaScript 和 Vue 组件的静态代码分析工具，它可以帮助开发者在编写代码的过程中检测潜在的错误、风格问题和最佳实践。`eslint.config.js` 文件则是 ESLint 配置文件的核心，它定义了如何解析、检查和处理代码规则。 `eslint.config.js` 内容通常包括以下几个部分： 1. **基础配置**: 这里设置了一些全局的规则，如编码格式（indentation）、空格使用、注释规范等。这些规则对所有 Vue 文件生效。 2. **插件配置**: 可能会引入第三方 ESLint 插件，比如 `@vue/eslint-plugin-vue`，这是为 Vue.js 量身定制的一组规则。 3. **忽略路径或文件**: 有时需要排除特定的目录或文件不执行某些规则检查。 4. **规则的启用/禁用**: 对于一些内置规则，可以选择开启或关闭，也可以自定义规则的配置。 5. **环境和目标设置**: 如果项目有不同的环境（如生产环境、测试环境），可能需要为每个环境配置单独的规则集。 6. **钩子函数**: 如 `onProcessFile`，可以在文件被处理之前或之后执行自定义操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值