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代 ...
随机推荐
- Spring-02 第一个Spring程序
Spring-02 第一个Spring程序 第一个Spring程序 1.导入依赖 <dependency> <groupId>org.springframework</g ...
- 微信小程序:post请求参数放在请求体中还是拼接到URL中需要看后台是如何接收的
前端发送post请求时,请求参数可以放在请求中,代码如下: function post(url, data, callback) { wx.request({ method: 'POST', url: ...
- 微信小程序:优化接口代码-提取公共接口路径
方法一.将公共部分提取出来定义为baseURL变量 简化url,把里面公共部分提取出来.如https://api-hmugo-web.itheima.net/api/public/v1/categor ...
- DRF 三大认证之身份认证
目录 路由组件补充 三大认证 一.身份认证 1.如何进行身份认证 2.jwt认证规则原理 3.jwt的组成 4.jwt的使用方法 4.1 签发算法 4.2 校验算法 4.3 刷新算法 二.权限认证 三 ...
- OLAP分析
OLAP分析 1 视频教程 视频教程 如果对资源下载.分析操作有疑问,直接跟着视频做一遍即可. 2 数据集合说明 FoodMart,其为一家食品连锁店经营产生的数据存放的数据库,包括销售数据.库存数据 ...
- Java基础:特性write once;run anywhere!
三高:高可用 高性能 高并发 特性: 简单性 面向对象:万物皆为对象 可移植性 高性能 分布式 动态性 多线程 安全性 健壮性 Java三大版本 javaSE:标准版(桌面程序,控制台) javaME ...
- python基础学习之类的继承、魔法方法
什么是继承 即类A可以使用类B的方法,即B是A的父类,A是B的子类,AB之间是继承关系 class Father(): # 父类 def __init__(self,name,age): self. ...
- imagemagick 之 Fred's ImageMagick Scripts 在Ubuntu 下的实践
Fred's ImageMagick Scripts 官网:http://www.fmwconcepts.com/imagemagick/index.php Windows 10 (64-bit) u ...
- python常用数据处理库
Python之所以能够成为数据分析与挖掘领域的最佳语言,是有其独特的优势的.因为他有很多这个领域相关的库可以用,而且很好用,比如Numpy.SciPy.Matploglib.Pandas.Scikit ...
- 一个C#开发编写Java框架的心路历程
前言 这一篇絮絮叨叨,逻辑不太清晰的编写Java框架的的一个过程,主要描述我作为一个java初学者,在编写Java框架时的一些心得感悟. 因为我是C#的开发者,所以,在编写Java框架时,或多或少会带 ...