使Prettier一键格式化WXSS（结局篇）

时间 2020-12-01

标签 css html git github npm json gulp segmentfault babel app 栏目 CSS 繁體版

原文原文链接

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

前两篇文章，终究仍是留下了一些不太完美的地方。加之，今天看到了 Prettier Configuration Overrides 配置项。html

因而乎，我发现：git

使用 Gulp.js 处理 wxss 文件反而是画蛇添足了；

同时很好地解决了下集关于使用 lint-staged 仅处理暂存文件的问题。

前言

其实使用 Gulp.js 来处理的方式并不是彻底不可取，起码给我提供了一个思路，可供参考。github

在更新代码以前，将其实现方式，打了个 Tag，源码在 👉 wechat_applet_demo-1.0.0。npm

Anyway，这个踩坑过程，我很享受。json

开始修复遗憾

首先，Prettier 是支持对某些文件扩展名，文件夹和特定文件进行不一样的配置 👉 这里。gulp

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 调整下：segmentfault

// 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 中。babel

// 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"
  }
}

就这样，没了。app

至此

此前留下的遗憾补全了，个人强迫症也治愈了，哈哈。

本系列文章的示例 Demo 在这里 👉 GitHub: wechat_applet_demo，欢迎 Star 👋。