Giter Club home page Giter Club logo

alfishsoftware / godot-files-vscode Goto Github PK

View Code? Open in Web Editor NEW
16.0 1.0 1.0 1.6 MB

Better syntax-highlighting and extra features for Godot files (shaders, assets) in Code. Check Releases for installation instructions.

Home Page: https://marketplace.visualstudio.com/items?itemName=alfish.godot-files

License: The Unlicense

TypeScript 95.91% HTML 4.09%
vscode-extension godot ini syntax-highlighting gdshader assets shader tscn tres vscode godot-engine

godot-files-vscode's Introduction

Godot Files

Better syntax-coloring and additional features for some files supported by Godot Editor.
This is not meant to replace the official godot-tools extension, but to improve on its supported files. This plugin is designed so it can work alongside it, but it's completely independent. If you're using GDScript, you'll likely want to install godot-tools too.

Compatibility: Godot 3.x LTS and 4.0 to 4.x
This extension also works on browser IDEs (vscode.dev and github.dev), with limited functionality.

Screenshot of godot-files extension for VSCode on a tscn file, showing syntax-coloring, outline and hover preview feature

Features

Includes syntax-coloring for these languages:

  • Godot Shader files: *.gdshader, *.gdshaderinc.
  • Better (more specific) grammar for the INI-like files used by Godot (called "GDAsset" here):
    project.godot, *.tscn, *.escn, *.tres, *.gdns, *.gdnlib, *.import, *.tet, *.remap.
  • The same grammar is reused for other INI-like files:
    *.cfg, Git config files (.gitconfig, .git/config) and XDG Desktop Entry files (.desktop, .directory).
    It fits better than INI and Properties because this grammar is "smarter" than regular INI. E.g., it supports sub-properties, literals (booleans, numbers, strings), quoted strings in section headers, ;-separated lists, apostrophe (single quote) inside unquoted strings like don't, etc. You might want to associate this language (config-definition / Configuration Properties) with any other (non-Godot) INI-like formats as well if you notice it fits better.

INI-like files (including GDAsset) also support:

  • Outline and breadcrumb items.

GDAsset files also support:

  • Syntax-coloring of embedded code in asset strings for GDScript and Godot Shader resources (see image above).
    ๐Ÿ˜Ž It even handles both inner and outer languages' escape sequences gracefully, and colors them differently:
    Showcasing how embedded code escape sequences are handled gracefully

  • Navigate to definition of SubResource and ExtResource references, and to resource paths.
    Showcasing navigate to definition
    ๐ŸŒŸ NEW: Going to the definition of a built-in engine type (on type="SomeType" or some_field = SomeType(...)) will open its Godot API Documentation. This will be handled by the godot-tools extension, unless you're online and enabled early access (see below).

  • Hover resource references or paths to show code for loading in GDScript (preload(โ€ฆ), load(โ€ฆ) or FileAccess.open(โ€ฆ)).
    Showcasing code for loading when previewing user path

  • Hover image and font resource paths or their ExtResource references to preview them directly.
    ๐Ÿ”ง You can disable resource previews when hovering with the setting godotFiles.hover.previewResource.

    Showcasing image preview
    โœณ๏ธ Images supported: SVG, PNG, WebP, JPEG, BMP, GIF.

    The font preview shows all uppercase and lowercase ASCII letters and helps testing if they're too similar to numbers:
    Showcasing font preview
    โœณ๏ธ Fonts supported: TTF, OTF, WOFF, WOFF2.

  • Hover any resource (except sub-resources) to preview its thumbnail as generated by the Godot Editor.
    Godot doesn't need to be running because it updates thumbnail files into the cache whenever a resource is saved.
    ๐Ÿ”ง The setting godotFiles.hover.previewResource also applies here.
    โš ๏ธ If you're using Godot in self-contained mode, this requires adding the cache path with the setting godotFiles.godotCachePath.

    It works for scenes:
    Showcasing thumbnail preview of a scene

    As well as any other resource files that have a thumbnail in Godot Editor:
    Showcasing thumbnail preview of a material resource

  • ๐ŸŒŸ NEW FEATURE (NO LONGER RESTRICTED): ๐ŸŒŸ
    Inline color decorators on Color(โ€ฆ) values and within arrays. Hover to edit the color or see its hex value.
    ๐Ÿ”ง You can disable this feature with the settings under godotFiles.inlineColors (.single and .array).
    Showcasing inline color decorators
    โœณ๏ธ The displayed color (and its hex value) can't consider advanced cases like HDR and color space changes (e.g. between sRGB and linear).

If you want more features, check the next section and potential future development below.

Early Access

Features in early access are ready for use, but restricted to supporters at first.
Each feature will usually stay restricted until the next new feature takes its place in a future version.

๐Ÿ”‘ To unlock all features as soon as they arrive, please donate and copy the password, then use the Unlock features in early access command (right-click this extension in the panel) and paste it in the prompt. Doing this just once will permanently unlock everything in early access, even across updates.

๐Ÿ”’ GDAsset features currently restricted:

  • Inlay hints surrounding items with implied parentheses in packed arrays of vectors or colors.
    โœณ๏ธ This is not supported syntax in asset files! These parentheses are only shown for clarity.
    ๐Ÿ”ง You can toggle this feature with the settings under godotFiles.clarifyArrays (.vector and .color).
    Showcasing implied parentheses in array items as inlay hints

  • Browse the online Godot Documentation directly from the IDE.
    โš™๏ธ You can use the command Godot Files: Open Godot API Documentation to show the page listing all classes.
    ๐Ÿ”ง The setting godotFiles.documentation.viewer lets you choose your preferred viewer for when you're online:

    • godot-tools: Use the godot-tools extension to open API docs (offline; requires Godot to be running and connected).
    • browser: Open online documentation URLs in the external browser. Also supports going to the specific Godot version.
    • webview: Load online documentation pages internally within IDE tabs (including tutorials). Searches and external links are opened in your browser. This advanced viewer supports going to the specific Godot version, and redirecting inherited members to locate their definition in a parent class. There's a few settings for it too.

    Showcasing a Godot Docs tutorial page on the internal webview

Known Limitations

Parsing of INI-like files is very simplistic (line-based; doesn't use a robust parser library), but should work well for almost all cases where files were generated by Godot. A few corner cases might not match, specially if you manually edit files (e.g., a line with an array value like [null] may be interpreted as a section). Also, ext_resource paths containing comment chars (# or ;) are not parsed properly in outline; this causes issues in hover too.

VSCode only recognizes a word token properly when hovering or placing the cursor within its first 32 characters. So, for long paths, you only get the tooltip when hovering this initial part of the path.

VSCode is not recognizing "embeddedLanguages" as expected for some reason, so, if you edit code inside GDAsset strings, then things like toggling comments, snippets, etc. won't consider the embedded language's context.

Support

This software is free and in the public domain. It respects your privacy by not collecting any data.
๐Ÿ‘ If you think this is useful, please star the GitHub repo and give it a rating on VS Marketplace or Open-VSX.
โค๏ธ Itch Store | ArtStation | Unity Assets
๐ŸŒ GitHub | Bitbucket | Reddit | YouTube


Potential Future Development

You can fund development of a specific feature that you want, contributing for the benefit of the community.

When you donate, you get not only the password to unlock early access explained above, but also the right to optionally vote on a new feature. If there's enough funding from the community, development will progress, prioritizing the most voted feature. Any amount helps a lot!

The features below are theoretically feasible.
Each $ means about a week of work needed to implement it. These are very rough estimates, and this list may change.

Textual GDAsset

Id Weeks Possible Feature
aArrayCount $ Show array size and element indices
aHoverCartesian $$$$$ Cartesian hover previews for some coordinate values like vector, quat, basis, etc

Binary Godot Asset

Id Weeks Possible Feature
bDecode $$ Read-only textual GDAsset code (tres, tscn) for binary resource files (res, scn, etc.)
bTexView $$ Open .stex and .ctex texture files like images

Godot Shader

Id Depends on Weeks Possible Feature
sParser $$$$$$$$ Preprocessor + Parser, independent of Godot Editor
sSyntaxErr sParser $ Report Syntactical Errors
sOutline sParser $ Outline / Breadcrumbs + Go to Workspace Symbol
sGotoDef sParser $ Go to Definition in User Code
sHighlight sGotoDef $ Highlight Occurrences
sSemantic sParser $ Semantic Coloring
sLangCompl sParser $ Basic Completions (Keywords, Snippets)
sUserDocs sParser $$ User API Documentation
sUserCompl sParser $$ User API Completions
sUserSign sParser $$ User API Signature Help
sCoreApi $$$ Structured Built-in API + Docs (fetch online)
sGotoDocs sCoreApi, sParser $ Go to Online Documentation
sFindRef sCoreApi, sHighlight $ Find References
sRename sCoreApi, sFindRef $ Rename Refactoring
sCoreDocs sCoreApi, sParser $$$ Built-in API Documentation
sCoreCompl sCoreApi, sParser $$$ Built-in API Completions
sCoreSign sCoreApi, sParser $$$ Built-in API Signature Help
sSemErr sCoreApi, sSyntaxErr $$$$ Report Some Semantic Errors

godot-files-vscode's People

Contributors

alfishsoftware avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

boyquotes

godot-files-vscode's Issues

Looks great, but how do you actually use/install it?

I installed the latest version of VS Code godot-tools, but all its gdshader highlighter does is highlight the "shader_type spatial;" line... and nothing else. Unsurprising, since its gdshader.tmLanguage.json file is this:

{
    "version": "v0.1.0",
    "scopeName": "source.gdshader",
    "uuid": "3a95d25d-688b-481f-a581-eee47f00e5ca",
    "patterns": [
        {
            "include": "#shader_type"
        },
        {
            "include": "source.glsl"
        }
    ],
    "repository": {
        "shader_type": {
            "match": "(shader_type)",
            "name": "storage.type.glsl"
        }
    }
}

Found your package which promises to highlight more, but, don't know how to install it. Advice would be appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.