每次搭建新项目都少不了这些工具,但时间一久就忘记了,下次搭新项目时又要四处查官方文档,因此特此记录,主要内容是对这三个工具的理解,以及具体使用方式

editorconfig

理解

先看官网的定义:

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

EditorConfig 帮助使用不同IDE开发同一个项目的开发者,维持固定统一的代码风格。

简而言之,EditorConfig就是为了抹平不同IDE的代码格式差异的

使用

  1. 安装插件

某些编辑器已经内置了EditorConfig插件,无需另外安装了,比如 WebStorm、VisualStudio、pyCharm等等

某些编辑器没有内置,需要自行安装插件,比如vscode,需要安装 EditorConfig for VS Code

  1. 添加配置文件

定义格式规则,避免常见的代码格式不一致和丑陋的 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,也就是预设规则,通常由一些最佳实践集成而来

  1. 生成配置文件

使用官网的CLI,按自己的项目的需求生成。在项目根目录执行以下命令:

npx eslint --init

回答几个问题后,比如配置文件格式、是否使用react,vue,是否支持typescript等,则会自动在根目录下生成对应的配置文件

  1. 下载插件

以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三者的区别、介绍及使用的更多相关文章

  1. eslint prettier editrorconfig - 写出干净的前端代码

    FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...

  2. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  3. 前端规范之JS代码规范(ESLint + Prettier)

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  4. UIColor,CGColor,CIColor三者的区别和联系

    UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...

  5. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  6. 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  7. Linux操作系统--help、man和info工具的区别介绍

    http://wenda.tianya.cn/wenda/thread?tid=1d4b0f172f958833Linux操作系统--help.man和info工具的区别介绍 Linux操作系统为我们 ...

  8. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  9. 创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky)

    创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky) Cui, Richard Chikun 本文笔者将带你在Github代码仓库创建TypeScript代 ...

随机推荐

  1. Spring-02 第一个Spring程序

    Spring-02 第一个Spring程序 第一个Spring程序 1.导入依赖 <dependency> <groupId>org.springframework</g ...

  2. 微信小程序:post请求参数放在请求体中还是拼接到URL中需要看后台是如何接收的

    前端发送post请求时,请求参数可以放在请求中,代码如下: function post(url, data, callback) { wx.request({ method: 'POST', url: ...

  3. 微信小程序:优化接口代码-提取公共接口路径

    方法一.将公共部分提取出来定义为baseURL变量 简化url,把里面公共部分提取出来.如https://api-hmugo-web.itheima.net/api/public/v1/categor ...

  4. DRF 三大认证之身份认证

    目录 路由组件补充 三大认证 一.身份认证 1.如何进行身份认证 2.jwt认证规则原理 3.jwt的组成 4.jwt的使用方法 4.1 签发算法 4.2 校验算法 4.3 刷新算法 二.权限认证 三 ...

  5. OLAP分析

    OLAP分析 1 视频教程 视频教程 如果对资源下载.分析操作有疑问,直接跟着视频做一遍即可. 2 数据集合说明 FoodMart,其为一家食品连锁店经营产生的数据存放的数据库,包括销售数据.库存数据 ...

  6. Java基础:特性write once;run anywhere!

    三高:高可用 高性能 高并发 特性: 简单性 面向对象:万物皆为对象 可移植性 高性能 分布式 动态性 多线程 安全性 健壮性 Java三大版本 javaSE:标准版(桌面程序,控制台) javaME ...

  7. python基础学习之类的继承、魔法方法

    什么是继承 即类A可以使用类B的方法,即B是A的父类,A是B的子类,AB之间是继承关系 class Father():  # 父类 def __init__(self,name,age): self. ...

  8. imagemagick 之 Fred's ImageMagick Scripts 在Ubuntu 下的实践

    Fred's ImageMagick Scripts 官网:http://www.fmwconcepts.com/imagemagick/index.php Windows 10 (64-bit) u ...

  9. python常用数据处理库

    Python之所以能够成为数据分析与挖掘领域的最佳语言,是有其独特的优势的.因为他有很多这个领域相关的库可以用,而且很好用,比如Numpy.SciPy.Matploglib.Pandas.Scikit ...

  10. 一个C#开发编写Java框架的心路历程

    前言 这一篇絮絮叨叨,逻辑不太清晰的编写Java框架的的一个过程,主要描述我作为一个java初学者,在编写Java框架时的一些心得感悟. 因为我是C#的开发者,所以,在编写Java框架时,或多或少会带 ...