feat(eslint): add plugins for sorting keys and imports

# feat(eslint): add plugins for sorting keys and imports

| ⏱️ Estimate | 📊 Priority | 📏 Size | 📅 Start | 📅 End |
| --- | --- | --- | --- | --- |
| 1h | P2 | S | 24-01-2026 | 24-01-2026 |

## 📸 Screenshots

| Current | Expected |
| :---: | :---: |
| N/A — This change has no visual impact. | N/A — This change has no visual impact. |

## 📝 Summary

- Add ESLint plugins to automatically sort imports/exports in JS/Vue files and keys in JS objects
- Replace legacy `eslint-plugin-json` with modern `eslint-plugin-jsonc`
- Add `sort-package-json` to sort `package.json` with standard conventional order
- All plugins support auto-fix for seamless integration with `npm run lint`

## 💡 Why this change?

- Currently `sort-imports` and `sort-keys` rules are disabled (`0`) in `.eslintrc.js`
- Native ESLint rules don't have auto-fix capability
- Using plugins with auto-fix ensures consistent code formatting automatically
- `eslint-plugin-json` is legacy and doesn't support sorting or auto-fix
- `sort-package-json` uses the standard conventional order without manual configuration

## ✅ Benefits

- Automatic sorting of imports/exports in JS/Vue files
- Automatic sorting of keys in JSON files
- Automatic sorting of keys in JS objects (configs, etc.)
- Automatic sorting of `package.json` with conventional order (name, version, scripts, dependencies...)
- Consistent code style across the project
- Integration with pre-commit hooks via `lint-staged`

## 📋 Steps

### Phase 1: Install packages

- [ ] Install new packages as `devDependencies`:
  - [`eslint-plugin-jsonc`](https://www.npmjs.com/package/eslint-plugin-jsonc)
  - [`jsonc-eslint-parser`](https://www.npmjs.com/package/jsonc-eslint-parser)
  - [`eslint-plugin-simple-import-sort`](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
  - [`eslint-plugin-sort-keys-fix`](https://www.npmjs.com/package/eslint-plugin-sort-keys-fix)
  - [`sort-package-json`](https://www.npmjs.com/package/sort-package-json)

```bash
npm install -D eslint-plugin-jsonc jsonc-eslint-parser eslint-plugin-simple-import-sort eslint-plugin-sort-keys-fix sort-package-json
```

### Phase 2: Remove legacy package

- [ ] Uninstall legacy package:
  - [`eslint-plugin-json`](https://www.npmjs.com/package/eslint-plugin-json)

```bash
npm uninstall eslint-plugin-json
```

### Phase 3: Update ESLint configuration

#### 3.1 Update `extends` array

- [ ] Remove `plugin:json/recommended` and add `plugin:jsonc/recommended-with-json`:

```diff
 "extends": [
   "prettier",
   "eslint:recommended",
   "plugin:vue/recommended",
-  "plugin:json/recommended",
+  "plugin:jsonc/recommended-with-json",
 ],
```

#### 3.2 Update `plugins` array

- [ ] Remove `json` and add new plugins:

```diff
 "plugins": [
   "vue",
   "prettier",
-  "json",
+  "jsonc",
+  "simple-import-sort",
+  "sort-keys-fix",
 ],
```

#### 3.3 Update `overrides` for JSON and JSONC files

- [ ] Replace existing overrides with complete configuration for all file types:

```diff
 "overrides": [
   // Existing Vue override
   {
     "files": ["*.vue"],
     "rules": {
       "indent": "off",
     },
   },
+  // JSON files - alphabetical order (excludes package.json and JSONC files)
+  {
+    "files": ["*.json", ".prettierrc"],
+    "excludedFiles": ["package.json", "package-lock.json", "jsconfig.json", "tsconfig*.json", ".vscode/*.json"],
+    "parser": "jsonc-eslint-parser",
+    "rules": {
+      "jsonc/comma-dangle": "off",
+      "jsonc/indent": [2, "tab"],
+      "jsonc/key-spacing": 2,
+      "jsonc/sort-keys": [
+        2,
+        {
+          "order": { "type": "asc" },
+          "pathPattern": ".*"
+        }
+      ]
+    }
+  },
+  // JSONC files - allows comments (jsconfig, tsconfig, .vscode)
+  {
+    "files": ["jsconfig.json", "tsconfig*.json", ".vscode/*.json"],
+    "parser": "jsonc-eslint-parser",
+    "extends": ["plugin:jsonc/recommended-with-jsonc"],
+    "rules": {
+      "jsonc/comma-dangle": "off",
+      "jsonc/indent": [2, "tab"],
+      "jsonc/key-spacing": 2,
+      "jsonc/sort-keys": [
+        2,
+        {
+          "order": { "type": "asc" },
+          "pathPattern": ".*"
+        }
+      ]
+    }
+  },
+  // package.json - no sorting (handled by sort-package-json)
+  {
+    "files": ["package.json"],
+    "parser": "jsonc-eslint-parser",
+    "rules": {
+      "jsonc/comma-dangle": "off",
+      "jsonc/indent": [2, "tab"],
+      "jsonc/key-spacing": 2,
+      "jsonc/sort-keys": "off"
+    }
+  },
 ],
```

#### 3.4 Add sorting rules for JS/Vue files

- [ ] Add the new sorting rules to the `rules` section:

```diff
 "rules": {
   // ... existing rules ...

   // Keep native rules disabled (no auto-fix)
   "sort-imports": 0,
   "sort-keys": 0,

+  // Import/export sorting (with auto-fix)
+  "simple-import-sort/imports": 2,
+  "simple-import-sort/exports": 2,
+
+  // Object keys sorting (with auto-fix)
+  "sort-keys-fix/sort-keys-fix": 2,

   // ... rest of existing rules ...
 },
```

### Phase 4: Update package.json scripts

- [ ] Add `sort-pkg` script and update `lint` script:

```diff
 "scripts": {
   "install:clean": "rm -rf node_modules package-lock.json",
   "postinstall": "npm run lint",
   "prepare": "husky",
   "env:create": "grep -v '^# ' .env.local.sample > .env.local",
   "serve": "vue-cli-service serve",
   "build": "dotenv -e .env.local -- vue-cli-service build",
   "prettier:fix": "prettier --write \"./**/*.{css,scss,sass,json,js,cjs,mjs,vue}\" .prettierrc",
   "eslint:fix": "vue-cli-service lint \"**/*.{json,js,cjs,mjs,vue}\" --fix --ignore-path .eslintignore",
   "stylelint:fix": "stylelint \"**/*.{css,scss,sass,vue}\" --fix --ignore-path .stylelintignore",
-  "lint": "npm run prettier:fix && npm run stylelint:fix && npm run eslint:fix",
+  "sort-pkg": "sort-package-json",
+  "lint": "npm run prettier:fix && npm run stylelint:fix && npm run eslint:fix && npm run sort-pkg",
   "deploy": "node gh-pages-deploy.mjs"
 },
```

### Phase 5: Run linter

- [ ] Auto-fix all files:

```bash
npm run lint
```

## 🧪 Tests

- [ ] Linting runs without errors:

```bash
npm run lint
```

- [ ] Imports are sorted alphabetically in JS/Vue files
- [ ] Exports are sorted alphabetically in JS/Vue files
- [ ] Keys are sorted in JS objects
- [ ] Keys are sorted alphabetically in JSON files
- [ ] Keys are sorted alphabetically in `.prettierrc`
- [ ] Keys are sorted alphabetically in `jsconfig.json` (JSONC with comments support)
- [ ] `package.json` is sorted with conventional order by `sort-package-json`
- [ ] Pre-commit hook works correctly

## 📌 Notes

### Sorting rules summary

| Rule | Applies to | Behavior |
| --- | --- | --- |
| `simple-import-sort/imports` | JS/Vue files | Sort imports alphabetically |
| `simple-import-sort/exports` | JS/Vue files | Sort exports alphabetically |
| `sort-keys-fix/sort-keys-fix` | JS/Vue files | Sort object keys alphabetically |
| `jsonc/sort-keys` | JSON files | Sort keys alphabetically |
| `sort-package-json` | package.json | Sort with conventional order |

### JSONC rules applied to all JSON files

| Rule | Value | Description |
| --- | --- | --- |
| `jsonc/comma-dangle` | `"off"` | Disable trailing commas in JSON |
| `jsonc/indent` | `[2, "tab"]` | Use tabs for indentation |
| `jsonc/key-spacing` | `2` | Enforce correct spacing around colons |
| `jsonc/sort-keys` | `[2, ...]` | Sort keys alphabetically |

### JSON vs JSONC files

| File type | Config used | Comments allowed | Sorting |
| --- | --- | :---: | :---: |
| `*.json`, `.prettierrc` | `recommended-with-json` | ❌ | Alphabetical |
| `jsconfig.json`, `tsconfig*.json`, `.vscode/*.json` | `recommended-with-jsonc` | ✓ | Alphabetical |
| `package.json` | Custom | ❌ | Conventional (sort-package-json) |
| `package-lock.json` | Excluded | - | None |

### How `eslint-plugin-jsonc` and `sort-package-json` work together

Both packages are compatible and complement each other:

| Package | Root level | Nested objects (`scripts`, `dependencies`...) |
| --- | --- | --- |
| `eslint-plugin-json` (current) | ❌ No sorting | ❌ No sorting |
| `eslint-plugin-jsonc` | Alphabetical | Alphabetical |
| `sort-package-json` | Conventional | Alphabetical |

**Execution order:**
1. `eslint:fix` → `eslint-plugin-jsonc` sorts all keys alphabetically (except `package.json`)
2. `sort-pkg` → `sort-package-json` sorts `package.json` with conventional order

**Final result for `package.json`:**
- Root level: conventional order (name, version, description, scripts, dependencies...)
- Nested objects: alphabetical order (scripts, dependencies, devDependencies...)

**Other JSON files** (`jsconfig.json`, `.prettierrc`, etc.):
- All keys sorted alphabetically by `eslint-plugin-jsonc`

## 🔗 References

### Files to modify
- `.eslintrc.js`
- `package.json`
- `package-lock.json`

### Documentation
- https://github.com/ota-meshi/eslint-plugin-jsonc
- https://ota-meshi.github.io/eslint-plugin-jsonc/rules/
- https://github.com/lydell/eslint-plugin-simple-import-sort
- https://github.com/leo-sipos/eslint-plugin-sort-keys-fix
- https://github.com/keithamus/sort-package-json

Rule	Value	Description
`jsonc/comma-dangle`	`"off"`	Disable trailing commas in JSON
`jsonc/indent`	`[2, "tab"]`	Use tabs for indentation
`jsonc/key-spacing`	`2`	Enforce correct spacing around colons
`jsonc/sort-keys`	`[2, ...]`	Sort keys alphabetically

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eslint): add plugins for sorting keys and imports #923

feat(eslint): add plugins for sorting keys and imports

📸 Screenshots

📝 Summary

💡 Why this change?

✅ Benefits

📋 Steps

Phase 1: Install packages

Phase 2: Remove legacy package

Phase 3: Update ESLint configuration

3.1 Update `extends` array

3.2 Update `plugins` array

3.3 Update `overrides` for JSON and JSONC files

3.4 Add sorting rules for JS/Vue files

Phase 4: Update package.json scripts

Phase 5: Run linter

🧪 Tests

📌 Notes

Sorting rules summary

JSONC rules applied to all JSON files

JSON vs JSONC files

How `eslint-plugin-jsonc` and `sort-package-json` work together

🔗 References

Files to modify

Documentation

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Rule	Applies to	Behavior
`simple-import-sort/imports`	JS/Vue files	Sort imports alphabetically
`simple-import-sort/exports`	JS/Vue files	Sort exports alphabetically
`sort-keys-fix/sort-keys-fix`	JS/Vue files	Sort object keys alphabetically
`jsonc/sort-keys`	JSON files	Sort keys alphabetically
`sort-package-json`	package.json	Sort with conventional order

File type	Config used	Comments allowed	Sorting
`*.json`, `.prettierrc`	`recommended-with-json`	❌	Alphabetical
`jsconfig.json`, `tsconfig.json`, `.vscode/.json`	`recommended-with-jsonc`	✓	Alphabetical
`package.json`	Custom	❌	Conventional (sort-package-json)
`package-lock.json`	Excluded	-	None

Package	Root level	Nested objects (`scripts`, `dependencies`...)
`eslint-plugin-json` (current)	❌ No sorting	❌ No sorting
`eslint-plugin-jsonc`	Alphabetical	Alphabetical
`sort-package-json`	Conventional	Alphabetical

feat(eslint): add plugins for sorting keys and imports #923

Description

feat(eslint): add plugins for sorting keys and imports

📸 Screenshots

📝 Summary

💡 Why this change?

✅ Benefits

📋 Steps

Phase 1: Install packages

Phase 2: Remove legacy package

Phase 3: Update ESLint configuration

3.1 Update extends array

3.2 Update plugins array

3.3 Update overrides for JSON and JSONC files

3.4 Add sorting rules for JS/Vue files

Phase 4: Update package.json scripts

Phase 5: Run linter

🧪 Tests

📌 Notes

Sorting rules summary

JSONC rules applied to all JSON files

JSON vs JSONC files

How eslint-plugin-jsonc and sort-package-json work together

🔗 References

Files to modify

Documentation

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

3.1 Update `extends` array

3.2 Update `plugins` array

3.3 Update `overrides` for JSON and JSONC files

How `eslint-plugin-jsonc` and `sort-package-json` work together