Create src/page/SampleSettingTab.ts

main.ts

@@ -1,4 +1,5 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Editor, MarkdownView, Modal, Notice, Plugin } from "obsidian";
+import { SampleSettingTab } from "./src/page/SampleSettingTab";
 
 // Remember to rename these classes and interfaces!
 
@@ -7,8 +8,8 @@ interface MyPluginSettings {
 }
 
 const DEFAULT_SETTINGS: MyPluginSettings = {
-	mySetting: 'default'
+  mySetting: "default",
-}
+};
 
 export default class MyPlugin extends Plugin {
   settings: MyPluginSettings;
@@ -17,41 +18,46 @@ export default class MyPlugin extends Plugin {
     await this.loadSettings();
 
     // This creates an icon in the left ribbon.
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+    const ribbonIconEl = this.addRibbonIcon(
+      "dice",
+      "Sample Plugin",
+      (evt: MouseEvent) => {
         // Called when the user clicks the icon.
-			new Notice('This is a notice!');
+        new Notice("This is a notice!");
-		});
+      },
+    );
     // Perform additional things with the ribbon
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
+    ribbonIconEl.addClass("my-plugin-ribbon-class");
 
     // This adds a status bar item to the bottom of the app. Does not work on mobile apps.
     const statusBarItemEl = this.addStatusBarItem();
-		statusBarItemEl.setText('Status Bar Text');
+    statusBarItemEl.setText("Status Bar Text");
 
     // This adds a simple command that can be triggered anywhere
     this.addCommand({
-			id: 'open-sample-modal-simple',
+      id: "open-sample-modal-simple",
-			name: 'Open sample modal (simple)',
+      name: "Open sample modal (simple)",
       callback: () => {
         new SampleModal(this.app).open();
-			}
+      },
     });
     // This adds an editor command that can perform some operation on the current editor instance
     this.addCommand({
-			id: 'sample-editor-command',
+      id: "sample-editor-command",
-			name: 'Sample editor command',
+      name: "Sample editor command",
       editorCallback: (editor: Editor, view: MarkdownView) => {
         console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
+        editor.replaceSelection("Sample Editor Command");
-			}
+      },
     });
     // This adds a complex command that can check whether the current state of the app allows execution of the command
     this.addCommand({
-			id: 'open-sample-modal-complex',
+      id: "open-sample-modal-complex",
-			name: 'Open sample modal (complex)',
+      name: "Open sample modal (complex)",
       checkCallback: (checking: boolean) => {
         // Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
+        const markdownView =
+          this.app.workspace.getActiveViewOfType(MarkdownView);
         if (markdownView) {
           // If checking is true, we're simply "checking" if the command can be run.
           // If checking is false, then we want to actually perform the operation.
@@ -62,7 +68,7 @@ export default class MyPlugin extends Plugin {
           // This command will only show up in Command Palette when the check function returns true
           return true;
         }
-			}
+      },
     });
 
     // This adds a settings tab so the user can configure various aspects of the plugin
@@ -70,17 +76,17 @@ export default class MyPlugin extends Plugin {
 
     // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
     // Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
+    this.registerDomEvent(document, "click", (evt: MouseEvent) => {
-			console.log('click', evt);
+      console.log("click", evt);
     });
 
     // When registering intervals, this function will automatically clear the interval when the plugin is disabled.
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
+    this.registerInterval(
+      window.setInterval(() => console.log("setInterval"), 5 * 60 * 1000),
+    );
   }
 
-	onunload() {
+  onunload() {}
-
-	}
 
   async loadSettings() {
     this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
@@ -97,38 +103,12 @@ class SampleModal extends Modal {
   }
 
   onOpen() {
-		const {contentEl} = this;
+    const { contentEl } = this;
-		contentEl.setText('Woah!');
+    contentEl.setText("Woah!");
   }
 
   onClose() {
-		const {contentEl} = this;
+    const { contentEl } = this;
     contentEl.empty();
   }
 }
-
-class SampleSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
-
-	constructor(app: App, plugin: MyPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
-
-	display(): void {
-		const {containerEl} = this;
-
-		containerEl.empty();
-
-		new Setting(containerEl)
-			.setName('Setting #1')
-			.setDesc('It\'s a secret')
-			.addText(text => text
-				.setPlaceholder('Enter your secret')
-				.setValue(this.plugin.settings.mySetting)
-				.onChange(async (value) => {
-					this.plugin.settings.mySetting = value;
-					await this.plugin.saveSettings();
-				}));
-	}
-}

src/page/SampleSettingTab.ts

@@ -0,0 +1,30 @@
+import { PluginSettingTab, App, Setting } from "obsidian";
+import MyPlugin from "./main";
+
+export class SampleSettingTab extends PluginSettingTab {
+  plugin: MyPlugin;
+
+  constructor(app: App, plugin: MyPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+
+  display(): void {
+    const { containerEl } = this;
+
+    containerEl.empty();
+
+    new Setting(containerEl)
+      .setName("Setting #1")
+      .setDesc("It's a secret")
+      .addText((text) =>
+        text
+          .setPlaceholder("Enter your secret")
+          .setValue(this.plugin.settings.mySetting)
+          .onChange(async (value) => {
+            this.plugin.settings.mySetting = value;
+            await this.plugin.saveSettings();
+          }),
+      );
+  }
+}