Eslint在Vscode中使用技巧的相关技巧

ps :该文章会详细记录构建一个脚手架遇到的问题，会持续更新，请定时查看

Eslint相关​

在vscode中使用eslint插件

  1. 在vscode中用户配置没有开启eslint.enable
    Alt

  2. 在vscode中工作区配置开启eslint.enable

  1. settings.json中没有做eslint相关配置

  1. 在编写的vue文件中a这个变量没有使用应该是报错的，eslint插件是开启的

应该如何解决开启了eslint插件却没有检测代码没有生效？

有两种方式可以让eslint插件生效：

  1. 开启用户配置中的eslint.enable，这个开关如果没打开的话，即使我们配置了Eslint，检测代码也不会生效。

  2. 在settings.json文件中配置

{
"eslint.enable": true
}

代码检测功能马上就会生效

ps: 为什么会出现上面这两种情况？个人猜测，如果项目中存在settings.json文件，eslint插件优先读取settings.json的配置，发现没有配置，就去检查用户配置，发现用户配置没有开启就启动检测代码功能，如果发现有配置，并且配置未"eslint.enable": true就开启代码检测

eslint插件自动格式化代码

在.eslintrc的rules里我们可以配置自己的规则，比如我们想要在项目里统一使用单引号的格式（默认是双引号），我们可以进行如下配置：

   {"rules": {quotes: ["error", "single"]}

可是配置完发现文件都标红了，因为文件默认都是用的双引号，一个个改成单引号又很麻烦，有没有什么简单的方法呢？

我们可以通过在设置中配置editor.codeActionsOnSave在我们进行保存的时候自动格式化代码。

打开了.vscode目录下的settings.json文件，我们在这个文件里添加如下代码：

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

这个配置表示在我们保存的时候自动执行fix操作，且使用的是eslint进行fix操作。做完这个配置后我们在刚才标满红波浪线的文件夹中点击保存，发现双引号都被自动替换为单引号了，红波浪线全部消失了。
做完以上配置那么我们的项目已经可以用VsCode进行代码检测了，点击保存的时候也会帮你自动格式化一部分代码。

Prettier相关

上面通过Eslint已经可以检测代码了也可以做自动格式化了，为什么还需要Prettier呢？因为他们的侧重点其实是不同的，Eslint主要用于检测代码质量，帮你发现代码中的错误，而Prettier主要是检测代码格式，也就是检测你的代码美不美观，比如下面这行代码：

const a   ='1';

可以看到a和等号中间有很多空格，看起来很不美观，Eslint是不会帮你调整格式的，这个工作就需要交给Perttier来做。

安装Prettier插件

到vscode的extension选项卡中搜索Prettier安装即可，安装完成后有的人是可以直接保存代码，然后代码就会格式化，这是因为你的编辑器之前有设置过Format On Save这个选项
在这里插入图片描述

如果你在上面的Format On Save没有选中，可以直接到settings.json文件中添加如下代码：（个人推荐）
"editor.formatOnSave": true,
起码你知道是你配置了起了作用，如果去修改用户和工作区的Format On Save会导致新项目你无法知道究竟是哪里的配置起了作用，云里雾里。
现在的settings.json文件内容：

{// eslint相关配置// 只要安装了插件，就默认开启，即使不写这个配置"eslint.enable": true,// 保存时为编辑器运行代码操作。必须指定代码操作，并且编辑器不能关闭"editor.codeActionsOnSave": {// 控制是否应在文件保存时运行自动修复操作"source.fixAll": true,//使用eslint做代码格式化"source.fixAll.eslint": true},// 保存时自动格式化代码,这里提供给prettier做代码格式化"editor.formatOnSave": true
}

Prettier和Eslint冲突

有人说那不是会格式化两次吗，formatOnSave格式化了一次，codeActionsOnSave又格式化了一次，为什么需要两个配置项，简化成一个不行吗?这个其实社区也有给VsCode提过意见，VsCode给的答案大致意思是它们各司其职，所以还是要两个都保留。
放在Eslint和Prettier这里就是说：

  • "editor.formatOnSave": true这个配置项主要就是用来做样式的格式化，
  • "editor.codeActionsOnSave"不仅局限于样式的格式化，还会做代码检查等其它工作。

所以我们可以两个同时使用，可是Prettier和Eslint的有些规则是重合的，如果同时使用的话会存在有冲突的可能。比如当我们同时配置了Eslint和Prettier，然后给Eslint加了使用单引号的规则，那么这个时候点击保存会出现下面的情况：
在这里插入图片描述
因为Prettier里的规则使用的双引号，两个同时存在的时候，最终格式化出来的结果会以Prettier里的规则为准，也就是说Eslint和Prettier都会对文件进行格式化，可是Prettier格式化的会覆盖掉Eslint格式化的。所以最终格式化的结果是双引号的。
这个时候Eslint的检测就会报错，所以显示了红色的波浪线，所以我们需要做一些配置，对Eslint和Prettier的规则做一下合并，大家都以最终的合并的规则为准，这样就不会有冲突了。

Prettier配置文件

我们可以在.prettierrc.cjs文件里配置我们项目的规则，这里的规则会覆盖Prettier的默认规则，我们可以让在这里修改有冲突的规则，让Eslint的规则和Prettier的规则一致。比如上面的单引号和双引号的问题，我们可以新建.prettierrc.js文件，然后在里面配置如下规则：

// .prettierrc.cjs
module.exports = {singleQuote: true,
};

那么这时候Eslint和Prettier的规则都是需要使用单引号，就不会有冲突了。

Prettier配置文件加载顺序

在这里插入图片描述

  • 配置文件是有优先级的，实测：独立配置文件>vscode工作区配置>vscode用户配置，使用时请注意
  • 每次配置文件类型的切换，建议重启一下vscode，否则可能不会生效如.editorconfig -> .prettierrc.js 、 .prettierrc.js -> VsCode用户设置

解决Prettier和Eslint冲突

如果说冲突的规则很多，或者说我们也不知道哪个规则冲突了，这样一个个手动去改有冲突的规则也太麻烦了，所以有两个插件可以帮我们做这个事情，它们是eslint-plugin-prettier和eslint-config-prettier

  • eslint-config-prettier会把Eslint里和Prettier有冲突的规则关掉， 关闭eslint中与prettier相互冲突的规则。
  • eslint-plugin-prettier会将Prettier里的规则设置到Eslint里面,赋予eslint用prettier格式化代码的能力。

通过这两个插件的配合，就完成了Eslint和Prettier规则的合并，其中冲突的规则以Prettier里的规则为准。
首先需要安装这两个插件：

pnpm i eslint-plugin-prettier eslint-config-prettier -D

然后我们在Eslint的extends里添加如下配置"plugin:prettier/recommended",这一行一定要加在最后，因为后面的会覆盖前面的。
最终的配置如下：

module.exports = {env: {browser: true,es2021: true,},extends: ['eslint:recommended','plugin:vue/vue3-essential','plugin:prettier/recommended',],overrides: [{env: {node: true,},files: ['.eslintrc.{js,cjs}'],parserOptions: {sourceType: 'script',},},],parserOptions: {ecmaVersion: 'latest',sourceType: 'module',},plugins: ['vue'],// rules 中的定义会覆盖 extends 里配置组合中的设定。rules: {// quotes这条规则用来测试eslint的规则是否生效quotes: ['error', 'single'],},
};

关键在于新增加的 plugin:prettier/recommended 这个规则。让我们看看它具体做了什么

// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
module.exports = {// plugin:prettier/recommended 就是加载这个configs: {recommended: {extends: ['prettier'],plugins: ['prettier'],rules: {'prettier/prettier': 'error','arrow-body-style': 'off','prefer-arrow-callback': 'off',},},},// 其他的
}

plugin:prettier/recommended 这个语法就是加载了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 文件导出的 configs 中的 recommended 配置项。下面解析他们分别做了什么。

  • extends: ['prettier']: 通过 eslint-config-prettier 关闭eslint和prettier 相冲突的规则。
  • plugins: ['prettier']: 加载 eslint-plugin-prettier，赋予 eslint 用 prettier 格式化文档的功能
  • 'prettier/prettier': 'error': 让代码文件中不符合prettier格式化规则的都标记为错误，结合vscode-eslint插件便可以看到这些错误被标记为红色，当运行eslint --fix 命令时，将自动修复这些错误。
  • arrow-body-style 和 prefer-arrow-callback: 这两个规则在eslint 和 prettier 中存在不可解决的冲突，所以关闭掉。

至此, prettier 和 eslint 便可以无冲突协作，保存时候也能自动修复并格式化代码了。

保存后应该可以看到冲突的规则以Prettier为准了，Eslint相关的检测不会报错了，如果还没生效可以重启下VsCode试试。
在这里插入图片描述

如上图所示，prettier配置是对于字符串格式化为双引号，eslint配置字符串必须使用使用单引号，看到helloword.vue中，对于使用了双引号的字符串都报错了，这是eslint输出的错误，为什么会出现这种情况，不是说已经解决了prettier和eslint的冲突了吗？这是因为在.eslintrc.cjs配置文件中的rules选项中配置了quotes相关规则，rules 中的定义会覆盖 extends 里配置组合中的设定，解决冲突就是通过 eslint-config-prettier 关闭eslint和prettier 相冲突的规则,现在覆盖了该extends的对于quotes相关规则，所以就会报错，只需要去掉.eslintrc.cjs中quotes的规则或者修改.prettierrc.cjs中的规则。

  • 如项目中需要对字符串使用单引号，只需要修改.prettierrc.cjs中singleQuote为true
    在这里插入图片描述

  • 如项目中需要对字符串使用双引号，只需要修改.eslintrc.cjs中rules注释即可
    在这里插入图片描述

.eslintignore和.prettierignore

有些文件我们可能不想做代码检测，比如node_modules里的，dist目录里的，这时候可以配置在这两个文件里面

代码提交检查

以上我们在Vscode里配置了Eslint和Prettier来检查和规范我们的代码，但这个只是针对编辑器里的错误提示，有的人可能没装这两个插件，有的人可能看到提示视而不见，所以我们需要在代码提交的时候对代码进行检查，来保证所有人提交的代码格式都是符合要求的。

husky

husky是一个用来管理git hook的工具，git hook即在我们使用git提交代码的过程中会触发的钩子。
当我们提交git的时候，会触发一些钩子，我们可以在这些钩子里做一些检查，如果检查不通过那么不执行对应的提交操作，husky就是用来方便我们写钩子函数的，相关的文档可以看这个：husky连接

相关执行步骤如下： 首先安装husky

pnpm install husky -D

在package.json中的script中添加一条脚本命令

{"scripts": {"prepare": "husky install",},
}

该命令会在pnpm install之后运行，这样其他克隆该项目的同学就在装包的时候就会自动执行该命令来安装husky。这里我们就不重新执行pnpm install了，直接执行pnpm prepare，这个时候你会发现多了一个.husky目录。
然后使用husky命令添加pre-commit钩子，运行

pnpm husky add .husky/pre-commit "pnpm lint && pnpm format && pnpm lint:style"

执行完上面的命令后，会在.husky目录下生成一个pre-commit文件

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

敏捷方法简介

敏捷方法简介

敏捷方法简介 特点 适应性，应对变化以人为本，发挥人的特性迭代增量式开发，逐版本更新 实践 极限编程 特点 加强交流从简单做起寻求反馈实事求是 水晶系列方法 特点 以人为中心，机动性一组经过证明、对不同类型项目非常有效…
阅读更多...
【QT】Qt Charts概述

【QT】Qt Charts概述

目录 1 QtCharts模块 2 图表的主要组成部分 2.1 QChartView的功能 2.2 序列 2.3 坐标轴 2.4 图例 3 一个简单的QChart绘图程序 QtCharts是Qt提供的图表模块，在Qt5.7以前只有商业版才有Qt Charts，但是从Qt5.7开始，社区版本也包含了Qt C…
阅读更多...
蓝桥杯倒计时41天！DFS进阶1——回溯

蓝桥杯倒计时41天！DFS进阶1——回溯

DFS进阶1——回溯 先说一下回溯的板子 dfs(){ for(......){标记信息dfs()撤销标记 } }回溯模板——递归实现排列型枚举 题目分析 其实就是对1~n的数字全排列，这里就可以用dfs去做，1~n全排列我其实是确定每一个位置我应该放哪一个数字，那么…
阅读更多...
Qt程序设计-解析和生成json详解

Qt程序设计-解析和生成json详解

目录 概述 JSON的两种结构 解析和生成json 解析对象结构 生成对象结构
阅读更多...
【MySQL】mvcc以及三个重要日志

【MySQL】mvcc以及三个重要日志

🍎个人博客：个人主页 🏆个人专栏：【】数据库 ⛳️ 功不唐捐，玉汝于成 目录 前言 正文 MVCC关键概念： MVCC机制的优点： 三个重要的日志： 重做日志： 回滚日志&am…
阅读更多...
【Java项目介绍和界面搭建】拼图小游戏——打乱图片顺序

【Java项目介绍和界面搭建】拼图小游戏——打乱图片顺序

🍬 博主介绍👨‍🎓 博主介绍：大家好，我是 hacker-routing ，很高兴认识大家~ ✨主攻领域：【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …
阅读更多...
再次走到了个人发展的十字路口

再次走到了个人发展的十字路口

人生有非常多的十字路口 诸如：大学选择专业、毕业选择公司、选择技术方向、两年发展方向、三年发展方向、五年发展方向。 在之前，我选择深入做elasticsearch，做专精es搜索和优化。做了大概4年时间。 但是现在又走到了很难抉择的十字路口 第…
阅读更多...
网络仿真（一）

网络仿真（一）

网络仿真的意义 在网络规划和设计、网络设备研发、网络协议开发中，需要一种手段来反映和预测网络的性能 网络仿真可以提高网络规划设计的可靠性和准确性，明显降低网络投资风险，减少不必要的浪费 Ns-2 is a discrete event simulator Sched…
阅读更多...
持安科技亮相张江高科895创业营，总评分第三名荣获「最具创新性企业」！

持安科技亮相张江高科895创业营，总评分第三名荣获「最具创新性企业」！

近日，张江高科895创业营（第十三季）信息安全专场Demo day&结营仪式在上海集成电路设计产业园圆满落幕。本季创业营通过多种渠道在海内外甄选优秀创业项目，一共择优录取了29家入营，最终甄选出9家代表参加Demo day路演…
阅读更多...
ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ‘ssl‘报错解决

ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ‘ssl‘报错解决

安装labelme出错了 根据爆栈的提示信息，我在cmd运行以下命令之后一切正常了，解决了问题！ pip install urllib31.26.6参考网址：ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ‘ssl’ module is compile…
阅读更多...
一文彻底搞懂基于数组和链表分别实现LRU算法

一文彻底搞懂基于数组和链表分别实现LRU算法

文章目录 1. LRU算法2. 基于数组实现LRU算法3. 基于链表实现LRU算法 1. LRU算法 常见的缓存淘汰策略有三种，分别是：先进先出策略FIFO（First In，First Out）、最少使用策略LFU（Least Frequently Used&#x…
阅读更多...
董兆祥出席工业废水资源化，开创变废为宝新途径演讲

董兆祥出席工业废水资源化，开创变废为宝新途径演讲

演讲嘉宾：董兆祥 董事长 河北奥博水处理有限公司 演讲题目：工业废水资源化，开创变废为宝新途径 会议简介 “十四五”规划中提出，提高工业、能源领城智能化与信息化融合，明确“低碳经济”新的战略目标，热…
阅读更多...
springcloud：3.2测试超时机制

springcloud：3.2测试超时机制

服务提供者 Openfeign远程调用服务提供者搭建 文章地址http://t.csdnimg.cn/06iz8 PaymentController【控制层】 /*** 测试超时机制** return*/GetMapping("/timeout")public String TimeOut() {try {TimeUnit.SECONDS.sleep(5);} catch (InterruptedException e) {…
阅读更多...
应用层DDoS防护：理解、必要性与实现策略

应用层DDoS防护：理解、必要性与实现策略

一、应用层简介 应用层，也称作第七层，是OSI（开放系统互联）模型中的最高层。在这一层，数据以特定的应用程序协议格式进行传输，如HTTP、FTP、SMTP等。应用层的主要职责是为用户提供网络服务，如文…
阅读更多...
【笔记】Android Telephony 获取SubscriptionManager和TelephonyManager

【笔记】Android Telephony 获取SubscriptionManager和TelephonyManager

背景 早期的手机只有单卡 ，基本用默认卡（代码如下），那么双卡手机的业务逻辑就会存在问题。 //手动搜网的功能案例，根据卡槽/Phone对象直接获取信息private Context mcontext context; private Phone mPhone PhoneF…
阅读更多...
LeetCode 560. 和为 K 的子数组

LeetCode 560. 和为 K 的子数组

由于题目要求子数组必须连续&#xff0c;也就是需要一个和为K的区间&#xff0c;可以利用前缀和预处理后&#xff0c;枚举找到这些区间段[l,r]&#xff0c;使之满足s[r] - s[l] k。 不理解前缀和的可以先看这里。 class Solution { public:int subarraySum(vector<int>…
阅读更多...
MongoDB聚合运算符：$count

MongoDB聚合运算符：$count

文章目录 语法使用举例在$group阶段中使用在$setWindowFields阶段使用 $count聚合运算符返回分组中文档的数量。从5.0开始支持。 语法 { $count: { } }$count不需要参数 使用 $count可以用于下列聚合阶段&#xff1a; $bucket$bucket$group$setWindowFields 在$group阶段中…
阅读更多...
【vuex之五大核心概念】

【vuex之五大核心概念】

vuex:五大核心概念 一、state状态1.state的含义2.如何访问以及使用仓库的数据&#xff08;1&#xff09;通过store直接访问获取store对象 &#xff08;2&#xff09;通过辅助函数MapState 二、mutations1.作用2.严格模式3.操作流程定义 mutations 对象&#xff0c;对象中存放修…
阅读更多...
Freesia 项目引用的依赖

Freesia 项目引用的依赖

UML图 项目总依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.0</version> </parent> <groupId>com.freesia</groupId> <artifa…
阅读更多...
计算机网络_2.1 物理层概述

计算机网络_2.1 物理层概述

2.1 物理层概述 一、物理层要实现的功能二、物理层接口特性 B站 深入浅出计算机网络 2.1物理层概述 一、物理层要实现的功能 物理层要实现的功能就是在各种传输媒体上传输比特0和1&#xff0c;进而给上面的数据链路层提供透明传输比特流的服务。 数据链路层“看不见”&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023