沒想到真有最終篇......捂臉.jpg

• 使Prettier一鍵格式化WXSS（上集）
• 使Prettier一鍵格式化WXSS（下集）
• 使Prettier一鍵格式化WXSS（結(jié)局篇）
• Git Commit 規(guī)范（擴(kuò)展篇）

前兩篇文章，終究還是留下了一些不太完美的地方。加之，今天看到了 Prettier Configuration Overrides 、Setting the parser option 配置項(xiàng)。

于是乎，我發(fā)現(xiàn)：

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

前言

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

在更新代碼之前，將其實(shí)現(xiàn)方式，打了個(gè) Tag，源碼在 wechat_applet_demo-1.0.0。

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

開始修復(fù)遺憾

首先，Prettier 是支持對(duì)某些文件擴(kuò)展名，文件夾和特定文件進(jìn)行不同的配置 這里。

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'
      }
    }
  ]
}

2. 調(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"
  },
}

3. 調(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"
  }
}

就這樣，沒了。

至此

此前留下的遺憾補(bǔ)全了，我的強(qiáng)迫癥也治愈了，哈哈。

本系列文章的示例 Demo 在這里 GitHub: wechat_applet_demo，歡迎 Star 。