使用 Prettier 格式化微信小程序代码

整理目录结构

将源码放到 src 目录下:

  • src
    • app.js
    • app.json
    • app.wxss
    • sitemap.json
  • project.config.json

接着修改 project.config.json 中的 miniprogramRootsrc/

安装 Prettier

首先我们需要创建一个 package.json 文件:

1
npm init -y

接着安装 Prettier。添加 -D 参数 (或者 --save-dev) 可以将其作为开发时依赖进行安装。

1
npm i -D prettier

package.json 中添加格式化命令:

1
2
3
"scripts": {
"lint": "prettier --write src/**/*.{wxml,wxss,js,json}"
},

配置 Prettier

在根目录下创建 .prettierrc.js。此处的配置可以根据需要自行替换,详见: Options。其中最为核心的配置是将 wxmlwxss 两种文件格式分别按照 htmlcss 进行解析。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
singleQuote: true,
printWidth: 100,
trailingComma: 'none',
arrowParens: 'avoid',
overrides: [
{
files: '*.wxml',
options: { parser: 'html' }
},
{
files: '*.wxss',
options: { parser: 'css' }
}
]
}

接着在根目录创建 .prettierignore 文件,这里面用来存放不需要进行格式化的文件。

1
2
src/miniprogram_npm/
src/vendor/

至此,在终端中执行 npm run lint 就可以对小程序代码进行格式化了。Enjoy~