Vue中使用ESlint出现的格式问题总结

最新推荐文章于 2021-01-26 10:13:40 发布
最新推荐文章于 2021-01-26 10:13:40 发布
阅读量1.2w 收藏 1
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webnet_/article/details/104510978
版权

最近使用vue做项目的时候，每次运行程序都会出现很多格式问题，有的问题可以很简单的看明白，例如：Expected indentation of 8 spaces but found 10，删掉两个空格就可以，还有一些不明白在说什么，在此做一个总结：

  1. Closing curly brace does not appear on the same line as the subsequent block.意思是右括号需要跟下一个代码块在同一行
  2. Failed to mount component: template or render function not defined.Vue文件中template内需要包裹起来，一般使用div
  3. Block must not be padded by blank lines.多了空行，需要删掉
webnet_
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue项目中取消ESLint代码检测的步骤讲解
12-12
在Vue项目中编写代码的时候经常会碰到这种烦人的无故报错，其实这是ESLint代码，如图下： 解决办法： File>Settings>ESLint>取消检测即可（将Enable选项去勾选）>apply,如下图： 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。如果你想了解更多相关内容请查看下面相关链接
解决 VSCode 编辑 vue 项目报错 Expected indentation of 2 spaces but found 4
01-03
解决 VSCode 编辑 vue 项目报错 Expected indentation of 2 spaces but found 4解决 VSCode 编辑 vue 项目报错 Expected indentation of 2 spaces but found 4问题问题分析解决办法一解决办法二 解决 VSCode 编辑 vue 项目报错 Expected indentation of 2 spaces but found 4 系统：Win10 编辑器：VSCode 问题 使用 VSCode 在写 Vue 项目的时候，出现报错 Expected indentation of 2 spaces
VUE编译警告 Expected indentation of 8 spaces but found 12
CrisMing的博客
01-26 4894
Expected indentation of 8 spaces but found 12 在vue使用中会出现很多这样的提示 太多
你还在为Eslint报错而担忧吗？有这一篇就足够了
weixin_43848802的博客
05-02 5353
1、 错误描述：error Unnecessarily quoted property ‘xxx’ found quote-props 报错详情：找到不必要的引用属性“ xxx”，引用属性 解决方案： xxx没必要加引号，在文件中指定行内去掉xxx引号，刷新即可。 2、错误描述：Object properties must go on a new line if they aren’t al...
vue-cli4项目开启eslint保存时自动格式问题
11-20
最近新建一个vue-cli4的项目，初始化的时候没开启eslint，后面想开启的时候不好配置，这里就做个开启eslint和保存时自动修复格式的总结 vscode首先安装eslint插件 配置vscode的自动保存eslint格式 Ctrl+shift+p 把下面代码复制到里面 "editor.tabSize": 2, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, "eslint.packageManager": "yarn", "eslint.validate": [ "javascript
vue&react质检工具eslint安装使用总结
最新发布
09-21
vue&react质检工具eslint安装使用总结 vue&react质检工具eslint安装使用总结 vue&react质检工具eslint安装使用总结 vue&react质检工具eslint安装使用总结 vue&react质检工具eslint安装使用总结
关于vue告警：Closing curly brace does not appear on the same line as the subsequent block
热门推荐
菜鸟笔记
07-18 1万+
最近在用vscode写vue，有两个目的，一方面是重构下小编渣站的前端，另一方面也是主要原因： 小编见到新技术就像狼闻到肉，老光棍看到俏姑娘，心里跟猫挠似的，不下手尝尝鲜那真是食不甘味、寝不安席。 So，毛毛躁躁上下其手不亦乐乎~ 整理代码时控制台报了一个警告： ✘ http://eslint.org/docs/rules/brace-style Closing curly brace doe...
【Vue】esLint 常见报错
镜花水月
11-10 2280
ESLINT 规范下 VUE 常见报错 一、 换行错误 （1）换行过多错误 Too many blank lines at the end of file 解析：结尾处换行超过1行 （2）结尾无换行错误 Newline required at end of file but not found 解析：结尾处没有新的换行 （3）禁止换行错误 More than 1 blank line not allowed 解析：不允许换行超过1次, 只能有一行换行 二、缩进错误 （1）
Closing curly brace does not appear on the same line as the subsequent block - 代码规范性问题
liuzhen007的专栏
07-01 7994
Closing curly brace does not appear on the same line as the subsequent block. { "resource": "/g:/project/LLL/boom-meet-electron/main.js", "owner": "eslint", "code": { "value": "brace-style", "target": { "$mid": 1, "external": "https:..
es6
韩梦飞沙_韩亚飞
04-03 2017
Unexpected trailing comma不期望的后面的逗号==Extra semicolon额外的分号==A space is required after ','在“之后”需要一个空格==Expected consistent spacing预期一致的间距==Infix operators must be spaced内定操作符必须是间隔的==Missing space before ...
eslint报错信息
Sapling
03-18 4393
报错信息： Missing space before function parentheses 意思是在方法名和刮号之间需要有一格空格。 报错信息：Expected error to be handled 这是因为回调函数里面的参数error没有运用到，所以可以不设置参数，或者在回调函数内console.log(error) 3. Newline required at end ...
Vue的Eslint配置文件eslintrc.js说明与规则介绍
10-15
最近在跟着视频敲项目时，代码提示出现很多奇奇怪怪的错误提示，百度了一下是eslintrc.js文件没有配置相关命令，ESlint的语法检测真的令人抓狂，现在总结一下这些命令的解释
vue项目关闭eslint校验
11-30
简介eslint eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。 官方文档：https://eslint.org 这篇文章总结了eslint的规则：Eslint规则说明 关闭eslint校验 有了eslint的校验，可以来规范开发人员的代码，是挺好的。但是有些像缩进、空格、空白行之类的规范，在开发过程中一直报错，未免太过于苛刻了。所以，我还是会选择关闭eslint校验。 下面就介绍一下vue项目中如何关闭这个校验。 首先我们在创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，我们选
vue高仿饿了么vue-router版本不一致问题解决
webnet_的博客
02-02 1755
问题 在学习的过程中遇到了三个问题： 1、vue-router版本不一致，不能按照老师的方法来 2、按照官网中的方法写，出现了duplicate declaration “router” 的问题。 3、一番随心修改后编译过了，网页上什么都没有。 解决方案 import Vue from 'vue'; import App from './App'; import Router from 'vue-...
360前端星之小程序
webnet_的博客
04-12 275
小程序简介 h5：开发速度快，较长的白屏时间 app：开发成本较高，各个平台差异较大 小程序相对于H5，除了第一次加载，均从本地运行，提高了启动速度 相对app，降低了开发成本 技术栈 HTML/CSS/JS NodeJS 移动适配 HTTP协议、HTTPS 简单了解OAuth2 GIT 类似技术 Cordova：通过webview渲染，通过插件调用系统服务 PWA：Service Wo...
微信小程序踩坑记录
webnet_的博客
06-02 263
最近在做小程序，在写的过程中踩了一些坑，有些还不太清楚原因，记录一下，避免以后还踩。 background-image不显示 解决方案：将background-image相关的代码写到wxml的style中 当给两个view设置相同的父class但本身的class不同时，后面的那个view不显示，需要把两个自身的class也改成相同的才能正常显示。 在两个view间画线，例如view1和view2中间画一条线view3，如果view1和view2的宽度加起来正好是手机界面的宽度，需要把画线的view
360前端星计划
webnet_的博客
04-09 202
前端星计划之CSS 前端星计划之JavaScript从入门到放弃 前端星计划之Web标准 前端星计划之前端常用的HTTP知识
360前端星计划之web前端点播直播
webnet_的博客
04-12 167
什么是视频 格式与内容 文件扩展名（媒体封装格式） 媒体封装格式不等于音视频编码格式 文件内容： 头信息（格式、时长、帧率、码率、分辨率） 索引信息 视频数据 视频大多采用YUV颜色空间做抽样存储 帧内预测和帧间预测复用可以进一步有效的压缩数据 P帧（前向预测帧）、B项（双向预测帧）、I帧（参考帧） 通过上述技术综合，生成视频编码器 音频数据 对连续的声波进行采样，做数字化存储 还原...
vscode vue代码eslint格式化
07-15
### 回答1： VSCode可以通过安装插件来实现Vue代码的ESLint格式化。 首先，在VSCode中打开扩展面板（快捷键为Ctrl + Shift + X），搜索并安装"ESLint"插件。安装完成后，重新加载VSCode。 接下来，在项目的根目录下找到并打开".eslintrc.js"文件，确保已按照项目需求正确配置了ESLint规则。如果没有该文件，则需要手动创建一个。在文件中，可以添加、修改或删除适用的规则。例如，可以配置规则来检查和自动修复代码中的缩进、引号等问题。 然后，在VSCode的设置中，搜索"eslint.autoFixOnSave"选项，并将其设置为true。这会在保存文件时自动运行ESLint，并尝试修复代码中的格式问题。此外，还可以设置"eslint.validate"选项来指定在保存文件时进行ESLint验证的文件类型。对于Vue项目，可以将其配置为"vue"，以确保在保存Vue文件时进行ESLint验证。 最后，在Vue代码文件中，可以根据需要手动触发ESLint格式化。可以使用快捷键（在Windows下为Shift + Alt + F，在Mac下为Shift + Option + F），或者右键点击编辑器空白处，选择"Format Document"选项来格式化当前文件。 总结起来，要在VSCode中进行Vue代码的ESLint格式化，需要先安装并配置ESLint插件，更新VSCode设置以自动修复问题，在需要时手动触发格式化操作。这样可以有效地帮助我们遵循代码规范，提高代码质量。 ### 回答2： 在VSCode中使用Vue框架进行开发时，可以借助ESLint来格式化代码，以保持代码的一致性和可读性。 首先，在VSCode的插件商店中搜索并安装ESLint插件。然后，在项目的根目录下创建一个.eslintrc.js或者.eslintrc.json的配置文件。 在配置文件中，可以指定要使用的ESLint规则，以及各种代码风格规范。一般来说，我们可以选择一种预设规则集，比如"eslint:recommended"或者"plugin:vue/recommended"，它们包含了一系列通用的规则以及针对Vue的特定规则。 此外，我们还可以根据团队的要求，自定义一些规则，比如缩进、引号、变量命名等等。可以根据自己的代码风格和习惯来设置这些规则。 配置完成后，可以在VSCode的设置中，开启"eslint.autoFixOnSave"选项，这样在保存文件时，ESLint会自动格式化代码并修复一些常见的错误。 在使用过程中，可能会遇到一些问题，比如与其他插件的冲突，或者某些规则与项目要求不符。此时，可以根据具体情况进行相应的调整和配置。 总之，通过VSCode和ESLint的配合使用，可以有效地进行Vue代码的格式化和规范化，提高代码的质量和可维护性。 ### 回答3： VSCode是一款非常流行且功能强大的代码编辑器，对于Vue开发来说，它也提供了很好的支持。其中一个重要的功能就是ESLint的代码格式化。 ESLint是一种JavaScript代码的静态分析工具，可以用来检查和格式化代码。Vue项目中使用ESLint可以让开发者在编写代码时保持一致的代码风格，并且能够及时发现潜在的问题。 在VSCode中使用ESLint进行代码格式化，首先需要安装ESLint插件。打开VSCode，点击左侧的扩展按钮，搜索并安装"ESLint"插件。安装完成后，重启VSCode。 接下来，需要在项目中配置ESLint。在Vue项目的根目录下，创建一个名为".eslintrc.js"的文件，并在其中添加以下内容： ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'eslint:recommended', ], parserOptions: { parser: 'babel-eslint', }, rules: { // 在这里可以添加自定义的编码规范 }, }; ``` 在这个配置文件中，我们将ESLint的规则继承了"plugin:vue/essential"和"eslint:recommended"，同时也可以在"rules"中添加自定义的编码规范。 保存配置文件后，当我们在VSCode中打开Vue项目中的代码文件时，ESLint就会自动进行代码格式化。它会根据配置文件中的规则，对代码进行静态分析，并给出错误或警告信息。可以通过按下Ctrl + Shift + P，然后输入"Format Document"来手动触发代码格式化。 总结一下，在VSCode中使用ESLint进行Vue代码的格式化，需要安装ESLint插件，并在项目中配置ESLint。这样，开发者就可以在代码编写过程中保持一致的代码风格，并及时发现潜在的问题。希望这个回答对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值