Obsidian Advanced Canvas 项目教程

1、项目的目录结构及介绍

Obsidian Advanced Canvas 项目的目录结构如下：

obsidian-advanced-canvas/
├── assets/
├── src/
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── esbuild.config.mjs
├── manifest.json
├── package-lock.json
├── package.json
└── tsconfig.json

目录介绍

• assets/: 存放项目资源文件。
• src/: 存放源代码文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• esbuild.config.mjs: esbuild 配置文件。
• manifest.json: 插件清单文件。
• package-lock.json: npm 锁定文件。
• package.json: npm 配置文件。
• tsconfig.json: TypeScript 配置文件。

2、项目的启动文件介绍

项目的启动文件主要是 src/ 目录下的文件，这些文件包含了插件的主要逻辑和功能实现。具体文件如下：

src/
├── main.js
├── styles.css

文件介绍

• main.js: 插件的主入口文件，包含了插件的初始化和主要功能逻辑。
• styles.css: 插件的样式文件，定义了插件的外观和布局。

3、项目的配置文件介绍

项目的配置文件主要包括以下几个：

• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintignore: ESLint 忽略配置文件，指定不需要进行代码检查的文件和目录。
• .eslintrc: ESLint 配置文件，定义代码检查规则。
• .gitignore: Git 忽略配置文件，指定不需要纳入版本控制的文件和目录。
• esbuild.config.mjs: esbuild 配置文件，用于构建和打包项目。
• manifest.json: 插件清单文件，包含了插件的基本信息和依赖项。
• package.json: npm 配置文件，定义了项目的依赖和脚本命令。
• tsconfig.json: TypeScript 配置文件，用于 TypeScript 项目的编译配置。

配置文件介绍

• .editorconfig:

  root = true
  
  [*]
  indent_style = space
  indent_size = 2
  charset = utf-8
  trim_trailing_whitespace = true
  insert_final_newline = true
  

• .eslintrc:

  {
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
    "rules": {
      // 自定义规则
    }
  }
  

• esbuild.config.mjs:

  import esbuild from 'esbuild';
  
  esbuild.build({
    entryPoints: ['src/main.js'],
    outfile: 'dist/bundle.js',
    bundle: true,
    minify: true,
    sourcemap: true,
  }).catch(() => process.exit(1));
  

• manifest.json:

  {
    "id": "obsidian-advanced-canvas",
    "name": "Advanced Canvas",
    "version": "1.0.0",
    "minAppVersion": "0.12.0",
    "description": "Supercharge your Obsidian canvas experience",
    "author": "Developer-Mike",
    "authorUrl": "https://github.com/Developer-Mike",
    "isDesktopOnly": false
  }
  

• package.json:

  {
    "name": "obsidian-advanced-canvas",
    "version": "1.0.0",
    "description": "Supercharge your Obsidian canvas experience",
    "main": "src/main.js