代码规范之-理解ESLint、Prettier、EditorConfig

前言

       团队多人协同开发项目,困扰团队管理的一个很大的问题就是:无可避免地会出现每个开发者编码习惯不同、代码风格迥异,为了代码高可用、可维护性,需要从项目管理上尽量统一和规范代码。理想的方式需要在项目工程化方面,借助可灵活配置的工具自动化解决。

       而现在无论是开源项目还是成熟的团队项目,根目录下出现了越来越多的配置文件,这是前端项目在快速演变、逐渐完善健壮的一种表现,那面对这些配置文件,如果是一脸懵的状态,傻傻分不清楚不太行。

     本篇文章便来介绍跟编码风格、代码规范相关的几个场景的配置功能:

     ESLint、Prettier、EditorConfig

     借助于EditorConfig+Prettier+ESLint 的组合,项目中通过统一约定配置,可以在团队成员在代码开发过程中就检查、约束、美化代码,统一编码风格;且可以省去很多的沟通成本,提前暴露代码缺陷,减少后期二次修改代码的风险。

EditorConfig

EditorConfig包含的内容比较少,主要是配置我们的编辑器,编写代码时的简单规则,不足以满足项目更多需求;

ESLint

ESLint 是一个在 JavaScript 代码中通过规则模式匹配作代码识别和报告的插件化的检测工具,它的目的是保证代码规范的一致性和及时发现代码问题、提前避免错误发生。
ESLint 的关注点是代码质量,检查代码风格并且会提示不符合风格规范的代码。除此之外 ESLint 也具有一部分代码格式化的功能。

Lint发展历程

ESLint最初是由Nicholas C. Zakas ( JavaScript 高级程序设计 作者)于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

JavaScript发展历程中出现的Lint工具:JSLint->JSHint->ESLint/TSLint;

JSLint是最早出现的 Lint 工具,不支持灵活拓展及配置,必须接受它所有规则;JSHint 在 JSLint 的基础上提供了一定的配置项,给了开发者较大的自由,但无法添加自定义规则;

Zakas创建ESLint的初衷就是觉得当时的JSHint存在局限性,无法添加自定义规则。

ES6的出现后则让ESLint迅速大火。因为ES6新增了很多语法,JSHint 短期内无法提供支持,而 ESLint 只需要有合适的解析器以及拓展校验规则 就能够进行 Lint 检查。此时babel就为兼容ESLint开发了 babel-eslint解析器,提供支持的同时也让ESLint成为最快支持 ES6 语法的 Lint 工具。

关于TSLint(已停止维护)

但自2019 年 1 月起,根据 TSLint 的官方声明,TSLint 正在慢慢被废弃,并会逐步迁移到 ESLint作为代码检查的工具。至于停止维护的原因:一是ESLint社区更活跃、越来越完善,且社区对ESLint的拥护声浪越来越高,相反TSLint则完善度不够;二是在持续迭代、支持新特性的过程中发现TSLint 的规则运作方式存在架构性的性能问题,相反的 ESLint 则具有更高效能的架构。

支持的配置文件格式:

JavaScript- 使用 .eslintrc.js 然后输出一个配置对象。

YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。

JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。

(弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。

package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

.eslintrc.js

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

.eslintrc

package.json

遇到项目内有多个层叠配置时,采用就近原则作为高优先级;

Prettier

Prettier是一个诞生于2016年就迅速流行起来的专注于代码格式化的工具。出道即巅峰。Prettier只关注格式化,并不具有lint检查语法等能力。它通过解析代码并匹配自己的一套规则,来强制执行一致的代码展示格式。它在美化代码方面有很大的优势,配合ESLint可以对ESLint格式化基础上做一个很好的补充。

VSCode内置的代码格式化工具可以指定为由Prettier接管,此时右下角会显示为Prettier。可以自行配置格式化触发机制:换行时格式化、保存文件时格式化、还是自行快捷键触发;

配置项

在VSCode 首选项-设置-扩展.settings.json中更改通用配置;

在具体项目根目录设置.prettierrc.js单独配置;

module.exports = {// 一行最多 120 字符printWidth: 120,// 使用 2 个空格缩进tabWidth: 2,// 不使用缩进符,而使用空格useTabs: false,// 行尾需要有分号semi: false,// 使用单引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: 'as-needed',// jsx 不使用单引号,而使用双引号jsxSingleQuote: false,// 末尾需要有逗号trailingComma: 'none',// 大括号内的首尾需要空格bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数,只有一个参数的时候,也需要括号arrowParens: 'always',// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 @prettierrequirePragma: false,// 不需要自动在文件开头插入 @prettierinsertPragma: false,// 使用默认的折行标准proseWrap: 'preserve',// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: 'css',// vue 文件中的 script 和 style 内不用缩进vueIndentScriptAndStyle: false,// 换行符使用 lfendOfLine: 'lf',// 格式化嵌入的内容embeddedLanguageFormatting: 'auto',// html, vue, jsx 中每个属性占一行singleAttributePerLine: false
}

格式化的生效策略同样是就近原则,一步步匹配目标文件最近父目录的配置文件,越近优先级越高。

总结

1、在代码格式化时采用Perttier规则,在代码校验时使用ESLint

2、遇到项目内有多个层叠配置时,采用就近原则作为高优先级

3、ESLint等解决的是团队开发规范的问题,并不能解决其他诸如编码能力、代码合理性等问题, 还属于工程化中比较弱的一环。

  • EditorConfig 是用来抹平编辑器差异的,比如文件编码,锁进格式等
  • ESLint 关注于代码质量校验 和 代码格式校验,配合插件支持autoFix和错误提示,完全可插拔
  • Prettier Prettier只关注代码格式,也支持自动修复,规则和ESLint不同

Q&A

如何解决Prettier与ESLint的配置冲突问题?

解决方式一:要么修改 eslintrc,要么修改 prettierrc 配置,让它们配置保持一致;

解决方式二:禁用 ESLint中和Prettier配置有冲突的规则;再使用 Prettier 来替代 ESLint 的格式化功能;

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

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

相关文章

Kafka官方生产者和消费者脚本简单使用

问题 怎样使用Kafka官方生产者和消费者脚本进行消费生产和消费?这里假设已经下载了kafka官方文件,并已经解压. 生产者配置文件 producer_hr.properties bootstrap.servers10.xx.xx.xxx:9092,10.xx.xx.xxx:9092,10.xx.xx.xxx:9092 compression.typenone security.protocolS…

部署jekins遇到的问题

jdk问题 我用的jdk版本是21的结果版本太新了,启动jekins服务的时候总是报错最后在jekins的安装目录下面的jekinsErr.log查看日志发现是jdk问题最后换了一个17版本的就解决了。 unity和jekins jekins和Git源码管理 jekins和Git联动使用 我想让jekins每次打包的时…

【css/vue】使用css变量,在同一个页面根据不同情况改变字号等样式

解决方法是&#xff1a;将 css 的属性使用 v-bind 与 Vue 组件的属性绑定&#xff0c;当组件的属性变化时&#xff0c;css 对应的属性值也就会随之变化&#xff1b; 具体实现代码&#xff1a; <template><div><span class"navTitle">标题名</s…

3D电路板在线渲染案例

从概念上讲,这是有道理的,因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。 然而,我们生活在一个 3 维世界中,能够以这种方式可视化电路以及相应的组件,对于设计过程很有帮助。本文将介绍KiCad中基本的3D查看功能,以及如何使用NSDT 3DConvert在线…

Day38力扣打卡

打卡记录 网格中的最小路径代价&#xff08;动态规划&#xff09; 链接 class Solution:def minPathCost(self, grid: List[List[int]], moveCost: List[List[int]]) -> int:m, n len(grid), len(grid[0])f [[0x3f3f3f3f3f] * n for _ in range(m)]f[0] grid[0]for i i…

【洛谷 B2010】带余除法 题解(顺序结构+四则运算)

带余除法 题目描述 给定被除数和除数&#xff0c;求整数商及余数。此题中请使用默认的整除和取余运算&#xff0c;无需对结果进行任何特殊处理。 输入格式 一行&#xff0c;包含两个整数&#xff0c;依次为被除数和除数&#xff08;除数非零&#xff09;&#xff0c;中间用…

Sentinel 授权规则 (AuthorityRule)

Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 SpringbootDubboNacos 集成 Sentinel&…

一分钟快速了解Python3.12新特性

Python 3.12&#xff0c;作为Python编程语言的最新稳定版&#xff0c;引入了一系列对语言和标准库的改变&#xff0c;发布于2023年10月2日。重点变化包括&#xff1a; 新语法特性: PEP 695 引入类型形参语法和 type 语句&#xff0c;允许创建更明确的泛型类和函数。PEP 701 改进…

Unity 三维场景的搭建 软件构造实验报告

实验2&#xff1a;仿真系统功能实现 1.实验目的 &#xff08;1&#xff09;熟悉在Unity中设置仿真场景&#xff1b; &#xff08;2&#xff09;熟悉在Unity中C#语言的使用&#xff1b; &#xff08;3&#xff09;熟悉仿真功能的实现。 2.实验内容 新建一个仿真场景&#x…

SpringBoot_websocket实战

SpringBoot_websocket实战 前言1.websocket入门1.1 websocket最小化配置1.1.1 后端配置1.1.2 前端配置 1.2 websocket使用sockjs1.2.1 后端配置1.2.2 前端配置 1.3 websocket使用stomp协议1.3.1 后端配置1.3.2 前端配置 2.websocket进阶2.1 websocket与stomp有什么区别2.2 webs…

思维模型 重叠效应

本系列文章 主要是 分享 思维模型 &#xff0c;涉及各个领域&#xff0c;重在提升认知。相似内容易被混淆或遗忘。 1 重叠效应的应用 1.1 重叠效应在教育中的应用 1 通过避免重叠效应提升学习效率 为了避免重叠效应&#xff0c;通过对比、归纳等方法来帮助学生更好地理解和掌…

黑马React18: Redux

黑马React: Redux Date: November 19, 2023 Sum: Redux基础、Redux工具、调试、美团案例 Redux介绍 Redux 是React最常用的集中状态管理工具&#xff0c;类似于Vue中的Pinia&#xff08;Vuex&#xff09;&#xff0c;可以独立于框架运行 作用&#xff1a;通过集中管理的方式管…

VPS配置了swap没发挥作用怎么办

1 swap配置了但没用上 我的服务器内存是2G&#xff0c;装多一点东西就不够用&#xff0c;于是我给他分配了2G的swap&#xff0c;等了几小时&#xff0c;swap还是一点都没有使用 Linux中Swap&#xff08;即&#xff1a;交换分区&#xff09;&#xff0c;类似于Windows的虚拟内存…

MongoDB的常用操作以及python连接MongoDB

一,MongoDB的启动 mongod --dbpath..\data\db mongodb注意同时开两个窗口&#xff0c;不要关&#xff01; 二, MongoDB的简单使用 简单介绍一下mongoDB中一些操作 show dbs: 显示所有数据库 show databases: 显示所有数据库 use xxxx: 使用指定数据库/创建数据库&#xff08…

Linux 与大型机 z/OS

大型机 国际商业机器公司&#xff08;International Business Machine Corporation&#xff09;&#xff0c;简称为 IBM&#xff0c;实际上是当今大型机的代名词。作为大型企业技术解决方案提供商&#xff0c;IBM 在其漫长的生命周期中生产了各种产品。 他们的前身是计算、制表…

时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiLSTM-Adaboost…

【精选】Ajax技术知识点合集

Ajax技术详解 Ajax简介 Ajax 即“Asynchronous Javascript And XML”&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建 交互式、快速动态应用的网页开发技术&#xff0c;无需重新加载整个网页的情况下&#xff0c;能够更新页面局 部数据的技术。通过在…

Scala如何写一个通用的游戏数据爬虫程序

以前想要获取一些网站数据的时候&#xff0c;都是通过人工手动复制粘贴&#xff0c;这样的效率及其低下。数据少无所谓&#xff0c;如果需要采集大量数据&#xff0c;手动就显得乏力了。半夜睡不着&#xff0c;爬起来写一段有关游戏商品数据的爬虫通用模板&#xff0c;希望能帮…

专业pdf编辑工具PDF Expert mac中文版特点介绍

PDF Expert mac是一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 PDF Expert mac软件特点 PDF编辑&#xff1a;PDF Expert提供了丰富的PDF编辑功能&#xff0c;包括添加、删除、移动、旋转、缩放、裁剪等操作…

基于顺序表实现通讯录

1.功能实现 功能要求 1&#xff09;至少能够存储100个人的通讯信息 2&#xff09;能够保存用户信息&#xff1a;名字、性别、年龄、电话、地址等 3&#xff09;增加联系人信息 4&#xff09;删除指定联系人 5&#xff09;查找制定联系人 6&#xff09;修改指定联系人 7&#xf…