引文

我们在开发普通的JS项目的时候，可以使用 eslint 做代码的检测，使用prettier做代码格式化，使用husky和lint-staged做代码提交拦截， 通过@commitlint/cli和@commitlint/config-conventional做提交日志控制。现在我们有一个原生的微信小程序，并没有做这些控制，导致代码维护难度很大，经常产生一些运行时错误。为此我调查了微信的原生开发工具，支持eslint和prettier插件。下面就让我们一步步实现它。

微信IDE下载插件

这里和vscode下载插件是一样样的，只是这里插件支持的比较少。

IDE工作区配置

这里和vscode 的配置一样，都是在 .vscode/settings.json中

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  }
}

下载依赖包(配置package.json)

这里我们要安装所需要的依赖包，这里我就直接粘贴一下我的package.json配置，大家粘到自己项目里，npm i 一下就ok了。 下面的每一行配置都很重要。

"scripts": {
    "commit": "git-cz",
    "prepare": "is-ci || husky install",
    "eslint:fix": "eslint --fix --ext .ts ."
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cz-conventional-changelog": "^3.3.0",
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^7.0.1",
    "is-ci": "^3.0.0",
    "lint-staged": "^11.1.1",
    "prettier": "^2.3.2"
  },

添加主要配置文件

.eslintrc.js

eslint检测方案

module.exports = {
  root: true,
  parser: 'babel-eslint',
  globals: {
    App: true,
    Page: true,
    Component: true,
    Behavior: true,
    wx: true,
    getApp: true
  },
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    commonjs: true
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error',
    'no-console': 1
  }
};

.prettierrc.js

格式化代码方案

module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf'
};

commitlint.config.js

日志引导信息

module.exports = { extends: ['@commitlint/config-conventional'] };

.lintstagedrc

指定提交检测的文件类型

{
  "*.js": "eslint --fix --ext .js"
}

添加 pre-commit

提交前代码检测的钩子，执行下面指令添加

npx husky add .husky/pre-commit 'npx --no-install lint-staged --allow-empty "$1"'

添加 commit-msg

提交前日志检测的钩子，执行下面指令添加

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

提交代码

我们可以将待提交代码加入暂存区，然后执行下面指令，将引导你进行日志的追加。

npm run commit