obsidian-plugin（Obsidian plugin 命令行）

obsidian-plugin — Obsidian Plugin Development Skill

Keyword: obsidian plugin · create obsidian plugin · obsidian eslint · obsidian submission Build high-quality Obsidian plugins that pass community review on first attempt. Covers all 27 rules from eslint-plugin-obsidianmd v0.1.9, boilerplate generation, vault API patterns, accessibility requirements, and submission validation.

When to use this skill

• Generate a new Obsidian plugin project with clean boilerplate (no sample code bloat)
• Review and fix ESLint violations from eslint-plugin-obsidianmd
• Prepare a plugin for Obsidian community directory submission
• Apply memory-safe lifecycle patterns (registerEvent, no view reference storage)
• Implement proper type safety (no unsafe as TFile casts, no any)
• Enforce accessibility requirements (keyboard navigation, ARIA labels, focus management)
• Apply Obsidian CSS variables for theme-compatible styling
• Validate plugin metadata (manifest.json, plugin ID/name/description rules)

Instructions

Step 1: Generate a new plugin project

# Interactive boilerplate generator — validates metadata against submission rules
node scripts/create-plugin.js

# Or use npx directly from the source repo
npx github:gapmiss/obsidian-plugin-skill create-plugin

The generator produces:

• src/main.ts — Plugin class with settings integration
• src/settings.ts — Settings interface and PluginSettingTab
• manifest.json — Validated plugin metadata
• styles.css — CSS scaffold with Obsidian variables comment
• tsconfig.json, package.json, esbuild.config.mjs — Build toolchain
• version-bump.mjs, versions.json — Version management
• LICENSE — MIT with auto-populated year/author

Step 2: Install ESLint validation

npm install --save-dev eslint eslint-plugin-obsidianmd

// eslint.config.mjs
import pluginObsidianmd from "eslint-plugin-obsidianmd";
export default [
  pluginObsidianmd.configs.recommended,
  // For locale string checking:
  // pluginObsidianmd.configs.recommendedWithLocalesEn,
];

Run validation:

npx eslint src/
npx eslint src/ --fix   # auto-fix where possible

Step 3: Follow the submission validation workflow

1. Run bash scripts/install.sh to set up the development environment
2. Validate plugin ID and name against naming rules (see below)
3. Run ESLint — all 27 rules must pass
4. Complete the Code Review Checklist (see References)
5. Submit PR to obsidianmd/obsidian-releases

Plugin Naming Rules

# Validate your manifest.json
node scripts/create-plugin.js --validate-only

ESLint Rules Summary (27 rules)

Submission & Naming

Memory & Lifecycle

Type Safety

UI/UX (sentence-case rules — mostly auto-fixable)

API Best Practices

Styling

Accessibility (MANDATORY)

Key Code Patterns

Memory-safe event registration

// ✅ Correct — auto-cleaned on plugin unload
this.registerEvent(
  this.app.vault.on('create', (file) => this.handleCreate(file))
);

// ❌ Wrong — leaks memory
this.app.vault.on('create', (file) => this.handleCreate(file));

Type-safe file access

// ✅ Correct — instanceof narrowing
const file = this.app.workspace.getActiveFile();
if (file instanceof TFile) {
  await this.app.vault.read(file);
}

// ❌ Wrong — unsafe cast
const file = this.app.workspace.getActiveFile() as TFile;

Accessibility — ARIA on icon buttons

// ✅ Correct
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
btn.setAttribute('aria-label', 'Delete note');
setIcon(btn, 'trash');

// ❌ Wrong — no aria-label
const btn = containerEl.createEl('button', { cls: 'clickable-icon' });
setIcon(btn, 'trash');

CSS with Obsidian variables

/* ✅ Correct — theme-compatible */
.my-plugin-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-m);
}

/* ❌ Wrong — hardcoded colors */
.my-plugin-button {
  background-color: #7c3aed;
  color: white;
}

Quick Reference

References

• Accessibility Guide — Keyboard nav, ARIA, focus management (MANDATORY)
• Code Quality Guide — Security, platform compat, API usage
• CSS Styling Guide — Obsidian variables, scoped styles, dark/light mode
• File Operations Guide — Vault API, editor vs vault, atomic ops
• Memory Management Guide — registerEvent, lifecycle patterns
• Submission Guide — Repository structure, naming, submission process
• Type Safety Guide — instanceof narrowing, no any, const/let
• UI/UX Guide — Sentence case, commands, settings structure
• eslint-plugin-obsidianmd — Official ESLint rules
• Obsidian Plugin Developer Docs
• Source Skill Repository — MIT License