使Prettier一键格式化WXSS(结局篇)

没想到真有最终篇......捂脸.jpg

  • 使Prettier一键格式化WXSS(上集)
  • 使Prettier一键格式化WXSS(下集)
  • 使Prettier一键格式化WXSS(结局篇)
  • Git Commit 规范(扩展篇)
前两篇文章,终究还是留下了一些不太完美的地方。加之,今天看到了 Prettier Configuration Overrides 、Setting the parser option 配置项。
于是乎,我发现:
  1. 使用 Gulp.js 处理 wxss 文件反而是多此一举了;
  2. 同时很好地解决了下集关于使用 lint-staged 仅处理暂存文件的问题。
前言
其实使用 Gulp.js 来处理的方式并非完全不可取,起码给我提供了一个思路,可供参考。
在更新代码之前,将其实现方式,打了个 Tag,源码在 wechat_applet_demo-1.0.0。
Anyway,这个踩坑过程,我很享受。
开始修复遗憾
首先,Prettier 是支持对某些文件扩展名,文件夹和特定文件进行不同的配置 这里。
Overrides let you have different configuration for certain file extensions, folders and specific files.
  1. 对 Prettier 配置做调整:
// .prettierrc.js { overrides: [ { files: ['*.wxss', '*.acss'], options: { parser: 'css' } }, { files: ['*.wxml', '*.axml'], options: { parser: 'html' } }, { files: ['*.wxs', '*.sjs'], options: { parser: 'babel' } } ] }

  1. 调整 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" }, }

  1. 调整 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" } }

【使Prettier一键格式化WXSS(结局篇)】就这样,没了。
至此
此前留下的遗憾补全了,我的强迫症也治愈了,哈哈。
本系列文章的示例 Demo 在这里 GitHub: wechat_applet_demo,欢迎 Star 。

    推荐阅读