I didn’t think there was a final article…… Over your face. JPG

  • PretTier to format WXSS with one click
  • PretTier to format WXSS with one click
  • PretTier to format WXSS with one click

The first two articles, after all, still left some imperfect places. In addition, today you see the PretTier Configuration Overrides Configuration entry.

So what I found was:

  1. Use gulp.jswxssThe documents are unnecessary;
  2. And it’s solved nicelyThe fixationOn the uselint-stagedOnly the issue of staging files is handled.

preface

In fact, using gulp.js to handle it is not completely undesirable, at least provides me with a train of thought, for reference.

Before updating the code, it is implemented in a Tag. The source code is at 👉 wechat_applet_demo-1.0.0.

Anyway, I’m enjoying the pothole.

Begin to repair your regret

First, Prettier is supported for certain file extensions, folders, and specific files to be configured differently 👉 here.

Overrides let you have different configuration for certain file extensions, folders and specific files.

  1. Adjust the Prettier configuration:
// .prettierrc.js
{
  overrides: [
    {
      files: ['*.wxss', '*.acss'],
      options: {
        parser: 'css'
      }
    },
    {
      files: ['*.wxml', '*.axml'],
      options: {
        parser: 'html'
      }
    },
    {
      files: ['*.wxs', '*.sjs'],
      options: {
        parser: 'babel'
      }
    }
  ]
}
  1. Adjust the NPM script command

Since gulp.js is no longer needed, remove gulpfile.js and the associated dependency packages and adjust the 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. Adjust the husky and lint-staged configurations

Since we no longer need to use the form of a function, we remove the original.lint-stagedrc.js configuration file and place it in 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"
  }
}

That’s it. It’s gone.

At this point

The regret left before has been repaired, and my obsessive-compulsive disorder has been cured, haha.

A sample Demo of this series can be found here at 👉 GitHub: wechat_applet_demo. Star is welcome.