|
| 1 | +# ESLint Plugin |
| 2 | + |
| 3 | +Coalesce provides an ESLint plugin (`eslint-plugin-coalesce`) that detects common mistakes in Coalesce Vue applications. The plugin ships with a recommended configuration that enables all rules as warnings. |
| 4 | + |
| 5 | +## Setup |
| 6 | + |
| 7 | +The plugin is included in the [project template](/stacks/vue/getting-started.md) by default. |
| 8 | + |
| 9 | +To add it to an existing project, install it: |
| 10 | + |
| 11 | +```sh |
| 12 | +npm install --save-dev eslint-plugin-coalesce |
| 13 | +``` |
| 14 | + |
| 15 | +Then add the recommended config to your `eslint.config.mjs`: |
| 16 | + |
| 17 | +```js |
| 18 | +import coalesce from "eslint-plugin-coalesce"; |
| 19 | + |
| 20 | +export default [ |
| 21 | + // ... your other configs |
| 22 | + coalesce.configs.recommended, |
| 23 | +]; |
| 24 | +``` |
| 25 | + |
| 26 | +## Rules |
| 27 | + |
| 28 | +### `coalesce/no-load-before-auto-load` |
| 29 | + |
| 30 | +Detects when `$load()` is called alongside `$useAutoLoad()` or `$startAutoLoad()` on the same object in the same scope. The auto-load methods support an `immediate` option that performs the initial load, making a separate `$load()` call redundant and potentially racy. |
| 31 | + |
| 32 | +```ts |
| 33 | +// ❌ Bad |
| 34 | +const list = new PersonListViewModel(); |
| 35 | +list.$load(); |
| 36 | +list.$useAutoLoad(); |
| 37 | + |
| 38 | +// ✅ Good |
| 39 | +const list = new PersonListViewModel(); |
| 40 | +list.$useAutoLoad({ immediate: true }); |
| 41 | +``` |
| 42 | + |
| 43 | +### `coalesce/no-sort-in-computed` |
| 44 | + |
| 45 | +Detects in-place `.sort()` calls inside `computed()` functions. Since `.sort()` mutates the array in-place, it can trigger reactivity updates that cause infinite loops. |
| 46 | + |
| 47 | +The rule allows `.sort()` when chained after methods that produce new arrays (`.map()`, `.filter()`, `.slice()`, `.flatMap()`, `.concat()`, `.toReversed()`, `.toSpliced()`, `.flat()`), or when called on array literals like `[...arr].sort()`. |
| 48 | + |
| 49 | +```ts |
| 50 | +// ❌ Bad |
| 51 | +const sorted = computed(() => items.value.sort()); |
| 52 | + |
| 53 | +// ✅ Good |
| 54 | +const sorted = computed(() => items.value.toSorted()); |
| 55 | +const sorted = computed(() => [...items.value].sort()); |
| 56 | +const sorted = computed(() => items.value.slice().sort()); |
| 57 | +``` |
| 58 | + |
| 59 | +### `coalesce/no-static-router-import` |
| 60 | + |
| 61 | +In `.vue` files, detects direct default imports of the router instance (e.g. `import router from '@/router'`), which almost always creates circular dependencies. Use `useRouter()` from `vue-router` instead. |
| 62 | + |
| 63 | +```ts |
| 64 | +// ❌ Bad (in a .vue file) |
| 65 | +import router from "@/router"; |
| 66 | + |
| 67 | +// ✅ Good |
| 68 | +import { useRouter } from "vue-router"; |
| 69 | +const router = useRouter(); |
| 70 | +``` |
| 71 | + |
| 72 | +## Configuration |
| 73 | + |
| 74 | +All rules are enabled as warnings in the recommended config. To customize severity: |
| 75 | + |
| 76 | +```js |
| 77 | +import coalesce from "eslint-plugin-coalesce"; |
| 78 | + |
| 79 | +export default [ |
| 80 | + coalesce.configs.recommended, |
| 81 | + { |
| 82 | + rules: { |
| 83 | + "coalesce/no-sort-in-computed": "error", |
| 84 | + "coalesce/no-static-router-import": "off", |
| 85 | + }, |
| 86 | + }, |
| 87 | +]; |
| 88 | +``` |
0 commit comments