Add shorthand-attribute rule

Author: ota-meshi

README.md

@@ -254,7 +254,7 @@ These rules relate to security vulnerabilities in Svelte code:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/no-at-html-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-html-tags.html) | disallow use of `{@html}` to prevent XSS attack | :star: |
-| [@ota-meshi/svelte/no-target-blank](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-target-blank.html) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
+| [@ota-meshi/svelte/no-target-blank](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-target-blank.html) | disallow `target="_blank"` attribute without `rel="noopener noreferrer"` |  |
 
 ## Best Practices
 
@@ -276,6 +276,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [@ota-meshi/svelte/indent](https://ota-meshi.github.io/eslint-plugin-svelte/rules/indent.html) | enforce consistent indentation | :wrench: |
 | [@ota-meshi/svelte/max-attributes-per-line](https://ota-meshi.github.io/eslint-plugin-svelte/rules/max-attributes-per-line.html) | enforce the maximum number of attributes per line | :wrench: |
 | [@ota-meshi/svelte/prefer-class-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-class-directive.html) | require class directives instead of ternary expressions | :wrench: |
+| [@ota-meshi/svelte/shorthand-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/shorthand-attribute.html) | enforce use of shorthand syntax in attribute | :wrench: |
 | [@ota-meshi/svelte/spaced-html-comment](https://ota-meshi.github.io/eslint-plugin-svelte/rules/spaced-html-comment.html) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |
 
 ## System

docs/rules/README.md

@@ -24,7 +24,7 @@ These rules relate to security vulnerabilities in Svelte code:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/no-at-html-tags](./no-at-html-tags.md) | disallow use of `{@html}` to prevent XSS attack | :star: |
-| [@ota-meshi/svelte/no-target-blank](./no-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
+| [@ota-meshi/svelte/no-target-blank](./no-target-blank.md) | disallow `target="_blank"` attribute without `rel="noopener noreferrer"` |  |
 
 ## Best Practices
 
@@ -46,6 +46,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [@ota-meshi/svelte/indent](./indent.md) | enforce consistent indentation | :wrench: |
 | [@ota-meshi/svelte/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
 | [@ota-meshi/svelte/prefer-class-directive](./prefer-class-directive.md) | require class directives instead of ternary expressions | :wrench: |
+| [@ota-meshi/svelte/shorthand-attribute](./shorthand-attribute.md) | enforce use of shorthand syntax in attribute | :wrench: |
 | [@ota-meshi/svelte/spaced-html-comment](./spaced-html-comment.md) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |
 
 ## System

docs/rules/button-has-type.md

@@ -18,7 +18,7 @@ This rule aims to warn if no type or an invalid type is used on a button type at
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/button-has-type: "error" */
 </script>

docs/rules/comment-directive.md

@@ -34,7 +34,7 @@ This rule sends all `eslint-disable`-like comments to the post-process of the `.
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/comment-directive: "error", no-undef: "error" */
 </script>
@@ -51,7 +51,7 @@ The `eslint-disable`-like comments can include descriptions to explain why the c
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/comment-directive: "error", no-undef: "error" */
 </script>

docs/rules/html-quotes.md

@@ -24,9 +24,10 @@ This rule enforces the quotes style of HTML attributes.
 
 <eslint-code-block fix>
 
+<!-- prettier-ignore-start -->
 <!--eslint-skip-->
-<!-- prettier-ignore -->
-```html
+
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/html-quotes: "error" */
 </script>
@@ -40,6 +41,8 @@ This rule enforces the quotes style of HTML attributes.
 <img src="{src}" alt='{name} dances.' />
 ```
 
+<!-- prettier-ignore-end -->
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -59,7 +62,7 @@ This rule enforces the quotes style of HTML attributes.
 }
 ```
 
-- `prefer` ... If `"double"`, requires double quotes. If `"single"` requires single quotes.
+- `prefer` ... If `"double"`, requires double quotes. If `"single"`, requires single quotes.
 - `dynamic` ... Settings for dynamic attribute values and directive values using curly braces.
   - `quoted` ... If `true`, enforce the use of quotes. If `false`, do not allow the use of quotes. The default is `false`.
   - `avoidInvalidUnquotedInHTML` ... If `true`, enforces the use of quotes if they are invalid as HTML attribute when not using quotes. The default is `false`.

docs/rules/indent.md

@@ -21,10 +21,10 @@ This rule enforces a consistent indentation style in `.svelte`. The default styl
 
 <eslint-code-block fix>
 
+<!-- prettier-ignore-start -->
 <!--eslint-skip-->
-<!-- prettier-ignore -->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/indent: "error" */
   function click() {}
@@ -33,7 +33,7 @@ This rule enforces a consistent indentation style in `.svelte`. The default styl
 <!-- ✓ GOOD -->
 <button
   type="button"
-  on:click="{click}"
+  on:click={click}
   class="my-button primally"
 >
   CLICK ME!
@@ -42,13 +42,15 @@ This rule enforces a consistent indentation style in `.svelte`. The default styl
 <!-- ✗ BAD -->
 <button
 type="button"
-    on:click="{click}"
+    on:click={click}
      class="my-button primally"
   >
 CLICK ME!
 </button>
 ```
 
+<!-- prettier-ignore-end -->
+
 </eslint-code-block>
 
 ::: warning Note

docs/rules/max-attributes-per-line.md

@@ -26,23 +26,23 @@ There is a configurable number of attributes that are acceptable in one-line cas
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/max-attributes-per-line: "error" */
 </script>
 
 <!-- ✓ GOOD -->
 <input
   type="text"
-  bind:value="{text}"
+  bind:value={text}
   {maxlength}
   {...attrs}
   readonly
   size="20"
 />
 <button
   type="button"
-  on:click="{click}"
+  on:click={click}
   {maxlength}
   {...attrs}
   disabled
@@ -52,8 +52,8 @@ There is a configurable number of attributes that are acceptable in one-line cas
 </button>
 
 <!-- ✗ BAD -->
-<input type="text" bind:value="{text}" {maxlength} {...attrs} readonly />
-<button type="button" on:click="{click}" {maxlength} {...attrs}>
+<input type="text" bind:value={text} {maxlength} {...attrs} readonly />
+<button type="button" on:click={click} {maxlength} {...attrs}>
   CLICK ME!
 </button>
 ```

docs/rules/no-inner-declarations.md

@@ -25,7 +25,7 @@ This rule supports [svelte-eslint-parser]'s AST.
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/no-inner-declarations: "error" */
 

docs/rules/no-target-blank.md

@@ -2,13 +2,13 @@
 pageClass: "rule-details"
 sidebarDepth: 0
 title: "@ota-meshi/svelte/no-target-blank"
-description: "disallow target=\"_blank\" attribute without rel=\"noopener noreferrer\""
+description: "disallow `target=\"_blank\"` attribute without `rel=\"noopener noreferrer\"`"
 since: "v0.0.4"
 ---
 
 # @ota-meshi/svelte/no-target-blank
 
-> disallow target="_blank" attribute without rel="noopener noreferrer"
+> disallow `target="_blank"` attribute without `rel="noopener noreferrer"`
 
 ## :book: Rule Details
 
@@ -60,7 +60,7 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
   /* eslint @ota-meshi/svelte/no-target-blank: ['error', { allowReferrer: false }] */
 </script>
 
-<!-- ✓ Good -->
+<!-- ✓ GOOD -->
 <a href="http://example.com" target="_blank" rel="noopener noreferrer">link</a>
 
 <!-- ✗ BAD -->
@@ -80,7 +80,7 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
   /* eslint @ota-meshi/svelte/no-target-blank: ['error', { allowReferrer: true }] */
 </script>
 
-<!-- ✓ Good -->
+<!-- ✓ GOOD -->
 <a href="http://example.com" target="_blank" rel="noopener">link</a>
 
 <!-- ✗ BAD -->
@@ -100,7 +100,7 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
   /* eslint @ota-meshi/svelte/no-target-blank: ['error', { enforceDynamicLinks: 'always' }] */
 </script>
 
-<!-- ✓ Good -->
+<!-- ✓ GOOD -->
 <a href={link} target="_blank" rel="noopener noreferrer">link</a>
 
 <!-- ✗ BAD -->
@@ -120,7 +120,7 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
   /* eslint @ota-meshi/svelte/no-target-blank: ['error', { enforceDynamicLinks: 'never' }] */
 </script>
 
-<!-- ✓ Good -->
+<!-- ✓ GOOD -->
 <a href={link} target="_blank">link</a>
 
 <!-- ✗ BAD -->

docs/rules/shorthand-attribute.md

@@ -0,0 +1,60 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/shorthand-attribute"
+description: "enforce use of shorthand syntax in attribute"
+---
+
+# @ota-meshi/svelte/shorthand-attribute
+
+> enforce use of shorthand syntax in attribute
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces the use of the shorthand syntax in attribute.
+
+<eslint-code-block fix>
+
+<!-- prettier-ignore-start -->
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/shorthand-attribute: "error" */
+</script>
+
+<!-- ✓ GOOD -->
+<button {disabled}>...</button>
+
+<!-- ✗ BAD -->
+<button disabled={disabled}>...</button>
+```
+
+<!-- prettier-ignore-end -->
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "@ota-meshi/svelte/shorthand-attribute": [
+    "error",
+    {
+      "prefer": "always" // "never"
+    }
+  ]
+}
+```
+
+- `prefer`
+  - `"always"` ... Expects that the shorthand will be used whenever possible. This is default.
+  - `"never"` ... Ensures that no shorthand is used in any attribute.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/shorthand-attribute.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/shorthand-attribute.ts)

docs/rules/spaced-html-comment.md

@@ -20,7 +20,7 @@ This rule will enforce consistency of spacing after the start of a comment `<!--
 
 <!--eslint-skip-->
 
-```html
+```svelte
 <script>
   /* eslint @ota-meshi/svelte/spaced-html-comment: "error" */
 </script>

src/rules/no-target-blank.ts

@@ -63,7 +63,8 @@ function hasDynamicLink(node: AST.SvelteAttribute["parent"]) {
 export default createRule("no-target-blank", {
   meta: {
     docs: {
-      description: `disallow target="_blank" attribute without rel="noopener noreferrer"`,
+      description:
+        'disallow `target="_blank"` attribute without `rel="noopener noreferrer"`',
       category: "Security Vulnerability",
       recommended: false,
     },

src/rules/shorthand-attribute.ts

@@ -0,0 +1,67 @@
+import { createRule } from "../utils"
+
+export default createRule("shorthand-attribute", {
+  meta: {
+    docs: {
+      description: "enforce use of shorthand syntax in attribute",
+      category: "Stylistic Issues",
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          prefer: { enum: ["always", "never"] },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      expectedShorthand: "Expected shorthand attribute.",
+      expectedRegular: "Expected regular attribute syntax.",
+    },
+    type: "layout", // "problem", or "layout",
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode()
+    const always: boolean = context.options[0]?.prefer !== "never"
+
+    return always
+      ? {
+          SvelteAttribute(node) {
+            if (node.value.length !== 1) {
+              return
+            }
+            const value = node.value[0]
+            if (
+              value.type !== "SvelteMustacheTag" ||
+              value.expression.type !== "Identifier"
+            ) {
+              return
+            }
+            if (node.key.name === value.expression.name) {
+              context.report({
+                node,
+                messageId: "expectedShorthand",
+                *fix(fixer) {
+                  yield fixer.remove(node.key)
+                  yield fixer.remove(sourceCode.getTokenAfter(node.key)!)
+                },
+              })
+            }
+          },
+        }
+      : {
+          SvelteShorthandAttribute(node) {
+            context.report({
+              node,
+              messageId: "expectedRegular",
+              fix(fixer) {
+                return fixer.insertTextBefore(node, `${node.key.name}=`)
+              },
+            })
+          },
+        }
+  },
+})

src/utils/rules.ts

@@ -11,6 +11,7 @@ import noInnerDeclarations from "../rules/no-inner-declarations"
 import noTargetBlank from "../rules/no-target-blank"
 import noUselessMustaches from "../rules/no-useless-mustaches"
 import preferClassDirective from "../rules/prefer-class-directive"
+import shorthandAttribute from "../rules/shorthand-attribute"
 import spacedHtmlComment from "../rules/spaced-html-comment"
 import system from "../rules/system"
 
@@ -27,6 +28,7 @@ export const rules = [
   noTargetBlank,
   noUselessMustaches,
   preferClassDirective,
+  shorthandAttribute,
   spacedHtmlComment,
   system,
 ] as RuleModule[]

tests/fixtures/rules/shorthand-attribute/invalid/always/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "prefer": "always" }]
+}