阅读 455

使用prettier格式化工程

背景

  1. 团队没有统一的规范,每个开发者有自己各自的喜好,代码风格不一致。导致每次修改某文件一点内容,导致整个文件被自动格式化,后续回溯修改点耗时长;

  2. 对于“强迫症患者”,不格式化文件心里就像留着个疙瘩,不舒畅。

选型

现有的两条格式化路子:eslint vs prettier。两者都能做格式化校验且对于简单的格式问题可自动修复,但个人认为:

eslint:

  • 比较专注于js文件的语法校验,对于格式校验,需要手动写不少规则来匹配团队惯用的风格;

  • 对于小程序来说,wxml,wxss等文件格式难度较高;

prettier:

  • 比较大众的格式化工具模块,规范也比较大众化,适合大部分人的编码习惯;

  • 可以结合vscode的minapp扩展,对小程序的wxml文件进行格式化;

综上,使用eslint来校验js语法,prettier来规范代码格式。

prettier如何格式化

安装prettier
npm install prettier -D
复制代码
package.json文件添加script脚本
"scripts": {
    "prettier": "prettier --write ./**/*.{js,json,wxss,wxml,wxs}"
}
复制代码

prettier --write表示格式化代码,且对于一些较简单的修复,prettier自动写入修复。

./**/.{js,json,wxss,wxml,wxs}即匹配当前目录下所有js,json,wxss,wxml,wxs后缀的文件。如果只匹配一种类型的文件,去掉花括号。

添加.prettierrc配置文件

在项目根目录添加文件**.prettierrc**,配置prettier默认格式规则外的一些个性化规范。针对小程序项目,添加overrides规则,即wxml文件用html解释器、wxss文件用css解释器、wxs文件用babel解释器来解析。

{
    "trailingComma": "es5",
    "singleQuote": true,
    "semi": true,
    "tabWidth": 4,
    "printWidth": 150,
    "proseWrap": "preserve",
    "overrides": [
        {
            "files": "*.wxml",
            "options": { "parser": "html" }
        },
        {
            "files": "*.wxss",
            "options": { "parser": "css" }
        },
        {
            "files": "*.wxs",
            "options": { "parser": "babel" }
        }
    ]
}
复制代码

运行npm run prettier,会自动格式化代码。

结合git hooks提交前校验修复

如果每次提交代码到git前,都要求每个开发者手动执行npm run prettier -D, 一来太考验自觉性,二来也麻烦。那么,有没有自动格式的流程呢?

结合git hooks,在pre-commit时,自动跑一遍格式化代码。安装husky,npm install husky(如果没生效,请删除node_modules和package-lock.json/或yarn.lock文件,重新npm install,确保git的pre-commit钩子存在)。package.json文件添加如下配置:

"husky": {
    "hooks": {
        "pre-commit": "npm run prettier"
    }
},
复制代码

这样就可以在每次commit代码前,先自动格式化一遍,如果格式化报错会提交不了。但是,这样的配置,每次提交都会校验项目里面所有的文件,校验时间长。

我们希望提升校验速度,每次只校验本次提交改动到的文件。引入lint-staged:npm install lint-staged -D

需要注意的是,新版本的lint-staged(v11.0.0以上)的版本需要较高的node版本,不想升node版本的话,可以降低lint-staged的版本。package.json配置如下:

"lint-staged": {
    "*.{js,json,wxss,wxml,wxs}": "prettier --write",
},
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
复制代码

".{js,json,wxss,wxml,wxs}": "prettier --write"表示针对这些类型的文件,执行prettier格式校验并简单修复。如果有多种规则,可以配置成数组,比如:

"*.js": []"prettier --write", "eslint"]
复制代码

结合lint-staged就可以只针对本次git修改过的文件做校验修复,节省时间。

如何在vscode保存编辑代码时自动格式化

在vscode编辑器,先安装prettier和minapp扩展,然后按住ctrl加逗号,<ctrl+,>

再点击右上角第一个图标,进入settings.json文件,添加如下配置就可以在ctrl+s保存文件的时候,先自动格式化一遍代码。

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"minapp-vscode.wxmlFormatter": "prettier", // 设置扩展程序minapp格式化wxml使用prettier(需要先安装minapp扩展)
复制代码

保存自动prettier.gif

文章分类
前端
文章标签