【无标题】

eslint 数组和对象非空判断整理

1 安装vscode的eslint

2 npx eslint --init 初始化eslint

3 配置文件

eslint.config.mjs

复制代码
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import noNullCheck from "./no-null-check.js"; // 引入自定义规则



export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
 

  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
  {
    plugins: {
      "example": {
        rules: { "no-null-check": noNullCheck }
      }
  },
  rules: {
    "example/no-null-check": "warn", // 注册自定义规则
},
   
  },
];

no-null-check.js

复制代码
module.exports = {
    meta: {
        type: "problem",
        docs: {
            description: "require non-empty initialization for arrays and objects, and check usage in lifecycle methods",
            category: "Best Practices",
            recommended: false,
        },
        schema: [],
    },
    create: function (context) {
        const dataProperties = {};

        return {
            VariableDeclaration(node) {
                node.declarations.forEach(declaration => {
                    const { init } = declaration;
                    if (init) {
                        if (
                            (init.type === 'ArrayExpression' && init.elements.length === 0) ||
                            (init.type === 'ObjectExpression' && init.properties.length === 0)
                        ) {
                            context.report({
                                node: declaration,
                                message: 'Initialization should not be empty for arrays or objects.',
                            });
                        }
                    }
                });
            },
            'Property[key.name="data"]'(node) {
                if (node.value.type === 'FunctionExpression') {
                    const returnStatement = node.value.body.body.find(
                        stmt => stmt.type === 'ReturnStatement'
                    );
                    if (returnStatement && returnStatement.argument.type === 'ObjectExpression') {
                        returnStatement.argument.properties.forEach(prop => {
                            dataProperties[prop.key.name] = prop.value;
                            if (
                                (prop.value.type === 'ArrayExpression' && prop.value.elements.length === 0) ||
                                (prop.value.type === 'ObjectExpression' && prop.value.properties.length === 0)
                            ) {
                                context.report({
                                    node: prop,
                                    message: '记得非空判断',
                                });
                            }
                        });
                    }
                }
            },
            MemberExpression(node) {
                if (node.object.name === 'this' && dataProperties[node.property.name]) {
                    const prop = dataProperties[node.property.name];
                    if (
                        (prop.type === 'ArrayExpression' && prop.elements.length === 0) ||
                        (prop.type === 'ObjectExpression' && prop.properties.length === 0)
                    ) {
                        context.report({
                            node,
                            message: 'Data property should be checked for non-emptiness before usage.',
                        });
                    }
                }
            },
        };
    },
};
相关推荐
猫猫不是喵喵.5 小时前
vue 路由
前端·javascript·vue.js
bin91536 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
拉不动的猪6 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
魔云连洲7 小时前
Vue2和Vue3响应式的基本实现
开发语言·前端·javascript·vue.js
JSON_L8 小时前
Vue 组件通信 - Ref组件通信
javascript·vue.js·ecmascript
努力的搬砖人.8 小时前
Vue 2 和 Vue 3 有什么区别
前端·vue.js·经验分享·面试
Fri_9 小时前
Vue 使用 xlsx 插件导出 excel 文件
javascript·vue.js·excel
萌萌哒草头将军10 小时前
🔥🔥🔥4 月 1 日尤雨溪突然宣布使用 Go 语言重写 Rolldown 和 Oxc!
前端·javascript·vue.js
萌萌哒草头将军10 小时前
🏖️ TanStack:一套为现代 Web 开发打造的强大、无头且类型安全的库集合 🔥
前端·javascript·vue.js
指针满天飞10 小时前
同步、异步、Promise、then、async/await
前端·javascript·vue.js