diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5d6c8b19..ce95c73b 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -54,6 +54,7 @@ export default defineConfig({ { text: 'Self Closing Components', link: '/rules/vue-strong/self-closing-components' }, { text: 'Simple Computed Properties', link: '/rules/vue-strong/simple-computed' }, { text: 'Template Simple Expressions', link: '/rules/vue-strong/template-simple-expression' }, + { text: 'Multi Attribute Elements', link: '/rules/vue-strong/multi-attribute-elements' }, ] }, { text: 'Vue Recommended', link: '/rules/vue-recommended', collapsed: true, items: [ { text: 'Element Attribute Order', link: '/rules/vue-recommended/element-attribute-order' }, diff --git a/docs/rules/vue-strong/index.md b/docs/rules/vue-strong/index.md index 97f30b49..56dced61 100644 --- a/docs/rules/vue-strong/index.md +++ b/docs/rules/vue-strong/index.md @@ -11,3 +11,4 @@ These rules have been found to improve readability and/or developer experience i - [Self Closing Components](./self-closing-components.md) - [Simple Computed Properties](./simple-computed.md) - [Template Simple Expressions](./template-simple-expression.md) +- [Multi Attribute Elements](./multi-attribute-elements.md) diff --git a/docs/rules/vue-strong/multi-attribute-elements.md b/docs/rules/vue-strong/multi-attribute-elements.md new file mode 100644 index 00000000..f8f2cfb6 --- /dev/null +++ b/docs/rules/vue-strong/multi-attribute-elements.md @@ -0,0 +1,11 @@ +# Multi-Attribute Elements + +Checks that elements with multiple attributes span multiple lines, with one attribute per line. +👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#multi-attribute-elements + +## ❓ Why it's good to follow this rule? + +- **Readability**: Spreading attributes across multiple lines makes it easier to read and understand the code. +- **Maintainability**: When attributes are on separate lines, it's simpler to add, remove, or modify them without affecting other attributes. +- **Consistency**: Following this convention helps maintain a consistent style across components, making it easier for teams to collaborate. +- **Debugging**: Having one attribute per line makes it easier to identify issues related to specific attributes, especially when debugging. diff --git a/src/rules/rrd/plainScript.test.ts b/src/rules/rrd/plainScript.test.ts new file mode 100644 index 00000000..faa7dc03 --- /dev/null +++ b/src/rules/rrd/plainScript.test.ts @@ -0,0 +1,51 @@ +import { beforeEach, describe, expect, it } from 'vitest' +import type { SFCScriptBlock } from '@vue/compiler-sfc' +import { BG_RESET, BG_WARN, TEXT_INFO, TEXT_RESET, TEXT_WARN } from '../asceeCodes' +import { checkPlainScript, reportPlainScript, resetPlainScript } from './plainScript' + +describe('plainScript', () => { + beforeEach(() => { + resetPlainScript() + }) + + it('should not report files with + `, + setup: true, + } as SFCScriptBlock + const filename = 'with-script-setup.vue' + checkPlainScript(script, filename) + expect(reportPlainScript().length).toBe(0) + expect(reportPlainScript()).toStrictEqual([]) + }) + + it('should report files with a plain + `, + setup: false, + } as SFCScriptBlock + const filename = 'plain-script.vue' + checkPlainScript(script, filename) + expect(reportPlainScript().length).toBe(1) + expect(reportPlainScript()).toStrictEqual([{ + file: filename, + rule: `${TEXT_INFO}rrd ~ Plain