使Prettier一键格式化WXSS
共 1942字，需浏览 4分钟
· 2020-09-20
今天看到了 Prettier Configuration Overrides 配置项，于是乎，发现：
使用 Gulp.js 处理 wxss 文件反而是多此一举了； 同时很好地解决了下集关于使用 lint-staged 仅处理暂存文件的问题。
前言
其实使用 Gulp.js 来处理的方式并非完全不可取，起码提供了一个思路，可供参考。
在更新代码之前，将其实现方式，打了个 Tag，源码在 https://github.com/toFrankie/wechat_applet_demo/releases/tag/v1.0.0。
Anyway，这个踩坑过程，我很享受。
开始修复遗憾
首先，Prettier 是支持对某些文件扩展名，文件夹和特定文件进行不同的配置 https://prettier.io/docs/en/configuration.html。
Overrides let you have different configuration for certain file extensions, folders and specific files.
对 Prettier 配置做调整：
// .prettierrc.js
{
overrides: [
{
files: ['*.wxss', '*.acss'],
options: {
parser: 'css'
}
},
{
files: ['*.wxml', '*.axml'],
options: {
parser: 'html'
}
},
{
files: ['*.wxs', '*.sjs'],
options: {
parser: 'babel'
}
}
]
}
调整 NPM 脚本命令
因为无需使用 Gulp.js 了，移除 gulpfile.js 以及相关依赖包，然后对 npm scripts 调整下：
// package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint . --ext .js,.wxs,.sjs",
"eslint:fix": "eslint --fix . --ext .js,.wxs,.sjs",
"prettier:fix": "prettier --config .prettierrc.js --write './**/*.{js,sjs,wxs,css,wxss,acss,wxml,axml,less,scss,json}'",
"format:all": "npm-run-all -s prettier:fix eslint:fix"
},
}
调整 husky 及 lint-staged 配置
由于无需再使用到函数的形式，我们将原先的 .lint-stagedrc.js 配置文件移除，然后放到 package.json 中。
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,wxs,sjs}": [
"prettier --config .prettierrc.js --write",
"eslint --fix --ext .js"
],
"*.{json,wxml,axml,css,wxss,acss,wxml,axml,less,scss}": "prettier --config .prettierrc.js --write"
}
}
至此
本系列文章的示例 Demo 在这里 Ghttps://github.com/toFrankie/wechat_applet_demo.git，分别有上、中、下三篇，欢迎 Star 。
