Eslint在Jsx中的使用（6）

在 npm 上发布自己的 Eslint 规则

自定义规则

基于上一篇文章我们有了以下代码，回顾上文

/* 自定义规则 */
module.exports = {
  meta: {
    type: "problem",
    docs: {
      description: "error console.log have 99",
    },
    fixable: "code",
    schema: [],
  },
  create: function (context) {
    return {
      ExpressionStatement: function (node) {
        /* 存在相等则报错 */
        if (node.expression.arguments[0].value === "99") {
          context.report({
            node: node,
            message: "error console.log have 99",
          });
        }
      },
    };
  },
};

自定义测试

/* 自定义测试 */
const rule = require("../../../lib/rules/eslint-plugins-rule");
const RuleTester = require("eslint").RuleTester;

const ruleTester = new RuleTester();

ruleTester.run("eslint-plugins-rule", rule, {
  /* 有效场景 */
  valid: ['console.log("66");'],
  /* 无效场景 */
  invalid: [
    {
      code: "console.log('99');",
      errors: [
        {
          message: "error console.log have 99",
          type: "ExpressionStatement",
        },
      ],
    },
  ],
});
console.log("All tests passed!");

配置 rules 文件夹的 index.js 文件

/**
 * @fileoverview con99
 * @author con99
 */
"use strict";

//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------
const requireIndex = require("requireindex");
// 在这里导入了我们上面写的自定义规则
const rules = requireIndex(__dirname + "/rules");
module.exports = {
  // rules是必须的
  rules,
  // 增加configs配置
  configs: {
    // 配置了这个之后，就可以在其他项目中像下面这样使用了
    // extends: ['"plugin:xxxx/recommended"']
    recommended: {
      plugins: ["con99"], //con99 是package.json中 "name": "eslint-plugin-con99",中eslint-plugin-后面的名字
      rules: {
        "con99/eslint-plugins-rule": ["error"], //eslint-plugins-rule为我们自己创建的规则文件名称
      },
    },
  },
};

发布插件

/* 登录 */
npm login
/* 发布 */
npm publish

登录成功

发布成功

在 npm 查看包

下载插件

在我们之前创建 jsx 文件中下载插件

npm i eslint-plugin-con99

使用插件

在我们之前创建好的项目中的.eslintrc.json 中使用插件

重启 vscode 的 Eslint 插件

测试插件情况

在我们之前创建好的项目中的 App.jsx 中输入 console.log(“99”)

到这里我们完成了自定义 Eslint 插件的下载和使用

更新插件

如果我们要更新我们自定义的 Eslint 插件，就在我们更新完的插件文件输入以下命令

npm version patch
/* 这个命令是基于当前的包现在的版本进行一个小版本的更新
假如我们当前版本为0.0.0，输入这个命令版本就变成了0.0.1，再输入就变成了0.0.2
*/


npm version 2.0.2
/* 这个命令是自定义版本号，不能比之前版本低哦
*/

我使用 npm version 2.0.2 这个命令更新版本

发布更新插件

/* 在输入npm publish即可把最新版本提交上去 */
npm publish

发布成功

在项目中使用更新插件

/* 在输入npm 插件名字@版本号即可下载对应版本 */
npm i eslint-plugin-con99@2.0.2

到这里然后npm 上发布自己的 Eslint 规则就完成了！