vs一键格式化

爱被打了一巴掌 2024-04-03 13:53 85阅读 0赞

本文将会结合 ESLint、Prettier、husky、lint-stage、gulp.js 等工具使得项目一键化操作，减少在格式化、代码检查等操作上浪费时间，因为大前端真的太多东西学了，不学会“偷懒”的话，我们就要落后更多了。

本系列文章的示例 Demo 在这里 GitHub: wechat\_applet\_demo。

分为两篇文章介绍：

使Prettier一键格式化WXSS(上集)

使Prettier一键格式化WXSS(下集)

最近在做公司部门前端项目由 SVN 迁移 Git 的事情，由于历史代码在此之前并没有引入类似 ESLint、Prettier 的代码检查或者格式约束等工具。

目前部门仅剩我一人维护这十几个小程序、H5 前端项目。现在只要接触以前那些没有经手的项目，就头疼不想改。虽然思想是这样，但很无奈，谁让我只是一个“打工仔”呢！

吐槽完，入正题。

1. 新建一个微信小程序项目

此处过于简单省略一万字…

2. 使用 yarn 作为包管理工具

相关的安装不在本系列教程，相信你们都懂。也不再赘述，自行搜索。

3. 使用 Visual Studio Code 作为编辑器

虽然从业有一段时间了，不好意思，前端开发我只用 VS Code，将来好长一段时间应该还是它。至于什么 WebStorm、Atom、Sublime Text 等，用过但现在已经不会了。

Anyway，什么开发工具不重要，自己用着舒服就好。

下面介绍几个与本项目相关的 VS Code 插件

ESLint：自动检测 ESLint Rule，不符合规则时，在编辑页面会有警告 ?

Prettier - Code formatter：可用于格式化

按照以上两个插件之后，需要对编辑器做添加一些配置。

考虑到多人开发的场景，而每个人的开发工具配置不尽相同，所以我把以下配置放到项目根目录下中，并将其加入 Git 版本控制中，这样每个人拿到项目都有此配置了。

路径是：

1. 初始化生成 ：

![vs一键格式化\_vs一键格式化][vs_vs]

2. 安装 ESLint、Prettier 相关依赖

若要使用 ESLint，往往需要配置很多繁杂的 rules 规则，如果每个人都要这种做的话，显然会耗费很多精力。于是就有人站了出来，并在 GitHub 上开源了他们的代码规范库，比较流行的有 airbnb、standard、prettier 等。

在这里我选择的是国内腾讯 AlloyTeam 团队出品的 eslint-config-alloy 开源规范库。

其实他们团队最开始使用 Airbnb 规则，但是由于它过于严格，部分规则还是需要个性化，导致后来越改越多，最后决定重新维护一套。经过两年多的打磨，现在 eslint-config-alloy 已经非常成熟了。

我选择它的几点原因：

适用于 React/Vue/Typescript 项目

样式相关规则由 Prettier 管理

有中文文档和网站示例(就我那蹩脚的英语水平，这点极吸引我，哈哈)

更新快，且拥有官方维护的 vue、typescript、react+typescript 规则

3. 安装完依赖，那么就要加上 ESLint、Prettier 的配置文件

他们的配置文件可以有多种，这里使用 JavaScript 格式分别是 、，都放置在项目根目录下。

对于配置我就不展开说了，若有疑惑的，可以自行搜索查找答案或者评论留言给我。

4. 配置 ESLint、Prettier 忽略规则

对应的文件是 、，同样的都放在项目根目录下。

这些就根据自己项目实际情况做调整了，以下仅供参考：

5. 添加 配置文件

它是用来抹平不同编辑器之间的差异的。同样放置在项目根目录下。

6. 添加 npm scripts

添加三条脚本指令：

通过 即可执行一键格式化和修复了，当然了 ESLint 使用 只能修复一部分，剩余的只能手动解决了。

不不不，本文我最想分享的是下面这个，前面的内容都比较简单，很多人都懂了。

Prettier 支持的 JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS、Less、Scss、HTML、JSON、GraphQL、Markdown(GFM、MDX)、YAML 的代码格式化。

但其实是不能识别 、 等小程序特有的层叠样式，尽管它们规则与 CSS 无异，但是 Prettier 并没有解析器去解析它们。

我们试图去调整脚本命令为(添加 扩展名的文件)：

然后去执行的时候就会报错，如下：

\[error\] No parser could be inferred for file: app.wxss

既然这样走不通的话，总不能利用 VS Code 的 Prettier 插件一个一个地去格式化 的文件吧，那样工作量太大了，不符合我们“偷懒”的做法。

那么如何解决呢？

\*\*我使用的是 Gulp.js 来处理。\*\*如果对 Gulp 不太熟悉了，点击这里了解一下。

简单说下 Gulp.js 的工作方式，它使用的是 Node.js 中的 (流)，首先获取到需要的 ，然后通过 的 方法把流导入到你想要的地方。比如 Gulp 插件中，经过插件处理后的流又可以导入到其他插件汇总，当然也可以把流写入文件中，所以 Gulp 是以 为媒介的，它不需要频繁的生成临时文件，这也是 Gulp 的速度比 Grunt 快的一个原因。

我刚开始时的想法是：首先将 ()转换并导出为 ，接着删除 ()文件，再者使用 Prettier 对 文件进行格式化，转回 ()之后，再删除掉 文件。这个过程会频繁的生成临时文件，思路是有点像 Grunt。

但是了解了 Gulp 的思想后，其实它帮我们省掉了频繁增删文件的环节，全部放在内存中操作，也会更快一些，所以此前的方案被我否掉了。

下面我们只用到 Gulp 的其中两个 API， 和 。

1. gulp.src()

这个方法是用来获取流的，但要注意这个流里面的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。(这里不深入，点到为止，有兴趣自行了解)

语法：gulp.src(globs\[, options\])

globs：是文件匹配模式，用来匹配文件路径(包括文件名)

options：为可选参数，通常情况我们不需要用到

\*关于参数详细说明，请看文档。

2. gulp.dest()

该方法是用来写文件的

gulp.dest(path\[, options\])

path：是写入文件的路径

options：为可选参数，通常情况我们不需要用到

要想使用好 这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。

Gulp 的使用流程一般是：首先通过 方法获取到我们想要处理的文件流，然后把文件流通过 方法导入到 Gulp 的插件中，最后把经过插件处理后的流再通过 方法导入到 中， 方法则把流中的内容写入到文件中。

这里需要弄清楚的一点是，我们给 传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：

若需要修改文件名，需要使用插件 gulp-rename。

关于上述 Gulp 的 API 与方法说明，主要参考自官方文档与无双的一篇文章。

首先，安装 Gulp 相关依赖包。

接着，我们在项目根目录下创建一个 文件。

Gulp.js 官网快速入门的教程，很简单，这里不在赘述。

思路：使用 获取流，然后使用 Gulp 插件对流分别作重命名(gulp-rename)、格式化()、再重命名回来()、最后导出()。过程中有利用 插件来查看一些信息。

这里我对微信小程序、支付宝小程序的层叠样式都处理了。

通过以下方式调用就好了

执行命令，我们看到如下结果，说明配置成功了。

![vs一键格式化\_vs一键格式化\_02][vs_vs_02]

上面已经实现了对 、 扩展名的文件进行一键格式化了。

还可以“更懒”一些，利用 git-hooks 我们可实现在 之前，对项目进行 ESLint、Prettier 检测和格式化，一旦出现错误，将停止 操作。

由于本文篇幅已经很长了，所以我们放到下一篇继续写…

由于本项目的 npm 包仅用于代码检查与格式化，并未参与页面代码逻辑中。所以我在小程序本地项目配置文件中添加上打包配置选项。

packOptions 用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。

目前可以指定 字段，用以配置打包时对符合指定规则的文件或文件夹进行忽略，以跳过打包的过程，这些文件或文件夹将不会出现在预览或上传的结果内。

\*需要注意的是支付宝小程序，在编写本文时还未支持类似 选项。

[vs_vs]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e8a13581a86343529adbd4de76c45eca.png
[vs_vs_02]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/dddab828ebd34f97ad75b11ddb043889.png