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

· 1 min read

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

配置文件所在位置

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

eslint

.eslintignore

node_modules
miniprogram_npm
**/*.wxml

注意

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

.eslintrc.js

globals: {
    App: true,
    Page: true,
    Component: true,
    Behavior: true,
    wx: true,
    getApp: true,
    getCurrentPages: true,
    __wxConfig: true,
  }

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

.prettierrc.js

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

  "lint-staged": {
    "**/*.{js,wxs}": [
      "eslint --fix"
    ],
    "**/*.{wxml}": [
      "prettier --write"
    ]
  }

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

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

写在最后

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

Last updated on Nov 21, 2021