VSCode中配置prettier和ESLint
文章目录
- 了解ESLint和Prettier的作用
- prettier配置
- ESLint配置
- 常见问答
- ESLint 和Prettier 有什么区别?
- 为什么我应该同时使用ESLint 和Prettier?
- 在使用ESLint 和Prettier 时,有可能出现它们之间的规则冲突吗?
- 我已经在项目中使用了ESLint,如何将Prettier 添加进来?
- 使用ESLint 和Prettier 会不会使我的构建过程变慢?
- 相关阅读
- 参考
了解ESLint和Prettier的作用
在编写JavaScript或TypeScript时,ESLint是一个常用的静态代码分析工具,它可以帮助开发者在编写代码时识别和修复潜在的问题。而Prettier则是一个代码格式化工具,它可以确保代码的格式统一,并避免因格式问题引发的不必要的代码审查。
许多流行的代码编辑器都有ESLint和Prettier的插件。例如,在VS Code中,你可以安装“ESLint”和“Prettier – Code formatter”插件。这样在写代码的时候,编辑器将会实时地标出错误和警告,并在保存时自动格式化代码。
最终,通过正确配置ESLint和Prettier,你不仅可以确保代码的质量,还可以节省大量的代码审查时间。此外,它还为团队提供了一个统一的代码风格,使得代码更加整洁、清晰,从而提高团队的开发效率。
prettier配置
prettier是一款代码格式化工具:
- 一个“有态度”的代码格式化工具
- 支持大量编程语言
- 已集成到大多数编辑器中
它的基本使用过程如下:

正如上面的流程图所示,prettier不过就是一个安装在机器上的软件,它接收源代码,配合prettier的配置,完成对源代码的格式化。那么如何安装prettier呢?
在VSCode中,使用prettier的思路是一样的。首先,我们安装prettier插件:

安装完成以后,我们会看到右下角插件的安装结果:

右键代码 - Format Document With…,可以选择使用prettier进行格式化:


格式化以后,我们会看到插件的输出,能够更加仔细的查看处理过程:

ESLint配置
直接在VSCode中按照ESLint插件

常见问答
ESLint 和Prettier 有什么区别?
答:ESLint 主要是用于识别和报告JavaScript 代码中的模式,它可以帮助开发者找出可能的错误或不符合代码规范的地方。Prettier 则是一个代码格式化工具,它将代码转化为统一的风格。简单地说,ESLint 关心代码“做了什么”,而Prettier 关心代码“看起来如何”。
为什么我应该同时使用ESLint 和Prettier?
答:使用 ESLint 和 Prettier 的组合可以让你在编写代码的时候保证代码质量和统一的代码风格。ESLint 可以帮助你避免常见的JavaScript 错误,而Prettier 则确保你的代码风格是一致的。这种组合可以极大提高代码的可读性和维护性。
在使用ESLint 和Prettier 时,有可能出现它们之间的规则冲突吗?
答:是的,有可能出现规则冲突。这是因为ESLint 和Prettier 可能都会对某些代码模式进行处理。为了解决这个问题,建议使用如eslint-config-prettier 这样的工具来关闭与Prettier 冲突的ESLint 规则。
我已经在项目中使用了ESLint,如何将Prettier 添加进来?
答:你可以首先安装Prettier 作为开发依赖,并为它设置一个配置文件。接下来,为了确保Prettier 和ESLint 之间没有规则冲突,可以使用eslint-config-prettier。最后,你可以在项目的构建或提交脚本中加入Prettier,以确保每次代码提交之前代码格式都是统一的。
使用ESLint 和Prettier 会不会使我的构建过程变慢?
答:通常情况下,引入这两个工具对构建时间的影响是微小的。但确实会增加一些构建时间,尤其是在大型项目中。然而,考虑到它们为项目带来的长期质量和维护性提升,这点额外的时间是值得的。如果你真的关心构建速度,可以考虑只在提交代码或进行代码审查时运行这些工具。
相关阅读
一文彻底读懂ESLint
你有没有被 ESLint 和 Prettier 折磨过? 一文搞懂ESLint 基本配置与使用
参考
详解prettier使用以及与主流IDE的配合
如何设置ESLint和Prettier
相关文章:
VSCode中配置prettier和ESLint
文章目录 了解ESLint和Prettier的作用prettier配置ESLint配置常见问答ESLint 和Prettier 有什么区别?为什么我应该同时使用ESLint 和Prettier?在使用ESLint 和Prettier 时,有可能出现它们之间的规则冲突吗?我已经在项目中使用了ES…...
如何将本地websocket发布至公网并实现远程访问服务端
文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…...
分享 | 软件测试的基本流程是什么?软件测试流程详细介绍
软件测试 软件测试和软件开发一样,是一个比较复杂的工作过程,如果无章法可循,随意进行测试势必会造成测试工作的混乱。为了使测试工作标准化、规范化,并且快速、高效、高质量地完成测试工作,需要制订完整且具体的测试…...
浮点数的转换--IEEE 754
IEEE754标准是一种浮点数表示标准,一般分为 单精度(32位的二进制数);双精度(64位的二进制数) 根据国际标准IEEE754,任意一个二进制浮点数V可以表示为下面形式: V (-1)^s *&#…...
若依框架介绍
RuoYi(若依)是一款基于Spring Boot、Spring Cloud等开源框架搭建的企业级开发平台,旨在提供全面的解决方案,简化企业级应用开发,提高开发效率。 主要特点: 1. 模块化设计 RuoYi采用模块化的设计࿰…...
iMazing2024免费版iOS移动设备管理软件
以自己的方式管理iPhone,让备受信赖的软件为您传输和保存音乐、消息、文件和数据。安全备份任何 iPhone、iPad 或 iPod touch。iMazing 功能强大、易于使用,称得上是 Mac 和 PC 上最好的 iOS 设备管理器。 正在为iTunes繁琐的操作发愁?设备数…...
Zookeeper整合Java实战,不同客户端使用汇总
Java学习面试指南:https://javaxiaobear.cn ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。可供选择的Java客户端API有: ZooKeeper官方的Java客户端API。 第三方的Java客户端API,比如Curator。 ZooKeeper官方的客户…...
【python】Ubuntu下安装spyder及matplotlib中文显示
一、查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy尝试用cat /etc/debian_version命令,竟然可以显示出来Debian的版本。 $ cat /etc/debian_version …...
《运维人员的未来:IT界的“万金油“如何继续闪耀光芒》
文章目录 每日一句正能量前言35岁被称为运维半衰期,究竟为何?如何顺利过渡半衰期运维的职业发展路径后记 每日一句正能量 凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历…...
ip addr和ifconfig
ip addr可以显示更多信息,包括为启动的网络驱动如wlan,而ifocnfig只显示在线的驱动。若wlan是down的,则ip addr会显示信息,ifconfig不会显示信息。 ip addr: ifconfig:...
Crow:Middlewares 庖丁解牛7 after_handlers_call_helper
Crow:Middlewares 庖丁解牛6 middleware_call_helper-CSDN博客 介绍了对插件before_handle的调用 当完成了detail::middleware_call_helper的调用后,如果没有在before_handle中设置req被终止处理,也就是 if (!res.completed_) {need_to_call_after_handlers_ = true;handler…...
ts相关笔记(extends、infer、Pick、Omit)
最近刷了本ts小册,对一些知识点做下笔记。 extends extends 是一个关键字,用于对类型参数做一些约束。 A extends B 意味着 A 是 B 的子类型,比如下面是成立的 ‘abc’ extends string599 extends number 看下面例子: type …...
8.21 PowerBI系列之DAX函数专题-帕累托分析
需求 实现 1 按商品小类累积 var rollup_sales calculate(//计算当前累计销售额 [销售额], filter(allselected(order_2[产品小类]),sum(order_2[订单金额])<[销售额]) ) //按小类累积金额,filter内的销售额为选中的各小类的销售额 //金额从大到小累积,用&l…...
结构体-2-测试排名
22-结构体-2-测试排名 [命题人 : 外部导入] 时间限制 : 1.000 sec 内存限制 : 128 MB 题目描述 为了提升同学们的编程能力,老师们会在平时进行C语言的上机测试,了解班上同学的学习情况,对于一些测试成绩较差的同学,老师会进行督促…...
LeetCode刷题---快乐数
解题思路 该题的解题思路为使用哈希表来存储每次平方的和的结果,看是否有重复的数,如果存在第n次的平方和的数和第i次(i<n)平方和的数想等,那么它就不是一个快乐数。否则,则为快乐数。 代码实现: public boolean i…...
web前端游戏项目-辨色大比拼【附源码】
web前端游戏项目-辨色大比拼【附源码】 《辨色大比拼》是一个旨在测试和提升玩家颜色识别能力的在线游戏。在游戏中,玩家将通过辨识颜色来解谜并推进游戏进程。辨色大比拼也是一个寓教于乐的游戏,它不仅提供了一个有趣的辨色挑战,还能帮助玩…...
MongoDB操作_数据库_集合
.......................................................................................................................................................... 三、MongoDB操作 3.1 数据库操作 一个mongodb中可以建立多个数据库。 MongoDB的默认数据库为"test…...
50个免费的 AI 工具,提升工作效率(附网址)
上次我们已经介绍了20个精选的提高工作效率的免费AI工具,但如果你觉得这些AI工具还不过瘾的话,想进一步成为职场中最了解AI的人,本文将汇总介绍免费最新的50个AI工具。 DeepSwap DeepSwap 是一个基于 AI 的工具,适用于想要制作令人…...
g++ strip debug
strip(1) command_--strip-debug-CSDN博客 strip main.outll main.out -rwxr-xr-x 1 root root 6272 Mar 22 16:14 main.outfile main.out main.out: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.32, Bu…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
