@diphyx/eslint-plugin

@diphyx/eslint-plugin

Opinionated ESLint rules and a ready-to-use flat config that capture DiPhyx's Nuxt/Vue + Harlemify conventions — so every DiPhyx app lints the same way from a single dependency.

A stock eslint-plugin-vue setup checks general Vue style; this plugin adds the project-specific patterns it can't know about — where template directives belong, how <script setup> is ordered and written, the exact shape of a Harlemify createStore, composable naming, and reaching for radash / VueUse instead of hand-rolled code.

Highlights

• 35 custom rules covering SFC templates, <script setup> structure, Harlemify stores, composable naming, code layout, and radash / VueUse usage.
• One-line preset — configs.recommended wires up the TypeScript + Vue parsers, the relevant eslint-plugin-vue rules, file-naming, and every custom rule.
• No extra peer deps — the parsers and plugins ship inside this package; you only install eslint itself.
• Guidance, not gates — every rule reports as a warning and none auto-fix, so it nudges without blocking commits.
• Modern toolchain — flat config, ESLint 9+, ESM only.

Install

pnpm add -D @diphyx/eslint-plugin eslint

The plugin ships its own parser/plugin dependencies (@typescript-eslint/*, vue-eslint-parser, eslint-plugin-vue, eslint-plugin-check-file), so you only need eslint itself as a peer.

Usage

eslint.config.mjs:

import diphyx from "@diphyx/eslint-plugin";

export default [
    ...diphyx.configs.recommended,

    // project-specific overrides / ignores
    {
        ignores: ["node_modules/**", ".nuxt/**", ".output/**", "dist/**", "**/*.d.ts"],
    },
];

Picking rules à la carte

If you don't want the preset, register the plugin and turn on rules yourself:

import diphyx from "@diphyx/eslint-plugin";

export default [
    {
        files: ["**/*.vue"],
        plugins: { "@diphyx": diphyx },
        rules: {
            "@diphyx/template-v-if": "warn",
            "@diphyx/template-text": "warn",
        },
    },
];

Rules

All rules are report-only (warnings); none auto-fix. Each rule has its own page under docs/rules/ (also linked from the rule's meta.docs.url).

Template (*.vue)

Script (*.vue)

Store — Harlemify createStore

Composable (app/composables/*.ts)

Radash preferences (*.ts, *.vue)

Prefer radash helpers over hand-rolled equivalents.

VueUse preferences (*.ts, *.vue)

Prefer VueUse composables (with automatic lifecycle cleanup) over raw browser APIs.

These rules only report inside a Vue effect scope — a .vue <script setup>, a component setup(), or a use* composable — because that is where VueUse's onScopeDispose cleanup actually runs. Plain TypeScript modules, utility functions, and non-component classes are left alone. Code inside a detached callback (an event handler such as el.onopen = …, a setTimeout/setInterval/addEventListener callback, or a .then/.catch/.finally continuation) runs after the scope has closed, so it is left alone too.

Layout (*.ts, *.vue)

Keep multi-line statements visually separated in script/TypeScript code.

License

MIT