使Prettier一键格式化WXSS(结局篇)
没想到真有最终篇......捂脸.jpg
- 使Prettier一键格式化WXSS(上集)
- 使Prettier一键格式化WXSS(下集)
- 使Prettier一键格式化WXSS(结局篇)
- Git Commit 规范(扩展篇)
于是乎,我发现:
前言
- 使用 Gulp.js 处理
wxss
文件反而是多此一举了;- 同时很好地解决了下集关于使用
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.
- 对 Prettier 配置做调整:
// .prettierrc.js
{
overrides: [
{
files: ['*.wxss', '*.acss'],
options: {
parser: 'css'
}
},
{
files: ['*.wxml', '*.axml'],
options: {
parser: 'html'
}
},
{
files: ['*.wxs', '*.sjs'],
options: {
parser: 'babel'
}
}
]
}
- 调整 NPM 脚本命令
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"
},
}
- 调整 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 。
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 昨晚做春梦了吗(教给你怎么做最厉害的!梦里还有维多利亚的天使)