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

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. springboot框架里的pom.xml文件里的m不显示,只有标红和<>符号的解决方法

    这是因为没有把pom.xml文件加入到maven工程中,所以需要如图所示 亲测有效,原文链接:https://blog.csdn.net/qq_41026946/article/details/107 ...

  2. vue高级

    1.nrm nrm提供了一些最常用的npm包镜像地址,可以快速切换服务器地址下载资源.它只是提供了地址,并不是装包工具.如果没有安装npm,需要安装node,然后直接安装即可.node下载链接:htt ...

  3. 分布式流转开发常见报错FAQ

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] HarmonyOS开发中分布式协同是非常重要的一个功能,大家在刚接触的时候可能会出现各种各样的错误.我 ...

  4. vue-axios插件、django-cors插件、及vue如何使用第三方前端样式库:element/jQuery/bootstrap

    目录 一.vue的ajax插件:axios 1.安装axios 2.axios参数 二.CORS跨域问题(同源策略) 1.Django解决CORS跨域问题方法 三.前端请求携带参数及Django后台如 ...

  5. JUnit5学习之六:参数化测试(Parameterized Tests)基础

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  6. vue导出数据excel

    下载两个依赖 npm install file-save xlsx 创建两个文件 Blob.js与Export2Excel.js 参考地址:文件地址 在Export2Excel.js中修改引入地址,注 ...

  7. 【机制】js中的this指向

    1.this的使用场景 我们先把this的使用场景分为两大类:函数外和函数内: 函数外的this 就是在全局代码里,直接使用this: "use strict"; let name ...

  8. 基于Hi3559AV100 RFCN实现细节解析-(1)VGS初介绍

    下面随笔系列将对Hi3559AV100 RFCN实现细节进行解析,因为RFCN用到了VGS加框,因此本篇随笔将给出VGS视频图像子系统的具体说明,便于后面RFCN的细节实现说明. VGS 是视频图形子 ...

  9. Jacobi与SOR迭代法的实现与性能比较及均匀间距与Chebyshev插值的实现、性能分析及二者生成的插值误差比较

    这篇文章给出(1)Jacobi与SOR迭代法的实现与性能比较及(2)均匀间距与Chebyshev插值的实现.性能分析及二者生成的插值误差比较,给出完整的实现代码,没有进行性能优化,仅供参考. (1)J ...

  10. Java 多线程 01

    多线程· Runnable 和 Thread 多线程的引入 * A:什么是线程 * 线程是程序执行的一条路径,一个进程中可以包含多条线程 * 多线程并发执行可以提高程序的效率,可以同时完成多项工作 * ...