Enhance Vue support in ESLint rules and documentation, including new template examples and compliance notes

Author: neptia

CHANGELOG.md

@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [#107](https://github.com/green-code-initiative/creedengo-javascript/pull/107) Move to creedengo-rules-specifications v3
+- [#115](https://github.com/green-code-initiative/creedengo-javascript/pull/115) Add Vue SFC template support to JSX‑based rules (avoid-autoplay, no-empty-image-src-attribute, prefer-lighter-formats-for-image-files, avoid-css-animations, prefer-shorthand-css-notations)
+- [#115](https://github.com/green-code-initiative/creedengo-javascript/pull/115) Add Vue RuleTester cases and test-project Vue examples for the updated rules
 
 ### Fixed
 

eslint-plugin/docs/rules/avoid-autoplay.md

@@ -28,15 +28,14 @@ return (
 );
 ```
 
-This rule supports [React](https://react.dev/) (JSX) and Vue SFC templates when using `vue-eslint-parser`.
+This rule is build for [React](https://react.dev/) and JSX.
 
+```jsx
 <template>
   <video autoplay></video> <!-- Non-compliant -->
   <video preload="none"></video> <!-- Compliant -->
 </template>
-
-Vue support requires `vue-eslint-parser` so the rule can access the template AST.
-Dynamic bindings like `:preload="x"` are not validated by this rule.
+```
 
 ## Resources
 

eslint-plugin/docs/rules/avoid-css-animations.md

@@ -24,10 +24,12 @@ Limiting the usage of CSS animations helps in creating a more energy-efficient a
 <div style={{ border: "1px solid black" }} /> // Compliant
 ```
 
+```jsx
 <template>
   <div style="border: 1px solid black; transition: border 2s ease;"></div> <!-- Non-compliant -->
   <div style="border: 1px solid black;"></div> <!-- Compliant -->
 </template>
+```
 
 Vue support only checks static style attributes; :style bindings are not validated.
 

eslint-plugin/docs/rules/no-empty-image-src-attribute.md

@@ -40,16 +40,15 @@ return (
 );
 ```
 
-This rule supports React (JSX) and Vue SFC templates when using vue-eslint-parser.
+This rule is build for [React](https://react.dev/) and JSX.
 
+```jsx
 <template>
   <img src="" /> <!-- Non-compliant -->
   <img /> <!-- Non-compliant -->
   <img src="./logo.svg" /> <!-- Compliant -->
 </template>
-
-Vue support requires vue-eslint-parser; dynamic bindings like :src are not validated by this rule.
-
+```
 
 ## Resources
 

eslint-plugin/docs/rules/prefer-lighter-formats-for-image-files.md

@@ -72,12 +72,12 @@ is supported, the image.webp image will be downloaded; otherwise, image.jpg imag
 </picture>
 ```
 
+```jsx
 <template>
   <img src="./assets/cat.jpg" alt="Unoptimized image of a cat" /> <!-- Non-compliant -->
   <img src="./assets/cat.webp" alt="Optimized image of a cat" /> <!-- Compliant -->
 </template>
-
-Vue support requires vue-eslint-parser; dynamic bindings like :src are not validated by this rule.
+```
 
 Also remember to consider browser compatibility.
 Older browsers may not recognize .webp/.avif images and fail to display them.

eslint-plugin/docs/rules/prefer-shorthand-css-notations.md

@@ -64,10 +64,12 @@ For example, if you only want to set the left margin, you must continue to use `
 </div>
 ```
 
+```jsx
 <template>
   <div style="margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;"></div> <!-- Non-compliant -->
   <div style="margin: 1em 0 2em 0.5em;"></div> <!-- Compliant -->
 </template>
+```
 
 Vue support only checks static style attributes; :style bindings are not validated.
 

eslint-plugin/lib/rules/avoid-css-animations.js

@@ -68,6 +68,7 @@ module.exports = {
         );
 
         if (styleAttribute?.value.expression?.properties) {
+          // To prevent (for example) <div style={{ animate: 'width 2s' }}>
           const property = styleAttribute.value.expression.properties.find(
             (prop) =>
               prop.key != null &&

eslint-plugin/lib/rules/no-empty-image-src-attribute.js

@@ -69,11 +69,13 @@ module.exports = {
             (attr) => attr.name.name === "src",
           );
           if (srcValue?.value?.value === "") {
+            //to prevent <img src='' alt='Empty image'/>
             context.report({
               node: srcValue,
               messageId: "SpecifySrcAttribute",
             });
           } else if (!srcValue) {
+            //to prevent <img />
             context.report({
               node,
               messageId: "SpecifySrcAttribute",

test-project/package.json

@@ -9,8 +9,8 @@
   "license": "GPL-3.0",
   "author": "Green Code Initiative",
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.vue src",
-    "lint:report": "eslint --ext .js,.ts,.vue src -f json -o eslint-report.json",
+    "lint": "eslint src/.",
+    "lint:report": "eslint src/. -f json -o eslint-report.json",
     "sonar": "sonar"
   },
   "devDependencies": {

test-project/src/vue/avoid-autoplay.vue

@@ -1,4 +1,5 @@
 <template>
-  <video autoplay></video>
-  <video preload="auto"></video>
+  <video autoplay></video> <!-- NonCompliant Avoid autoplay and set preload='none' for video and audio elements. -->
+  <video preload="auto"></video> <!-- NonCompliant Avoid autoplay and set preload='none' for video and audio elements. -->
+  <video preload="none"></video> <!-- Compliant -->
 </template>