{"_id":"eslint-vue-setup-rules","_rev":"15-24c87bd3504051b332e8ef759f538c4e","name":"eslint-vue-setup-rules","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.4":{"name":"eslint-vue-setup-rules","version":"1.0.4","keywords":[],"author":"","license":"ISC","_id":"eslint-vue-setup-rules@1.0.4","maintainers":[{"name":"geum_jung_min","email":"today.as.fresh@gmail.com"}],"dist":{"shasum":"73f4e19ec7817801d8f6892ec931f7fb70c92b97","tarball":"https://registry.npmjs.org/eslint-vue-setup-rules/-/eslint-vue-setup-rules-1.0.4.tgz","fileCount":9,"integrity":"sha512-DWNHVjgcLAy+4ZAwn14561YmM9najSeQTVuf8gJZW4Rj4cpec+CrUH7IclzLJhZlAV3m6hMc5/uhCGUIqPlCrw==","signatures":[{"sig":"MEQCIG8A/Laqt6bTxpVvrrU9YiJQl2efplFb8swhRKCJx835AiB1Os0S+hNIPDUToC5s3nZIs1u35LHkHk3pWutCS1unJQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25930},"main":"lib/index.js","type":"module","exports":{".":"./lib/index.js"},"gitHead":"5bcee16a38766a2cda3cd29ce80b343c54a64c70","scripts":{"test":"mocha"},"_npmUser":{"name":"geum_jung_min","email":"today.as.fresh@gmail.com"},"_npmVersion":"10.1.0","description":"- This package contains custom rules to enforce the order of declarations within `\n```\n\n#### Inline comment (at the end of the line):\n```vue\n\n```\n\n#### Pinned in the middle:\n```vue\n\n```\n\nIn all these examples, `count` (a `reactiveVars` declaration) stays in its original position while the other declarations are sorted into the remaining free slots around it.\n\n> **Note:** The `// eslint-vue-setup-order:keep` comment must be **directly adjacent** to the declaration it pins (either on the line immediately before or at the end of the same line). A blank line between the comment and the declaration breaks the adjacency and prevents pinning. The comment itself is preserved as-is when the rule applies its auto-fix.\n\n## π composableAliases Option\nBy default, the rule treats function calls whose names start with `use` as composables.
\nHowever, some utilities such as `storeToRefs` or `mapState` are composable in nature even though they do not follow the `use*` naming convention.
\nYou can classify those functions as composables by using the `composableAliases` option in `eslint.config.js`.\n\n### π How It Works\nIf a function name is included in `composableAliases`, declarations initialized from that call will be sorted in the `composables` section.\n\nExample:\n```js\nconst store = storeToRefs();\nconst state = mapState();\n```\n\nWith the following configuration, both declarations above are treated as `composables`.\n\n### π Configuration Example\n```js\n// eslint.config.js\nexport default [\n {\n files: [\"**/*.vue\"],\n languageOptions: {\n parser: vueEslintParser,\n parserOptions: {\n parser: typescriptEslintParser,\n ecmaVersion: 2022,\n sourceType: \"module\",\n },\n },\n plugins: {\n \"vue3-script-setup\": {\n rules: {\n \"declaration-order\": eslintVueSetupOrderRule,\n },\n },\n },\n rules: {\n \"vue3-script-setup/declaration-order\": [\n \"error\",\n {\n composableAliases: [\"storeToRefs\", \"mapState\"], // this!!\n },\n ],\n },\n },\n];\n```\n\n### π Result\nIn this case:\n- `storeToRefs` will be treated as a composable.\n- `mapState` will be treated as a composable.\n- They will be sorted in the `composables` section even though their names do not start with `use`.\n\n
\n\n## π sectionConfigurations Option\nYou can define custom section matching rules with the `sectionConfigurations` option.\nEach configuration is tested in the order it appears, before the built-in section detection runs.\n\n### π How It Works\nEach configuration requires:\n- `sectionName`: the section assigned when the regex matches.\n- `regex`: a string pattern tested against the full declaration text.\n- `flags`: optional regular expression flags.\n\nThe order of `sectionConfigurations` controls only matching precedence.\nIt does **not** override `sectionOrder`.\nIf you want a custom section to appear in a specific position, add that section name to `sectionOrder`.\nIf the section is not present in `sectionOrder`, it is placed after configured sections.\n\n### π Configuration Example\n```js\n// eslint.config.js\nexport default [\n {\n files: [\"**/*.vue\"],\n rules: {\n \"vue3-script-setup/declaration-order\": [\n \"error\",\n {\n sectionConfigurations: [\n {\n sectionName: \"eventHandlers\",\n regex: \"^function on\",\n },\n {\n sectionName: \"functions\",\n regex: \"^function \",\n },\n ],\n sectionOrder: [\"functions\", \"eventHandlers\"],\n },\n ],\n },\n },\n];\n```\n\n### π Result\nIn this case:\n- `function onClick() {}` is treated as `eventHandlers`.\n- Other function declarations are treated as `functions`.\n- `functions` still appear before `eventHandlers` because `sectionOrder` controls output order.\n\n
\n\n## π spaceBetweenItems Option\nBy default, declarations within the same section are placed consecutively with no blank line between them.
\nYou can configure the `spaceBetweenItems` option to control blank lines between declarations inside the same section.\n\n### π How It Works\n`spaceBetweenItems` supports both the original boolean values and string values:\n\n| Value | Behavior |\n| --- | --- |\n| `false` or `\"never\"` | Places declarations within the same section consecutively with no blank line. This is the default. |\n| `true` or `\"always\"` | Inserts a blank line between every declaration within the same section. |\n| `\"preserve\"` | Preserves existing blank lines between adjacent declarations within the same section when possible. |\n\nBlank lines between different sections are always present regardless of this option.\n\n### π Configuration Example\n```js\n// eslint.config.js\nexport default [\n {\n files: [\"**/*.vue\"],\n languageOptions: {\n parser: vueEslintParser,\n parserOptions: {\n parser: typescriptEslintParser,\n ecmaVersion: 2022,\n sourceType: \"module\",\n },\n },\n plugins: {\n \"vue3-script-setup\": {\n rules: {\n \"declaration-order\": eslintVueSetupOrderRule,\n },\n },\n },\n rules: {\n \"vue3-script-setup/declaration-order\": [\n \"error\",\n {\n spaceBetweenItems: \"preserve\", // or true / \"always\"\n },\n ],\n },\n },\n];\n```\n\n### π Result\n\nWithout `spaceBetweenItems` (default):\n```js\nconst count = ref(0);\nconst msg = ref(\"\");\n```\n\nWith `spaceBetweenItems: true`:\n```js\nconst count = ref(0);\n\nconst msg = ref(\"\");\n```\n\nWith `spaceBetweenItems: \"preserve\"`:\n```js\nconst count = ref(0);\n\n\nconst msg = ref(\"\");\n```\n\n
\n\n## π How to Apply\n### π Method 1: Install via npm\n```\npnpm install eslint-vue-setup-rules\n\nOR\n\nyarn add eslint-vue-setup-rules\n\nOR \n\npnpm install https://github.com/KumJungMin/eslint-vue-setup-order\n```\n\n
\n\nThen, add the ESLint plugin to your `eslint.config.js` (for ESLint v9 using the flat config pattern):\n```js\n// eslint.config.js\nimport vueSetupRules from \"eslint-vue-setup-rules\";\n\nexport default [\n {\n // Add the plugin object here:\n plugins: { \"vue3-script-setup\": vueSetupRules },\n rules: { \"vue3-script-setup/declaration-order\": \"error\" },\n },\n {\n files: [\"**/*.vue\"],\n languageOptions: {\n parser: vueEslintParser,\n parserOptions: {\n parser: typescriptEslintParser,\n ecmaVersion: 2022,\n sourceType: \"module\",\n },\n },\n },\n // ... other settings\n];\n```\n\n
\n\n### π Method 2: Include the Rules File in Your Project\nAlternatively, you can add the rule file directly to your project:\n\n1. Add the file `rules/declaration-order.js` to your project directory:\n```js\nyour-project/\nβββ src/\nβ βββ eslint-rules/\nβ βββ declaration-order.js\nβββ eslint.config.js\nβββ ...\n```\n\n2. Then, update your `eslint.config.js` to include the custom rule:\n```js\nimport eslintVueSetupOrderRule from \"./src/eslint-rules/declaration-order.js\";\n \nexport default [\n {\n files: [\"**/*.vue\"],\n languageOptions: {\n parser: vueEslintParser,\n parserOptions: {\n parser: typescriptEslintParser,\n ecmaVersion: 2022,\n sourceType: \"module\",\n },\n },\n plugins: {\n \"vue3-script-setup\": {\n rules: {\n \"declaration-order\": eslintVueSetupOrderRule, // this!\n },\n },\n },\n rules: {\n \"vue3-script-setup/declaration-order\": \"error\",\n },\n },\n // ... other settings\n];\n```\n\n
\n\n## π Testing\nWhen you run the command:\n```\nnpx eslint .\n```\n\n
\n\nIf the declaration order is incorrect, the rule will automatically fix it. For example:
\n**Before:**\n```js\n\n\n\n\n```\n\n
\n\n**After (fixed):**\n```js\n\n```\n","readmeFilename":"README.md"}