.. include:: /Includes.rst.txt .. _json-schema: =========== Json Schema =========== .. versionadded:: 2.1 Since Content Blocks is based on a YAML definition, it is possible to validate it against a `JSON Schema `__. The schema is shipped directly inside the Content Blocks extension and updated in each new releases accordingly. It is located in the root folder "JsonSchema": .. note:: This feature was voted for as part of the `Community Budget Ideas 2026 Round One `__ .. card:: :class: mb-4 .. directory-tree:: :level: 3 * :path:`content-blocks` * :path:`JsonSchema` * :file:`basic.schema.json` * :file:`content-element.schema.json` * :file:`file-type.schema.json` * :file:`page-type.schema.json` * :file:`record-type.schema.json` As you can see, each content type brings its own schema. Even :ref:`Basics ` have their own schema, as they are separate YAML files. Usage ===== Lint Command ------------ The most simple usage is the integrated :ref:`lint command `: .. code-block:: bash vendor/bin/typo3 content-blocks:lint Running this command will reveal configuration errors of all loaded Content Blocks. Use this in your CI pipeline to ensure you don't introduce incorrect configuration. .. note:: This command only works in composer-mode. .. _json-schema-ide: IDE Integration --------------- When writing Content Blocks configuration, an IDE integration of the JSON Schema will help you with auto-completion and realtime linting. PhpStorm ++++++++ Open PhpStorm and switch to File > Preferences > Languages & Frameworks > Schemas and DTDs > JSON Schema Mappings. Then, select the local json file for "Schema file or URL" in your vendor/friendsoftypo3/content-blocks or typo3conf/ext/content_blocks folder. Lastly, create a new "File path Pattern". For example: `**/ContentBlocks/ContentElements/*/config.yaml`. Do this for each type you want validation for. Unfortunately, you have to repeat these steps for each new project. Overview: +------------------+----------------------------------------+------------------------------------------------+ | Content Type | Schema file | File path Pattern | +==================+========================================+================================================+ | Content Elements | JsonSchema/content-element.schema.json | **/ContentBlocks/ContentElements/*/config.yaml | +------------------+----------------------------------------+------------------------------------------------+ | Page Types | JsonSchema/page-type.schema.json | **/ContentBlocks/PageTypes/*/config.yaml | +------------------+----------------------------------------+------------------------------------------------+ | Record Types | JsonSchema/record-type.schema.json | **/ContentBlocks/RecordTypes/*/config.yaml | +------------------+----------------------------------------+------------------------------------------------+ | File Types | JsonSchema/file-type.schema.json | **/ContentBlocks/FileTypes/*/config.yaml | +------------------+----------------------------------------+------------------------------------------------+ | Basics | JsonSchema/basic.schema.json | **/ContentBlocks/Basics/*.yaml | +------------------+----------------------------------------+------------------------------------------------+ Visual Studio Code ++++++++++++++++++ 1. Install the plugin "redhat.vscode-yaml" 2. Open the settings and search for "yaml schemas" and open the settings.json. 3. Add the following config (adjust the local path accordingly) .. code-block:: json { "yaml.schemas": { "vendor/friendsoftypo3/content-blocks/JsonSchema/content-element.schema.json" : ["**/ContentBlocks/ContentElements/*/config.yaml"], "vendor/friendsoftypo3/content-blocks/JsonSchema/page-type.schema.json" : ["**/ContentBlocks/PageTypes/*/config.yaml"], "vendor/friendsoftypo3/content-blocks/JsonSchema/record-type.schema.json" : ["**/ContentBlocks/RecordTypes/*/config.yaml"], "vendor/friendsoftypo3/content-blocks/JsonSchema/file-type.schema.json" : ["**/ContentBlocks/FileTypes/*/config.yaml"], "vendor/friendsoftypo3/content-blocks/JsonSchema/basic.schema.json" : ["**/ContentBlocks/Basics/*.yaml"] } }