小程序 eslint

开发方式

• 安装全局依赖(如已安装，可直接跳过)

npm install -g yo generator-eslint

• 安装开发依赖

npm i

• 生成 eslint rule

yarn create:rule

会出现创建规则命令行交互

? What is your name?  // 开发者名称
? Where will this rule be published? (Use arrow keys) // 这个规则将在哪里发布？
❯ ESLint Core    // 官方核心规则
  ESLint Plugin  // 选择ESLint插件，我们选择这个
? What is the rule ID?   // 规则的ID，推荐使用kebab-case命名规则，例如attribute-kebab-case
? Type a short description of this rule:  // 输入该规则的描述
? Type a short example of the code that will fail:  // 后续可在tests中进行测试用
   create docs/rules/attribute-kebab-case.md         // 文档
   create lib/rules/attribute-kebab-case.js          // 规则文件
   create tests/lib/rules/attribute-kebab-case.js    // 测试文件

使用方式

• 安装依赖(需要安装 eslint)

yarn add @zhaiun/eslint-plugin-miniprogram --dev

• 添加至项目中

  1. 在 vscode 配置中开启 eslint 校验语言列表(eslint.validate)

     "eslint.validate": [
       ......
       "wxml"
     ],

  2. 在 eslintrc 添加 > .eslintrc, .eslintrc.js, .eslintrc.json

      module.exports = {
        root: true,
        parser: 'babel-eslint',
     -  extends: [...],
     +  extends: [..., 'plugin:@zhaiun/miniprogram/all'],
        rules: {
       	...
       },
     +  // 为特定类型的文件指定处理器
     +  overrides: [
     +    {
     +      // 定义需要解析文件的扩展名
     +      files: ["*.wxml"],
     +      // 定义eslint的插件
     +      plugins: ["@zhaiun/miniprogram"],
     +      // 定义解析器
     +      parser: "@wxml/parser"
     +    }
     +  ]
      };
     

参考文档

手摸手教你定制 ESLint rule 以及了解 ESLint 的运行原理

微信wxml解析器

TODO

• [ ] 事件命名不符合handle开头