vs一键格式化
本文将会结合 、、husky、lint-stage、gulp.js 等工具使得项目一键化操作，减少在格式化、代码检查等操作上浪费时间，因为大前端真的太多东西学了，不学会“偷懒”的话，我们就要落后更多了。
本系列文章的示例 Demo 在这里 : 。
分为两篇文章介绍：
使一键格式化WXSS(上集)
使一键格式化WXSS(下集)
最近在做公司部门前端项目由 SVN 迁移 Git 的事情，由于历史代码在此之前并没有引入类似 、 的代码检查或者格式约束等工具。
目前部门仅剩我一人维护这十几个小程序、H5 前端项目。现在只要接触以前那些没有经手的项目，就头疼不想改。虽然思想是这样，但很无奈，谁让我只是一个“打工仔”呢！
吐槽完，入正题。
1. 新建一个微信小程序项目
此处过于简单省略一万字…
2. 使用 yarn 作为包管理工具
相关的安装不在本系列教程，相信你们都懂。也不再赘述，自行搜索。
3. 使用 Code 作为编辑器
虽然从业有一段时间了，不好意思，前端开发我只用 VS Code，将来好长一段时间应该还是它。至于什么 、Atom、 Text 等，用过但现在已经不会了。
，什么开发工具不重要，自己用着舒服就好。
下面介绍几个与本项目相关的 VS Code 插件
：自动检测 Rule，不符合规则时，在编辑页面会有警告 ?
- Code ：可用于格式化
按照以上两个插件之后，需要对编辑器做添加一些配置。
考虑到多人开发的场景，而每个人的开发工具配置不尽相同，所以我把以下配置放到项目根目录下中，并将其加入 Git 版本控制中，这样每个人拿到项目都有此配置了。
路径是：
1. 初始化生成 ：
2. 安装 、 相关依赖
若要使用 ，往往需要配置很多繁杂的 rules 规则，如果每个人都要这种做的话，显然会耗费很多精力。于是就有人站了出来，并在 上开源了他们的代码规范库，比较流行的有 、、 等。
在这里我选择的是国内腾讯 团队出品的 --alloy 开源规范库。
其实他们团队最开始使用 规则，但是由于它过于严格，部分规则还是需要个性化，导致后来越改越多，最后决定重新维护一套。经过两年多的打磨，现在 --alloy 已经非常成熟了。
我选择它的几点原因：
适用于 React/Vue/ 项目
样式相关规则由 管理
有中文文档和网站示例(就我那蹩脚的英语水平，这点极吸引我，哈哈)
更新快，且拥有官方维护的 vue、、react+ 规则
3. 安装完依赖，那么就要加上 、 的配置文件
他们的配置文件可以有多种，这里使用 格式分别是 、，都放置在项目根目录下。
对于配置我就不展开说了，若有疑惑的，可以自行搜索查找答案或者评论留言给我。
4. 配置 、 忽略规则
对应的文件是 、，同样的都放在项目根目录下。
这些就根据自己项目实际情况做调整了，以下仅供参考：
5. 添加 配置文件
它是用来抹平不同编辑器之间的差异的。同样放置在项目根目录下。
6. 添加 npm
添加三条脚本指令：
通过 即可执行一键格式化和修复了，当然了 使用 只能修复一部分，剩余的只能手动解决了。
不不不，本文我最想分享的是下面这个，前面的内容都比较简单，很多人都懂了。
支持的 、JSX、、Vue、Flow、、CSS、Less、Scss、HTML、JSON、、(GFM、MDX)、YAML 的代码格式化。
但其实是不能识别 、 等小程序特有的层叠样式，尽管它们规则与 CSS 无异，但是 并没有解析器去解析它们。
我们试图去调整脚本命令为(添加 扩展名的文件)：
然后去执行的时候就会报错，如下：
[error] No could be for file: app.wxss
既然这样走不通的话，总不能利用 VS Code 的 插件一个一个地去格式化 的文件吧，那样工作量太大了，不符合我们“偷懒”的做法。
那么如何解决呢？
**我使用的是 Gulp.js 来处理。**如果对 Gulp 不太熟悉了，点击这里了解一下。
简单说下 Gulp.js 的工作方式，它使用的是 Node.js 中的 (流)，首先获取到需要的 ，然后通过 的 方法把流导入到你想要的地方。比如 Gulp 插件中，经过插件处理后的流又可以导入到其他插件汇总，当然也可以把流写入文件中，所以 Gulp 是以 为媒介的，它不需要频繁的生成临时文件，这也是 Gulp 的速度比 Grunt 快的一个原因。
我刚开始时的想法是：首先将 ()转换并导出为 ，接着删除 ()文件，再者使用 对 文件进行格式化，转回 ()之后，再删除掉 文件。这个过程会频繁的生成临时文件，思路是有点像 Grunt。
但是了解了 Gulp 的思想后，其实它帮我们省掉了频繁增删文件的环节，全部放在内存中操作，也会更快一些，所以此前的方案被我否掉了。
下面我们只用到 Gulp 的其中两个 API， 和 。
1. gulp.src()
这个方法是用来获取流的，但要注意这个流里面的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。(这里不深入，点到为止，有兴趣自行了解)
语法：gulp.src(globs[, ])
globs：是文件匹配模式，用来匹配文件路径(包括文件名)
：为可选参数，通常情况我们不需要用到
*关于参数详细说明，请看文档。
2. gulp.dest()
该方法是用来写文件的
gulp.dest(path[, ])
path：是写入文件的路径
：为可选参数，通常情况我们不需要用到
要想使用好 这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。
Gulp 的使用流程一般是：首先通过 方法获取到我们想要处理的文件流，然后把文件流通过 方法导入到 Gulp 的插件中，最后把经过插件处理后的流再通过 方法导入到 中， 方法则把流中的内容写入到文件中。
这里需要弄清楚的一点是，我们给 传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：
若需要修改文件名，需要使用插件 gulp-。
关于上述 Gulp 的 API 与方法说明，主要参考自官方文档与无双的一篇文章。
首先，安装 Gulp 相关依赖包。
接着，我们在项目根目录下创建一个 文件。
Gulp.js 官网快速入门的教程，很简单，这里不在赘述。
思路：使用 获取流，然后使用 Gulp 插件对流分别作重命名(gulp-)、格式化()、再重命名回来()、最后导出()。过程中有利用 插件来查看一些信息。
这里我对微信小程序、支付宝小程序的层叠样式都处理了。
通过以下方式调用就好了
执行命令，我们看到如下结果，说明配置成功了。
上面已经实现了对 、 扩展名的文件进行一键格式化了。
还可以“更懒”一些，利用 git-hooks 我们可实现在 之前，对项目进行 、 检测和格式化，一旦出现错误，将停止 操作。
由于本文篇幅已经很长了，所以我们放到下一篇继续写…
由于本项目的 npm 包仅用于代码检查与格式化，并未参与页面代码逻辑中。所以我在小程序本地项目配置文件中添加上打包配置选项。
用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。
目前可以指定 字段，用以配置打包时对符合指定规则的文件或文件夹进行忽略，以跳过打包的过程，这些文件或文件夹将不会出现在预览或上传的结果内。
*需要注意的是支付宝小程序，在编写本文时还未支持类似 选项。
