editorconfig、eslint、prettier三者的区别、介绍及使用
每次搭建新项目都少不了这些工具,但时间一久就忘记了,下次搭新项目时又要四处查官方文档,因此特此记录,主要内容是对这三个工具的理解,以及具体使用方式
editorconfig
理解
先看官网的定义:
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
EditorConfig 帮助使用不同IDE开发同一个项目的开发者,维持固定统一的代码风格。
简而言之,EditorConfig就是为了抹平不同IDE的代码格式差异的
使用
- 安装插件
某些编辑器已经内置了EditorConfig插件,无需另外安装了,比如 WebStorm、VisualStudio、pyCharm等等
某些编辑器没有内置,需要自行安装插件,比如vscode,需要安装 EditorConfig for VS Code
- 添加配置文件
定义格式规则,避免常见的代码格式不一致和丑陋的 diffs
通常在项目根目录下,添加.editorconfig
配置文件,贴一份常见的配置
# http://editorconfig.org
root = true
# 说明
## 设置文件编码为 UTF-8;
## 用两个空格代替制表符;
## 在保存时删除尾部的空白字符;
## 在文件结尾添加一个空白行;
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
ESLint
理解
eslint的关注点是代码质量和代码格式。
何为代码质量?如未使用变量、三等号、全局变量声明等问题
何为代码格式?如单行代码太长、tab的长度、空格、逗号,单双引号等问题
对于质量和格式问题,eslint可以给出错误或警告提示,也可以自动修复,autofix
使用
eslint的原则是一切皆可配,没有什么必须要禁止,或必须要使用的规则,如果有,这些规则应该从语言本身就限制掉
灵活是有代价的,虽然每个规则都可配,但要配置那么多规则也是及其繁琐的,因此有人提供了一些preset,也就是预设规则,通常由一些最佳实践集成而来
- 生成配置文件
使用官网的CLI,按自己的项目的需求生成。在项目根目录执行以下命令:
npx eslint --init
回答几个问题后,比如配置文件格式、是否使用react,vue,是否支持typescript等,则会自动在根目录下生成对应的配置文件
- 下载插件
以vscode为例,下载ESLint
插件,插件会根据项目根目录下的配置文件,校验代码格式
如果自动修复 autoFix 功能,需进一步配置插件:
- 左下角打开配置(Setting),以json格式展示
- 给setting.json添加如下配置项:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
这样,对于可自动修复的格式错误,在保存文件时,eslint会自动帮我们修复
此外,如果项目对格式强制要求,还可加载husky和lint-staged在commit前对更改的代码做lint校验(前者用来给git流程添加钩子,后者用来给只更改的代码而不是整个项目做lint),lint不通过则不予commit
(题外话:个人不太建议这种方式,每次commit都要多等几秒,太慢了,还是尽量靠自觉 )
Prettier
Prettier只关注代码格式。在之前很流行,尤其是在eslint还不支持autoFix时。
它即可单独使用,也可以配合编辑器使用,或和eslint一起使用。
这里有人可能会有疑问,eslint不也关注代码格式,做格式校验吗? 为啥还要用Prettier?这是因为一是在之前eslint不支持autoFix, 二是两个的规则并不完全相同
其实,笔者也甚是不喜这么多的配置文件,因此最近的项目便不加再Prettier了,只用eslint做代码质量和格式的校验,加上autoFix,基本够用了。
所以这里不再细说Prettier的使用了,有需要请移步 Prettier官网
总结
- EditorConfig 是用来抹平编辑器差异的,比如文件编码,锁进格式等
- ESLint 关注于代码质量校验 和 代码格式校验,配合插件支持autoFix和错误提示,完全可插拔
- Prettier Prettier只关注代码格式,也支持自动修复,规则和ESLint不同
editorconfig、eslint、prettier三者的区别、介绍及使用的更多相关文章
- eslint prettier editrorconfig - 写出干净的前端代码
FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...
- VSCode 使用 ESLint + Prettier 来统一 JS 代码
环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...
- 前端规范之JS代码规范(ESLint + Prettier)
代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...
- UIColor,CGColor,CIColor三者的区别和联系
UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...
- jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- Linux操作系统--help、man和info工具的区别介绍
http://wenda.tianya.cn/wenda/thread?tid=1d4b0f172f958833Linux操作系统--help.man和info工具的区别介绍 Linux操作系统为我们 ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- 创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky)
创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky) Cui, Richard Chikun 本文笔者将带你在Github代码仓库创建TypeScript代 ...
随机推荐
- springboot框架里的pom.xml文件里的m不显示,只有标红和<>符号的解决方法
这是因为没有把pom.xml文件加入到maven工程中,所以需要如图所示 亲测有效,原文链接:https://blog.csdn.net/qq_41026946/article/details/107 ...
- vue高级
1.nrm nrm提供了一些最常用的npm包镜像地址,可以快速切换服务器地址下载资源.它只是提供了地址,并不是装包工具.如果没有安装npm,需要安装node,然后直接安装即可.node下载链接:htt ...
- 分布式流转开发常见报错FAQ
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] HarmonyOS开发中分布式协同是非常重要的一个功能,大家在刚接触的时候可能会出现各种各样的错误.我 ...
- vue-axios插件、django-cors插件、及vue如何使用第三方前端样式库:element/jQuery/bootstrap
目录 一.vue的ajax插件:axios 1.安装axios 2.axios参数 二.CORS跨域问题(同源策略) 1.Django解决CORS跨域问题方法 三.前端请求携带参数及Django后台如 ...
- JUnit5学习之六:参数化测试(Parameterized Tests)基础
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- vue导出数据excel
下载两个依赖 npm install file-save xlsx 创建两个文件 Blob.js与Export2Excel.js 参考地址:文件地址 在Export2Excel.js中修改引入地址,注 ...
- 【机制】js中的this指向
1.this的使用场景 我们先把this的使用场景分为两大类:函数外和函数内: 函数外的this 就是在全局代码里,直接使用this: "use strict"; let name ...
- 基于Hi3559AV100 RFCN实现细节解析-(1)VGS初介绍
下面随笔系列将对Hi3559AV100 RFCN实现细节进行解析,因为RFCN用到了VGS加框,因此本篇随笔将给出VGS视频图像子系统的具体说明,便于后面RFCN的细节实现说明. VGS 是视频图形子 ...
- Jacobi与SOR迭代法的实现与性能比较及均匀间距与Chebyshev插值的实现、性能分析及二者生成的插值误差比较
这篇文章给出(1)Jacobi与SOR迭代法的实现与性能比较及(2)均匀间距与Chebyshev插值的实现.性能分析及二者生成的插值误差比较,给出完整的实现代码,没有进行性能优化,仅供参考. (1)J ...
- Java 多线程 01
多线程· Runnable 和 Thread 多线程的引入 * A:什么是线程 * 线程是程序执行的一条路径,一个进程中可以包含多条线程 * 多线程并发执行可以提高程序的效率,可以同时完成多项工作 * ...