使Prettier一键格式化WXSS

共 1942字,需浏览 4分钟

 ·

2020-09-20 23:32

作者:越前君
来源:SegmentFault 思否社区



今天看到了 Prettier Configuration Overrides 配置项,于是乎,发现:

  1. 使用 Gulp.js 处理 wxss 文件反而是多此一举了;
  2. 同时很好地解决了下集关于使用 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.


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


至此


本系列文章的示例 Demo 在这里  Ghttps://github.com/toFrankie/wechat_applet_demo.git,分别有上、中、下三篇,欢迎 Star 。





点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流。

- END -

浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报