使用Prettier配合TsLint/Eslint 统一前端代码格式化规则，保证代码质量

最新推荐文章于 2024-02-04 11:14:55 发布

XeonYu

最新推荐文章于 2024-02-04 11:14:55 发布

阅读量2.6k

点赞数

分类专栏：从零开始，学习web前端文章标签：统一格式化代码 Prettier tslint红线 webstorm

本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/109599038

版权

从零开始，学习web前端专栏收录该内容

27 篇文章 56 订阅

订阅专栏

背景

在开发前端项目时，每个人的开发习惯不同，用的IDE也不同，有的人喜欢用VSCode，有的人喜欢用Webstorm，而各个编译器默认的格式化规则有不一致，这就导致了不同IDE格式化出来的代码是不一样的。

甚至有些人不喜欢格式化代码，导致代码看起来会比较乱，作为有点强迫症的我看着实在是很不习惯，一般我上手代码的第一件事就是习惯格式化一下。

当多个团队一起开发同一个项目时，会涉及到分支之间代码合并的问题，如果没有一个统一的代码格式化规则，那么，合并代码将会非常麻烦，会出现很多不必要的合并工作。

所以，统一格式化代码的规则以及养成良好的开发习惯是很有必要的。

使用 Prettier 统一格式化代码规则

首先给出 Prettier 的官网，官网文档很详细。
这里我根据步骤做个记录

以Angular项目为例，用法如下：

首先安装 Prettier

npm install --save-dev --save-exact prettier

安装完成后会在package.json文件中的devDependencies中自动加入依赖

在这里插入图片描述

其实到这一步我们已经可以使用 Prettier 进行格式化代码了。
但是IED可能会跟 Prettier 冲突，所以需要调整一下IDE的设置。
以Webstorm为例，打开设置，找到Pretter，勾选保存和格式化。
在这里插入图片描述
这样一来我们就可以在保存文件的时候自动使用格式化，并且使用快捷键对代码格式化时也会使用Prettier来格式化代码。

以上我们使用的是默认的规则去格式化的代码。
我们还可以自定义格式化的规则

首先我们在项目根目录创建两个文件
分别为 .prettierrc 和 .prettierignore
如下图

在这里插入图片描述

.prettierrc 文件用来配置格式化规则
.prettierignore 用来配置哪些文件不需要被格式化

官网提供了一个在线配置的网页，文章末尾也有一个写好的配置，没什么也别要求可以直接复制那个配置即可。

https://prettier.io/playground/

如下
在这里插入图片描述

我们可以自己选择配置，然就copy粘贴到 .prettierrc 文件中，Prettier就会优先以该文件中的规则为准
在这里插入图片描述

假如你的项目是中途才添加prettier的话。可以直接运行

npx prettier --write .

去自动格式化你原有的代码，非常方便。

这样一来，统一代码格式化的问题解决了。

tslint检查过于严格，开发时提示红线也别多

但是还有另外一个问题，我们在使用TypeScript开发时，默认的tslint对代码的检查是很严格的，我们随便写点代码都会提示很多红线，这就导致了很多人在开发过程中直接禁用了 tslint ，这样一来，开发出来的代码质量一定不会太高，另外 Prettier 和 tslint 一起使用也会产生冲突。
所以，我们需要解决一下 Prettier 和 tslint 一起使用时的问题。

首先我们要解决的就是默认tslint 检查过于严格的问题，我们创建项目后默认会生成一个 tslint.json 文件，这个文件就是配置了tslint的检查规则。

在这里插入图片描述

我们只需要改变这个文件的配置即可。
推荐一个腾讯开源项目的一个配置，地址如下：

https://github.com/AlloyTeam/tslint-config-alloy/blob/master/index.js

我们可以直接复制来用即可。如果我们有个性化的配置，直接更改该文件，备注也都很详细。

解决 Prettier 和 tslint 冲突

还是使用腾讯这个开源项目，地址如下，文档已经非常详细了，照做即可

tslint-config-alloy

大概步骤如下：

1.首先安装tslint-config-alloy 相关依赖：

npm install --save-dev tslint typescript tslint-config-alloy

2.再安装 prettier 和 tslint-config-prettier

npm install --save-dev prettier tslint-config-prettier

3.为 tslint.config 的 extends 添加 tslint-config-prettier

{
    "extends": ["tslint-config-alloy", "tslint-config-prettier"],
    "linterOptions": {
        "exclude": ["**/node_modules/**"]
    },
    "rules": {
        // 这里填入你的项目需要的个性化配置，比如：
        //
        // // 一个缩进必须用两个空格替代
        // // @has-fixer 可自动修复
        // // @prettier 可交由 prettier 控制
        // "indent": [true, "spaces", 2]
    }
}

Prettier 的配置文件 prettier.config.js 可以参考这个

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};