eslint-plugin-light 1.0.21 → 1.0.22

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## <small>1.0.22 (2026-03-24)</small>
+
+* feat: add no-complex-style-class rule ([2cc25ee](https://github.com/novlan1/plugin-light/commits/2cc25ee))
+* feat: optmize eslint rules ([b3e85c6](https://github.com/novlan1/plugin-light/commits/b3e85c6))
+* chore: update deps ([6828b0c](https://github.com/novlan1/plugin-light/commits/6828b0c))
+* chore: update package.json ([338b104](https://github.com/novlan1/plugin-light/commits/338b104))
+
+
+
 ## <small>1.0.21 (2026-01-04)</small>
 
 * feat(eslint-plugin-light): add no-src-imports-in-components rule ([b960951](https://github.com/novlan1/plugin-light/commits/b960951))

package/README.md

@@ -801,6 +801,75 @@ bannedPrefixes: ['src', '@/', '~/']
 message: '该目录将被发布为独立的 npm 包，请使用相对路径导入'
 ```
 
+### 4.19. no-complex-style-class
+
+禁止在 Vue 模板的 `:style` 或 `:class` 绑定中**直接**使用函数调用、模板字符串等复杂表达式。
+
+背景：
+
+> uni-app Vue2 小程序中，`:style` 和 `:class` 的**顶层表达式**不支持函数调用和模板字符串等语法。例如 `:style="tool._style(xxx)"` 或 `:class="\`${prefix}-item\`"` 在小程序中会解析失败。
+>
+> 应使用计算属性或字符串拼接 `'' + xxx` 代替。
+>
+> 注意：在数组元素、对象属性值、条件表达式分支中使用函数调用是**允许**的，例如 `:class="[getClass(), 'base']"` 和 `:style="flag ? getStyle() : ''"` 在小程序中可以正常工作。
+
+Usage:
+
+```js
+// .eslintrc.js
+
+module.exports = {
+  plugins: [
+    'light',
+  ],
+  rules: {
+    'light/no-complex-style-class': 2,
+  },
+}
+```
+
+错误示例：
+
+```html
+<!-- ❌ 顶层函数调用 -->
+<div :style="tool._style(xxx)" />
+<div :class="getClass(item)" />
+
+<!-- ❌ 顶层模板字符串 -->
+<div :style="`color: ${color}`" />
+<div :class="`${prefix}-item`" />
+```
+
+正确示例：
+
+```html
+<!-- ✅ 变量引用 -->
+<div :style="myStyle" />
+<div :class="item.className" />
+
+<!-- ✅ 对象表达式（值为变量） -->
+<div :style="{ color: myColor }" />
+<div :class="{ active: isActive }" />
+
+<!-- ✅ 字面量数组 -->
+<div :class="['a', 'b']" />
+
+<!-- ✅ 条件表达式（值为变量） -->
+<div :style="flag ? styleA : styleB" />
+
+<!-- ✅ 数组元素中的函数调用 -->
+<div :class="[utils.getClass(classPrefix, 'medium'), tClassImage]" />
+
+<!-- ✅ 条件表达式分支中的函数调用 -->
+<div :style="inChat ? imageStyle(item) : ''" />
+
+<!-- ✅ 数组 + 条件混合 -->
+<div :class="[classPrefix, inChat ? classPrefix + '--chatting' : '', getFileTypeClass(inChat, files)]" />
+
+<!-- ✅ 对象属性值中的函数调用 -->
+<div :style="{ color: getColor() }" />
+```
+
 ## 5. 更新日志
 
 [点此查看](./CHANGELOG.md)

package/lib/configs/recommended.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: require.resolve('./base'),
   rules: {
     'light/no-complex-key': 1,
+    'light/no-complex-style-class': 1,
     'light/no-import-vant': 2,
   },
 };

package/lib/rules/classname-per-line.js

@@ -1,4 +1,4 @@
-const utils = require('eslint-plugin-vue/lib/utils');
+const { getParserServices } = require('../utils/parser-services');
 
 
 const DEFAULT_THRESHOLD = 3;
@@ -26,16 +26,20 @@ module.exports = {
     ], // 无配置选项
   },
   create(context) {
-    return utils.defineTemplateBodyVisitor(context, {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      return {};
+    }
+
+    return parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name=\'class\']'(node) {
         if (!node.value || node.value.type !== 'VLiteral') return;
 
         const options = context.options[0] || {};
         const threshold = options.spelling || DEFAULT_THRESHOLD;
 
-
-        const sourceCode = context.getSourceCode();
-
         const text = sourceCode.getText(node.value);
         const classValue = node.value.value.trim();
 
@@ -56,7 +60,6 @@ module.exports = {
           loc: node.value.loc,
           message: 'CSS classes should be one per line',
           fix(fixer) {
-            const sourceCode = context.getSourceCode();
             const [startQuote, endQuote] = getQuoteChars(sourceCode, node.value);
 
             const indentation = ' '.repeat(node.loc.start.column);

package/lib/rules/img-v-lazy.js

@@ -1,4 +1,4 @@
-const utils = require('eslint-plugin-vue/lib/utils');
+const { getParserServices } = require('../utils/parser-services');
 
 module.exports = {
   meta: {
@@ -12,7 +12,14 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    return utils.defineTemplateBodyVisitor(context, {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      return {};
+    }
+
+    return parserServices.defineTemplateBodyVisitor({
       'VElement[name=\'img\']'(node) {
         const srcBinding = node.startTag.attributes.find(attr => attr.directive
                  && attr.key.name
@@ -30,10 +37,10 @@ module.exports = {
             message: 'Use v-lazy instead of :src for image loading',
             fix(fixer) {
               // 获取 :src 绑定的完整表达式文本
-              const srcText = context.getSourceCode().getText(srcBinding.value.expression);
+              const srcText = sourceCode.getText(srcBinding.value.expression);
 
               // 获取 :src 属性的完整文本
-              const fullSrcText = context.getSourceCode().getText(srcBinding);
+              const fullSrcText = sourceCode.getText(srcBinding);
 
               // 计算替换文本
               let replacement;

package/lib/rules/json-parse-try-catch.js

@@ -10,6 +10,9 @@ module.exports = {
       description: desc,
       category: 'Best Practices',
     },
+    messages: {
+      requireTryCatch: desc,
+    },
   },
   schema: [{
     type: 'object',
@@ -32,12 +35,12 @@ module.exports = {
         const calleePropertyName = node.callee?.property?.name;
 
         const subNode = node.arguments?.[0];
-        const sbCalleeObjectName = subNode?.callee?.object?.name;
+        const subCalleeObjectName = subNode?.callee?.object?.name;
         const subCalleePropertyName = subNode?.callee?.property?.name;
 
         if (calleeObjectName === 'JSON'
           && calleePropertyName === 'parse'
-          && (strict || !(sbCalleeObjectName === 'JSON' && subCalleePropertyName === 'stringify'))
+          && (strict || !(subCalleeObjectName === 'JSON' && subCalleePropertyName === 'stringify'))
         ) {
           let p = node.parent;
           let hasTryFlg = false;
@@ -48,7 +51,10 @@ module.exports = {
           }
 
           if (!hasTryFlg) {
-            context.report(node, desc);
+            context.report({
+              node,
+              messageId: 'requireTryCatch',
+            });
           }
         }
       },

package/lib/rules/no-complex-key.js

@@ -1,3 +1,5 @@
+const { getParserServices } = require('../utils/parser-services');
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -14,16 +16,17 @@ module.exports = {
   },
 
   create(context) {
-    const fileName = context.getFilename();
+    const fileName = context.filename || context.getFilename();
     if (!fileName.endsWith('.vue')) {
       return {};
     }
-    if (!context.parserServices?.defineTemplateBodyVisitor) {
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
       return {
       };
     }
 
-    return context.parserServices.defineTemplateBodyVisitor({
+    return parserServices.defineTemplateBodyVisitor({
       VAttribute(node) {
         if (!node.key
           || node.key.type !== 'VDirectiveKey'

package/lib/rules/no-complex-style-class.js

@@ -0,0 +1,83 @@
+const { getParserServices } = require('../utils/parser-services');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+    docs: {
+      description: 'vue模板中不要在 :style 或 :class 中使用函数调用、模板字符串等复杂表达式（uni-app 小程序下不支持）',
+    },
+    messages: {
+      funcStyleError: 'Do not use function call in :style binding, use computed property or `\'\' + xxx` instead',
+      tplStyleError: 'Do not use template literal in :style binding, use computed property or `\'\' + xxx` instead',
+      funcClassError: 'Do not use function call in :class binding, use computed property or `\'\' + xxx` instead',
+      tplClassError: 'Do not use template literal in :class binding, use computed property or `\'\' + xxx` instead',
+    },
+  },
+
+  create(context) {
+    const fileName = context.filename || context.getFilename();
+    if (!fileName.endsWith('.vue')) {
+      return {};
+    }
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      return {};
+    }
+
+    /**
+     * 检查顶层表达式是否为函数调用或模板字符串
+     *
+     * 只检测直接绑定到 :style/:class 的顶层表达式，不递归检查子表达式。
+     * 因为数组元素、对象属性值、条件表达式分支中的函数调用/模板字符串
+     * 在 uni-app 小程序中是支持的，例如：
+     *   :class="[utils.getClass(...), tClassImage]"  — 合法
+     *   :style="inChat ? imageStyle(item) : ''"       — 合法
+     *   :class="[classPrefix, inChat ? classPrefix + '--chatting' : '', getFileTypeClass(...)]" — 合法
+     */
+    function checkExpression(expression, attrName) {
+      if (!expression) return;
+
+      const isStyle = attrName === 'style';
+      const funcMessageId = isStyle ? 'funcStyleError' : 'funcClassError';
+      const tplMessageId = isStyle ? 'tplStyleError' : 'tplClassError';
+
+      if (expression.type === 'CallExpression') {
+        // :style="tool._style(xxx)" / :class="getClass(xxx)"
+        context.report({
+          node: expression,
+          messageId: funcMessageId,
+        });
+        return;
+      }
+
+      if (expression.type === 'TemplateLiteral') {
+        // :style="`color: ${color}`" / :class="`${prefix}-item`"
+        context.report({
+          node: expression,
+          messageId: tplMessageId,
+        });
+      }
+    }
+
+    return parserServices.defineTemplateBodyVisitor({
+      VAttribute(node) {
+        if (!node.key
+          || node.key.type !== 'VDirectiveKey'
+          || node.key?.argument?.type !== 'VIdentifier'
+        ) {
+          return;
+        }
+
+        const attrName = node.key?.argument?.name;
+        if (attrName !== 'style' && attrName !== 'class') {
+          return;
+        }
+
+        if (node?.value?.type === 'VExpressionContainer' && node.value.expression) {
+          checkExpression(node.value.expression, attrName);
+        }
+      },
+    });
+  },
+};

package/lib/rules/no-decimal-in-brackets.js

@@ -1,4 +1,4 @@
-const utils = require('eslint-plugin-vue/lib/utils');
+const { getParserServices } = require('../utils/parser-services');
 const TEST_REGEX = /\[[^\](]*\.\d+[a-zA-Z]+[^\]]*\]/;
 
 
@@ -27,7 +27,12 @@ module.exports = {
     const options = context.options[0] || {};
     const regex = options.regexp ?? TEST_REGEX;
 
-    return utils.defineTemplateBodyVisitor(context, {
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
+      return {};
+    }
+
+    return parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name=\'class\']'(node) {
         if (!node.value || node.value.type !== 'VLiteral') return;
 

package/lib/rules/no-import-vant.js

@@ -12,7 +12,7 @@ module.exports = {
   },
 
   create(context) {
-    const fileName = context.getFilename();
+    const fileName = context.filename || context.getFilename();
     if (!fileName.endsWith('.vue')) {
       return {};
     }

package/lib/rules/no-js-file.js

@@ -50,7 +50,7 @@ module.exports = {
     const include = options.include || DEFAULT_INCLUDE;
     const exclude = options.exclude || DEFAULT_EXCLUDE;
 
-    const filename = context.getFilename();
+    const filename = context.filename || context.getFilename();
     const pureFilePath = path.relative(projectRoot, filename);
 
     if (!pureFilePath) {

package/lib/rules/no-multiple-script.js

@@ -10,9 +10,9 @@ module.exports = {
   create(context) {
     return {
       Program(node) {
-        const sourceCode = context.getSourceCode();
+        const sourceCode = context.sourceCode || context.getSourceCode();
         const vueFileContent = sourceCode.getText();
-        const filename = context.getFilename();
+        const filename = context.filename || context.getFilename();
 
         if (!filename.endsWith('.vue')) {
           return {};

package/lib/rules/no-plus-turn-number.js

@@ -1,3 +1,5 @@
+const { getParserServices } = require('../utils/parser-services');
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -12,16 +14,17 @@ module.exports = {
   },
 
   create(context) {
-    const fileName = context.getFilename();
+    const fileName = context.filename || context.getFilename();
     if (!fileName.endsWith('.vue')) {
       return {};
     }
-    if (!context.parserServices?.defineTemplateBodyVisitor) {
+    const parserServices = getParserServices(context);
+    if (!parserServices?.defineTemplateBodyVisitor) {
       return {
       };
     }
 
-    return context.parserServices.defineTemplateBodyVisitor({
+    return parserServices.defineTemplateBodyVisitor({
       VAttribute(node) {
         if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression) {
           const { operator } = node.value.expression;

package/lib/rules/no-src-imports-in-components.js

@@ -53,7 +53,7 @@ module.exports = {
     return {
       ImportDeclaration(node) {
         // 获取当前文件的绝对路径
-        const filename = context.getFilename();
+        const filename = context.filename || context.getFilename();
 
         // 标准化路径（统一使用正斜杠）
         const normalizedPath = filename.replace(/\\/g, '/');

package/lib/rules/no-todo-comment.js

@@ -22,13 +22,13 @@ module.exports = {
     ],
   },
   create(context) {
-    const sourceCode = context.getSourceCode();
+    const sourceCode = context.sourceCode || context.getSourceCode();
     const comments = sourceCode.getAllComments();
 
-    comments.forEach((comment) => {
-      const options = context.options[0] || {};
-      const keyword = options.keyword ?? DEFAULT_KEYWORD;
+    const options = context.options[0] || {};
+    const keyword = options.keyword ?? DEFAULT_KEYWORD;
 
+    comments.forEach((comment) => {
       if (comment.value.includes(keyword)) {
         context.report({
           node: comment,

package/lib/rules/valid-file-name.js

@@ -74,7 +74,7 @@ module.exports = {
     const exclude = options.exclude || DEFAULT_EXCLUDE;
 
 
-    const filename = context.getFilename();
+    const filename = context.filename || context.getFilename();
     const pureFilePath = path.relative(projectRoot, filename);
 
 

package/lib/rules/valid-pmd-import.js

@@ -27,8 +27,9 @@ module.exports = {
   create(context) {
     const options = context.options[0] || {};
     const baseDir = options.baseDir || 'src';
+    const sourceCode = context.sourceCode || context.getSourceCode();
 
-    const filename = context.getFilename();
+    const filename = context.filename || context.getFilename();
     const absolutePath = path.resolve(filename);
 
     // 提取当前包名
@@ -114,7 +115,6 @@ module.exports = {
      */
     const checkAndReport = (node, importPath) => {
       if (importPath && importPath.startsWith(pmdPackageName)) {
-        const sourceCode = context.getSourceCode();
         const fixNode = getFixNode(node);
 
         context.report({

package/lib/rules/valid-vue-comp-import.js

@@ -180,7 +180,7 @@ module.exports = {
   create(context) {
     // const sourceCode = context.getSourceCode();
     // const cwd = context.getCwd();
-    const fileName = context.getFilename();
+    const fileName = context.filename || context.getFilename();
 
     const dirname = path.dirname(fileName);
     if (!fileName.endsWith('.vue')) {

package/lib/test/index.js

@@ -1,3 +1,4 @@
+require('./no-complex-style-class');
 require('./no-decimal-in-brackets');
 require('./no-direct-img-src');
 require('./no-non-index-import');

package/lib/test/no-complex-style-class.js

@@ -0,0 +1,85 @@
+const { RuleTester } = require('eslint');
+
+const rule = require('../rules/no-complex-style-class');
+
+const FILENAME = 'test.vue';
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('no-complex-style-class', rule, {
+  valid: [
+    // :style 绑定变量 — 合法
+    { code: '<template><div :style="myStyle"></div></template>', filename: FILENAME },
+
+    // :style 绑定对象（值为变量） — 合法
+    { code: '<template><div :style="{ color: myColor }"></div></template>', filename: FILENAME },
+
+    // :class 绑定变量 — 合法
+    { code: '<template><div :class="item.className"></div></template>', filename: FILENAME },
+
+    // :class 绑定字面量数组 — 合法
+    { code: '<template><div :class="[\'a\', \'b\']"></div></template>', filename: FILENAME },
+
+    // :class 绑定对象 — 合法
+    { code: '<template><div :class="{ active: isActive }"></div></template>', filename: FILENAME },
+
+    // :style 绑定条件表达式（值为变量） — 合法
+    { code: '<template><div :style="flag ? styleA : styleB"></div></template>', filename: FILENAME },
+
+    // 静态 style — 合法（非绑定）
+    { code: '<template><div style="color: red"></div></template>', filename: FILENAME },
+
+    // 静态 class — 合法（非绑定）
+    { code: '<template><div class="foo bar"></div></template>', filename: FILENAME },
+
+    // 数组元素中的函数调用 — 合法（小程序支持）
+    { code: '<template><div :class="[utils.getClass(classPrefix, dataSize || \'medium\', dataShape, dataBordered), tClassImage]"></div></template>', filename: FILENAME },
+
+    // 数组中混合使用函数调用和条件表达式 — 合法
+    { code: '<template><div :class="[classPrefix, inChat ? classPrefix + \'--chatting\' : \'\', getFileTypeClass(inChat, files)]"></div></template>', filename: FILENAME },
+
+    // 条件表达式中的函数调用 — 合法（小程序支持）
+    { code: '<template><div :style="inChat ? imageStyle(item) : \'\'"></div></template>', filename: FILENAME },
+
+    // 对象属性值中的函数调用 — 合法（小程序支持）
+    { code: '<template><div :style="{ color: getColor() }"></div></template>', filename: FILENAME },
+
+    // 条件表达式分支中的函数调用 — 合法
+    { code: '<template><div :style="flag ? getStyle() : defaultStyle"></div></template>', filename: FILENAME },
+
+    // 数组中有多个函数调用 — 合法
+    { code: '<template><div :class="[getA(), getB()]"></div></template>', filename: FILENAME },
+  ],
+  invalid: [
+    // :style 中直接使用函数调用（顶层）
+    {
+      code: '<template><div :style="tool._style(xxx)"></div></template>',
+      filename: FILENAME,
+      errors: [{ messageId: 'funcStyleError' }],
+    },
+    // :class 中直接使用函数调用（顶层）
+    {
+      code: '<template><div :class="getClass(item)"></div></template>',
+      filename: FILENAME,
+      errors: [{ messageId: 'funcClassError' }],
+    },
+    // :style 中直接使用模板字符串（顶层）
+    {
+      code: '<template><div :style="`color: ${color}`"></div></template>',
+      filename: FILENAME,
+      errors: [{ messageId: 'tplStyleError' }],
+    },
+    // :class 中直接使用模板字符串（顶层）
+    {
+      code: '<template><div :class="`${prefix}-item`"></div></template>',
+      filename: FILENAME,
+      errors: [{ messageId: 'tplClassError' }],
+    },
+  ],
+});

package/lib/utils/parser-services.js

@@ -0,0 +1,26 @@
+/**
+ * 获取 parserServices，兼容 ESLint v8 和 v9
+ *
+ * ESLint v9 中 context.parserServices 已被废弃，
+ * 应使用 context.sourceCode.parserServices 代替。
+ *
+ * @param {import('eslint').Rule.RuleContext} context
+ * @returns {object} parserServices
+ */
+function getParserServices(context) {
+  // ESLint v9+: 优先使用 sourceCode.parserServices
+  if (context.sourceCode && context.sourceCode.parserServices) {
+    return context.sourceCode.parserServices;
+  }
+  // ESLint v8: getSourceCode() 方式
+  if (typeof context.getSourceCode === 'function') {
+    const sourceCode = context.getSourceCode();
+    if (sourceCode && sourceCode.parserServices) {
+      return sourceCode.parserServices;
+    }
+  }
+  // 最终回退到 context.parserServices
+  return context.parserServices || {};
+}
+
+module.exports = { getParserServices };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-light",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Simple Eslint Plugin",
   "keywords": [
     "eslint",
@@ -25,6 +25,8 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "@tdesign/uniapp": "^0.7.3",
+    "@tdesign/uniapp-chat": "^0.2.1",
     "minimatch": "^10.0.1",
     "requireindex": "^1.2.0",
     "t-comm": "^3.0.22"
@@ -48,6 +50,10 @@
   "engines": {
     "node": "12.x || 14.x || >= 16"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "scripts": {
     "build": "rm -rf lib && node script/build",
     "bump": "node ../../script/monorepo/version-simple $PWD",