不喜欢用Prettier?来看怎么只用ESLint Format来格式化代码

2,552 阅读3分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

前言

接上篇文章 ESLint配合VSCode 统一团队前端代码规范,再讲解下ESLint的Format功能。

前端 Code Format 比较流行的大概有以下几个方式:

  1. IDE自带的Format,比如VSCode就自带大部分格式文件的format功能,并可以通过设置配置。

image.png

  1. Prettier,比较流行的Format工具,"一个固执己见的代码格式化工具"。可选的配置很少,不太喜欢老是换行,没在项目里应用过。

官网:prettier.io/ 测试format效果:prettier.io/playground/

  1. ESLint,通过配置一些rules,达到格式化效果。

有些开发会选择同时使用PrettierESLint来规范代码,用Prettier实现代码格式规则(Formatting rules),用ESLint来实现代码质量规则(Code-quality rules)

其实只用ESLint也可以通过rules同时满足代码格式代码质量两个规则,而且相比Prettier更可配置化,想严格些、宽松些、或者具体规范一个具体规则都可以。下面就具体介绍下如何用ESLint进行Code Fromat。

ESLint Format

ESLint配置介绍参考上篇文章 ESLint配合VSCode 统一团队前端代码规范,本文主要说下ESLint的Format功能。

执行eslint --init指令,第一步选择第三个选项,check语法、同时规范code style:

image.png

然后后面有一步选项使用哪种类型code style:

image.png

这里推荐选择第一项 Use a popular style guide,选择一个市面上的主流风格。推荐有4个,AirbnbGoogle分别是这两家公司出的规范。Standard是开源社区的编码规范,它最大的特点是不用在语句的末尾添加分号。

这里选择Standard这里 有官网中文介绍,这里 有所有的rules介绍,可以看到都是用到了ESLint的各种rules,然后给打包好了,这样就不用使用者去配置了。

继续选择 Would you like to install them now with npm? · Yes后,系统会自动按照所需的npm包,然后发现 .eslintrc.js 配置文件多了一个extends

image.png

原理是eslint-config-standard这个包里有一份eslint config配置,里面配置好了plugin rules等,然后通过extends扩展到项目里。详细配置可以在node_modules里或者GitHub上找到。

如果想改变其中一些rules,或者想追加一些rules,也可以修改自己的.eslintrc.js rules来进行覆盖。


如果之前那步选择了Answer questions about your style,接下来会根据回答问题的答案,ESLint给你自动生成出来对应的rules配置,如果对rules不是太专业,不建议这种方式。

image.png

image.png

VSCode

VSCode有自己的format功能,如果安装了ESLint插件,并且有些rules冲突了,可能会导致会format两遍,导致结果不对。这时候可以通过settings插件设置,这里建议设置Workspace下的settings,设置后会在.vscode路径下生成settings.json文件,可以提交到git上统一开发团队内部规范:

// .vscode/settings.json
{
    "eslint.enable": true, // 开启eslint插件功能
    "eslint.format.enable": true, // 开启eslint format功能
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // save文件自动fix
    }
}

也可以按Ctrl+Shift+P,选择Format Document With...,再选择ESLint用作默认formatter

image.png

不知道这里为啥有这么多ESLint

image.png


使用时还发现个问题,就是在敲代码时,会一直显示如下图所示的红色提示,总是以为自己写的语法有问题,其实只是没有format,由于save时会自动format,所以这种错误在敲代码时是不需要考虑的。那怎么不提示呢?还是通过settings

image.png

// .vscode/settings.json
{
    "eslint.enable": true,
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.rules.customizations": [ // 配置具体rule的提示方式
        {
            "rule": "semi",
            "severity": "off"
        },
        {
            "rule": "eol-last",
            "severity": "off"
        },
        {
            "rule": "space-before-blocks",
            "severity": "off"
        },
        {
            "rule": "space-before-function-paren",
            "severity": "off"
        }
    ]
}

最后

本文主要介绍了如何使用ESLint来Format Code,说是Format,其实都是用ESLint rules来规范的。能同时满足代码格式代码质量两个规则,相比Prettier更可配置化,可以自由选择不同的popular style guide,想严格些、宽松些都可以