npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

meta-json-schema

v1.18.10

Published

JSON Schema for Clash Meta

Downloads

3,929

Readme

🧩 VSCode 插件

VS Code 扩展商店搜索 Meta JSON SchemaClashMeta.meta-json-schema,安装扩展后即可获取 Clash.Meta的语法支持。

💡 用法

  1. 安装YAML语法支持插件redhat.vscode-yaml
  2. .vscode目录下的settings.json文件中(如不存在则手动创建),填入以下内容。其中,key为schema文件的地址,value为路径通配符,请根据需求自行修改。
    {
      "yaml.schemas": {
        "https://fastly.jsdelivr.net/gh/dongchengjie/meta-json-schema@main/schemas/meta-json-schema.json": "**/*.yaml"
      }
    }
  1. 安装monaco-editor(编辑器)和monaco-yaml(YAML支持)。

    npm install monaco-editor
    npm install monaco-yaml
  2. 如果是vite项目,可通过安装插件简化初始化(其他构建工具如webpack请参考monaco-yaml文档)。

    1. 安装vite-plugin-monaco-editor
    npm install vite-plugin-monaco-editor
    1. 配置vite.config.ts
    import { defineConfig } from "vite";
    import monacoEditor from "vite-plugin-monaco-editor";
    export default defineConfig({
      plugins: [
        monacoEditor({
          languageWorkers: ["editorWorkerService"],
          customWorkers: [
            {
              label: "yaml",
              entry: "monaco-yaml/yaml.worker"
            }
          ]
        })
      ]
    });
    1. 代码中配置schema(请根据需求自行修改fileMatch)。
    import * as monaco from "monaco-editor";
    import { configureMonacoYaml } from "monaco-yaml";
    
    configureMonacoYaml(monaco, {
      validate: true,
      enableSchemaRequest: true,
      schemas: [
        {
          uri: "https://fastly.jsdelivr.net/gh/dongchengjie/airport@main/meta-json-schema.json",
          fileMatch: ["**/*.clash.yaml"]
        }
      ]
    });

👓 JSON Schema可视化

  • meta-json-schema

  • clash-verge-merge-json-schema

  • clash-nyanpasu-merge-json-schema

🖥️ 开发

  1. 下载代码
git clone https://github.com/dongchengjie/meta-json-schema.git
  1. 使用Visual Studio Code打开项目(工作目录为.vscode所在目录)。
code /path/to/project/location

[!NOTE] 项目打开后会弹出建议安装YAML插件的提示,请点击确认安装或手动安装,以获取良好的开发体验。

  1. 安装依赖
npm install
  1. 启动项目。执行下列命令后,会对src目录进行监视,如果发生变动则会对项目进行bundle,输出到schemas目录下。
npm run dev
  1. 测试schema。由于.vscode目录下settings.json中已事先配置了如下配置(test目录下的文件使用schemas目录下输出的schema文件)。因此可以对src进行修改,并在test目录下新增测试文件,及时观察变动并做出修正。
"yaml.schemas": {
  "schemas/meta-json-schema.json": "test/clash-meta/**/*.yaml",
  "schemas/clash-verge-merge-json-schema.json": "test/clash-verge/**/*.yaml",
  "schemas/clash-verge-nyanpasu-json-schema.json": "test/clash-nyanpasu/**/*.yaml"
},
  1. 发布release。执行下列命令后,会根据package.json文件中定义的releases进行输出,并根据optimization决定是否进行压缩。
npm run release

📚 语法参考

项目使用的JSON Schema版本为draft-07,语法请参考JSON Schema Reference

Monaco 编辑器是为 VS Code 提供支持的开源代码编辑器,使用下列属性提供更丰富的Snippet支持。

interface JSONSchema {
  // 自定义Snippet建议(数组)
  defaultSnippets?: {
    label: string; // 标签文本(索引)
    description?: string; // 标签描述(需要点击展开)
    markdownDescription?: string; // 标签描述(需要点击展开,markdown格式,优先级高于description,)
    body: any; // 实际取值内容
    bodyText?: string; // 实际取值内容文本(暂无作用)
  }[];
  errorMessage?: string; // 错误信息
  patternErrorMessage?: string; // 格式错误信息(优先级高于errorMessage)
  deprecationMessage?: string; // 过时错误信息
  enumDescriptions?: string[]; // 枚举描述信息(数组)
  markdownEnumDescriptions?: string[]; // 枚举描述信息(markdown格式)
  markdownDescription?: string; // 描述信息(markdown格式)
  doNotSuggest?: boolean; // 不显示建议
  suggestSortText?: string; // 属性值建议排序符(默认为属性名)
  allowComments?: boolean; // 允许注释
  allowTrailingCommas?: boolean; // 允许尾随逗号
}

🤔 FAQ

definitions中的compatible.json文件的用途是什么?

YAML支持Folded StyleInline Style的写法。 使用"type": "boolean"来定义某个属性,那么'true''false'就会提示Incorrect type. Expected "boolean".。因此引入compatible类型,以兼容多种编码风格。

proxies:
  - { name: "proxy1", type: "ss", cipher: "auto", tls: "true" }
  - { name: proxy2, type: ss, cipher: auto, tls: true }
proxies:
  - name: "proxy1"
    type: "ss"
    cipher: "auto"
    tls: "true"
  - name: proxy1
    type: ss
    cipher: auto
    tls: true

[!NOTE] 由于这种情况多发生于proxies配置部分,所以目前仅proxies配置中使用了compatible.json,其余地方可视情况使用。