VSCode中ESLint插件修复+配置教程

news2025/7/9 22:50:27

文章目录

  • vscode+eslint插件+配置教程
  • 如果不好用
      • 排查1: 如果出现后面回车符问题
      • 排查2: 保存时好了但是一瞬间代码又回来了
      • 排查3: 右下角是否开启eslint服务
      • 排查4: 如果保存还是变回去了
      • 排查5: ESLint不生效
      • 排查6: 如果都用心走了一遍, 还不行
        • 额外说明-新文件还是末尾换行问题

vscode+eslint插件+配置教程

1.打开项目, 必须让Vscode左侧工作区根目录是项目文件夹, 确保根目录下(第一级)有eslintrc.js / package.json中有eslint相关配置。

在这里插入图片描述
2.在Vscode中, 安装ESLint插件(它可以配置你工作区中的eslintrc.js相关配置来帮你修复你代码中的代码风格问题)。

在这里插入图片描述
3.给VSCode中添加配置, 让编辑器在保存(写代码区域, 按ctrl+s) 会尝试修复eslint语法检查的问题(如果是代码本身写错了,这个不管),具体添加配置步骤:

注意: 中间偏下部分, 选择用户的, 不要选择工作区的
用户: 配置一次 所有项目都生效
工作区: 配置只在当前Vscode打开的根目录下范围有效

在这里插入图片描述

4.切换成右侧json格式的配置后, 加入这个配置, 让vscode保存尝试修复问题。

在这里插入图片描述

"eslint.run": "onType",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

注意: json文件的格式,只能最外面一个大括号包裹起来
配置好以后: 应该就可以使用eslint插件+vscode来格式化和修复你的eslint语法问题了。
效果如图:
注意: 因为你的eslintrc.js中, 选择的eslint语法可能不同,有的没有分号,有的需要加分号

在这里插入图片描述

概念介绍:

  • eslint 是法官
  • eslintrc.js中配置的是法律 (具体用哪些规则)

但是无论用哪个规则, 只要你把上面4步配置好,eslint插件就会按照规则来修复你的代码

在这里插入图片描述

当然也可以在rules中添加自定义的规则

如果不好用

排查1: 如果出现后面回车符问题

在这里插入图片描述

解决:先试着运行命令: npm run lint -fix 来修复整个工程里的回车问题。
因为mac和windows文件后面的回车用的格式不同,错误原因如下:

在这里插入图片描述

如果运行后, 回车问题还在, 重启下vscode试试

排查2: 保存时好了但是一瞬间代码又回来了

在这里插入图片描述

解决:

  • 把vscode保存自带的格式化效果去掉, 在设置里, 勾去掉

在这里插入图片描述

排查3: 右下角是否开启eslint服务

你的vscode版本可能过低, 看下右下角有无eslint,如果有的话看看是否打勾勾了,如果是个x, 禁用图标,点击它开始eslint,弹窗选择 everywhere。
在这里插入图片描述

下面都是正确效果:
在这里插入图片描述

排查4: 如果保存还是变回去了

还是有可能和vscode其他美化插件冲突,禁用其他美化插件,eslint也能美化你的js代码

在这里插入图片描述
在这里插入图片描述

排查5: ESLint不生效

  1. node_modules第三方, 安装下。
  2. ESLint插件是否启动了

排查6: 如果都用心走了一遍, 还不行

关闭vscode, 重新打开, 如果还不行, 把ESLint插件卸载关闭Vscode, 再重新打开再安装试一下。

额外说明-新文件还是末尾换行问题

如果新的.vue文件右下角也还是CRLF(\r\n), 可以挨个改, 选择LF (\n), 但是比较麻烦
:在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405396.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue.config.js配置proxy代理解决跨越;proxy代理报404;

像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题。 本文我们是在vue.config.…

New Promise() 基础

阅读目录console.dir(Promise) 打印resolve 做用reject 的用法catch 的用法all 方法的用法console.dir(Promise) 打印 Promise 是一个构造函数,本身身上有 all、reject、resolve 这几个方法,原型上有 then、catch 等方法。 所以 Promise new 出来的对象…

VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11…

Vue3中slot插槽使用方式

一文搞懂Vue3中slot插槽的使用! 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件…

axios无法加载响应数据:no data found for resource with given identifier

美好的、令人遐想的日落黄昏里,出现了诡异的bug! 老师上课的时候,不好好听听,不仔细看!那么花了那么多时间找bug问题~翻了好多方案,还未解决,然后遇到了我,这个大冤种就是你&#xf…

EasyExcel解析动态表头及导出

前言 excel文件导入及导出,是日常开发中经常遇到的需求。本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程。 参考地址 https://github.com/alibaba/easyexcel 前端下载 const download …

JavaScript判断对象是否为空对象的几种方法

目录 1、空对象对应的字符串为 "{}" 2、for in 3、jquery 的 isEmptyObject()方法 4、Object.getOwnPropertyNames() 5、ES6 的 Object.keys() JSON.stringify()扩展 1、第一大特性 小结 2、第二大特性 3、第三大特性 4、第四大特性 5、第五大特性 6、第…

Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

概论: 目录 一、跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法 三、开启代理服务器 第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:&#xff08…

el-input设置必填提示(单个多个)

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上,话不多说,上才艺噻. 第一种(多个el-input同时限…

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

微信小程序--》tabBar底部栏

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

搭建博客,基于vue3 的 vitepress 轻松搞定

Ⅰ、什么是vitepress 💎 vitepress 使用场景 简单的说 ,只要 会用 markdown 语法,就能构建自己的 「博客、笔记、使用文档」等系统 ; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

【Vue脚手架安装教程】

文章目录前言一、安装Node.js二、配置淘宝镜像安装cnpm,将npm设置为淘宝镜像:二、安装vue/cli检查是否安装成功: vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)三、 创建一个vue…

Chrome浏览器的跨域设置

做前后端分离的开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,而且chrome浏览器支持可跨域的设置,但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…

webpack的面试题(吐血整理)

以下为整理的webpack面试题,如有不足之处,还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子&#…

最常见的六种跨域解决方案

目录: 前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言:什么是跨域? 跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和…

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件:jquery-confirm,它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery,那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…

IDEA如何运行SpringBoot项目(超详细截图)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、…

vue中组件的props属性(详)

今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看…

css绘制3D炫动ikun

今天做一个3D版的ikun。 先准备图片一张 代码浅析 页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。 <div class"contrainer"><div class"stage"><div class"control">…