【无标题】

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.',
                        });
                    }
                }
            },
        };
    },
};
相关推荐
余道各努力,千里自同风20 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave27 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟29 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
码蜂窝编程官方3 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
乐闻x3 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
533_5 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js