使Prettier一鍵格式化WXSS

作者：越前君

來源：SegmentFault 思否社區(qū)

---

今天看到了 Prettier Configuration Overrides 配置項(xiàng)，于是乎，發(fā)現(xiàn)：

1. 使用 Gulp.js 處理 wxss 文件反而是多此一舉了；
2. 同時(shí)很好地解決了下集關(guān)于使用 lint-staged 僅處理暫存文件的問題。

前言

其實(shí)使用 Gulp.js 來處理的方式并非完全不可取，起碼提供了一個(gè)思路，可供參考。

在更新代碼之前，將其實(shí)現(xiàn)方式，打了個(gè) Tag，源碼在 https://github.com/toFrankie/wechat_applet_demo/releases/tag/v1.0.0。

Anyway，這個(gè)踩坑過程，我很享受。

開始修復(fù)遺憾

首先，Prettier 是支持對(duì)某些文件擴(kuò)展名，文件夾和特定文件進(jìn)行不同的配置? https://prettier.io/docs/en/configuration.html。

Overrides let you have different configuration for certain file extensions, folders and specific files.

1. 對(duì) Prettier 配置做調(diào)整：

//?.prettierrc.js
{
??overrides:?[
????{
??????files:?['*.wxss',?'*.acss'],
??????options:?{
????????parser:?'css'
??????}
????},
????{
??????files:?['*.wxml',?'*.axml'],
??????options:?{
????????parser:?'html'
??????}
????},
????{
??????files:?['*.wxs',?'*.sjs'],
??????options:?{
????????parser:?'babel'
??????}
????}
??]
}

1. 調(diào)整 NPM 腳本命令
   
   

因?yàn)闊o需使用 Gulp.js 了，移除 gulpfile.js 以及相關(guān)依賴包，然后對(duì) npm scripts 調(diào)整下：

//?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. 調(diào)整 husky 及 lint-staged 配置

由于無需再使用到函數(shù)的形式，我們將原先的 .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 。

---

點(diǎn)擊左下角閱讀原文，到?SegmentFault 思否社區(qū)?和文章作者展開更多互動(dòng)和交流。

-?END -