利用工具提升前端代码质量-微信小程序

发表于 更新于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 2 分钟

最近2周时间从事小程序开发，其代码风格同样需要配套设置，而配置与一般Web开发还是有些许区别，这里Mark下。

配置文件所在位置

小程序项目默认如下，因此package.json/eslint等配置的根目录在miniprogram下，并非在项目根目录下。

eslint

.eslintignore

1
2
3
node_modules
miniprogram_npm
**/*.wxml

注意

  1. wxml作为HTML对待，因此这里对于ES风格需要去掉对wxml的影响

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
globals: {
    App: true,
    Page: true,
    Component: true,
    Behavior: true,
    wx: true,
    getApp: true,
    getCurrentPages: true,
    __wxConfig: true,
  }

增加全局变量声明，这样IDE下使用并不会提醒报eslint --no-undef 错，

.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'always',
  htmlWhitespaceSensitivity: 'css',
  endOfLine: 'lf',
  overrides: [
    {
      files: '*.wxml',
      options: {parser: 'html'},
    },
    {
      files: '*.wxss',
      options: {parser: 'css'},
    },
    {
      files: '*.wxs',
      options: {parser: 'babel'},
    },
  ],
};

对于wxml/wxss采用不同的转译器，从而确保风格处理的正确。

lint-staged

1
2
3
4
5
6
7
8
"lint-staged": {
  "**/*.{js,wxs}": [
    "eslint --fix"
  ],
  "**/*.{wxml}": [
    "prettier --write"
  ]
}

对于JS采用eslint风格处理，而对于wxml采用prettier。

需要注意，eslint配置中有prettier插件，因此最终JS其实也会经过prettier处理，因此如上并没有明确的调用处理。

写在最后

代码风格并非仅仅是统一代码颜值，更多是统一最佳实践，从而规避一些常见错误。so，重视起来。