使Prettier一键格式化WXSS(结局篇)

简介: 使Prettier一键格式化WXSS(结局篇)

前言


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


使Prettier一键格式化WXSS(上集)

使Prettier一键格式化WXSS(下集)

使Prettier一键格式化WXSS(结局篇)

Git Commit 规范(扩展篇)


前两篇文章,终究还是留下了一些不太完美的地方。加之,今天看到了 Prettier Configuration Overrides 、Setting the parser option 配置项。


于是乎,我发现:

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


  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 在这里  GitHub: wechat_applet_demo,欢迎 Star 。


目录
相关文章
|
前端开发 Shell API
使Prettier一键格式化WXSS(下集)
今天介绍利用 Git Hooks 钩子实现提交代码自动执行此前的 ESLint、Prettier 命令,以保证我们提交的代码是不丑的。
175 0
使Prettier一键格式化WXSS(下集)
|
JSON 资源调度 前端开发
使Prettier一键格式化WXSS(上集)
使Prettier一键格式化WXSS(上集)
273 0
使Prettier一键格式化WXSS(上集)
|
JavaScript 前端开发 开发工具
从esLint+Prettier开始格式化代码
从esLint+Prettier开始格式化代码
443 0
从esLint+Prettier开始格式化代码
|
JavaScript
prettier格式化问题
prettier格式化问题
83 0
|
JavaScript
用 Prettier 美化代码
Eslint 解决了代码格式检查的问题,同时,一些有用的提示能让我们发现 bug 和无用代码(如 `no-unused-vars, no-extra-bind, no-implicit-globals`)。但是,eslint 并不能自动帮我们美化代码,自动让代码风格统一,格式优美。EditorConfig 部分解决了这个问题,它解决了代码缩紧,行末不出现空格符等问题,但是对于统一整个代码的风格,这
10048 1
|
开发工具 git
如何将整个项目按照eslint格式化
如何将整个项目按照eslint格式化
443 0
|
JavaScript 前端开发
ESlint + Stylelint + VSCode自动格式化代码(2023)
ESlint + Stylelint + VSCode自动格式化代码(2023)
283 0
|
JavaScript
VSCode格式化html标签代码
VSCode问题总结
1207 0
VSCode格式化html标签代码
|
JavaScript 前端开发
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。 下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
1469 29
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
|
JavaScript IDE 开发工具
非常规Vue项目配置ESlint和Prettier
这里的非常规指的是,不是使用 `Vue Cli` 这种工具包去创建的项目,或者创建了但是没有加上 `ESlint` 的配置,比如下面这个

热门文章

最新文章