# IDE Extension

IDE features, like syntax highlighting, error checking, auto-completion and interactive documentation could significantly increase productivity when writing naninovel scripts. We've made an extension for a free and open-source Visual Studio Code (available for Windows, MacOS and Linux) IDE, which provides the essential IDE support for NaniScript syntax.

# Installation

  1. Open extensions window in VS Code via View -> Extensions menu
  2. Search for "Naninovel" and click "Install" button
  3. When a .nani file is opened, the extension will activate automatically

NOTICE

The IDE extension requires .NET Core 3.1 runtime in order to work correctly. VS Code will attempt to install it automatically when activating the extension; in case it fails, install the runtime manually via dotnet.microsoft.com/download.

# Spell Check

To enable spell checking in the naninovel scripts, install a spell checker extension, eg. Code Spell Check and turn on the checking for naniscript language; see the settings section below for an example on how to enable naniscript language for the Code Spell Check extension.

# IDE Metadata

When adding custom commands, you may notice they're highlighted as errors. Also, available project resources and actors won't autocomplete by default. That is due to project metadata is not available to the extension. Use IDE metadata tool to automatically generate the required metadata file and enable the features.

Open the tool with Naninovel -> Tools -> IDE Metadata Unity editor menu, then click "Select" button and select path to server folder found inside the target IDE extension; eg, for VS Code it'll be ~/.vscode/extensions/naninovel/server (where ~ is the user directory). Click "Generate IDE Metadata" button to generate the file at the specified path and restart IDE for changes to take effect.

The custom commands should now be recognized by the IDE and autocomplete will work for the available project resources and actors. When you add or modify the commands or resources, repeat the process to update the metadata file.

WARNING

Implementing types of the custom commands should not be under Naninovel.Commands namespace; otherwise, they will be recognized as built-in commands and won't be included in the generated metadata file.

If you'd like to add documentation to the custom commands and/or parameters, apply Documentation attribute to command type and parameter fields respectively:

[Documentation("Summary of the custom command.")]
public class CustomCommand : Command
{
    [Documentation("Summary of the custom parameter.")]
    public StringParameter CustomParameter;
}

# VS Code Settings

Below is the recommended settings for VS Code to ignore Unity's autogenerated meta files, enable semantic syntax highlighting, word wrap and spell checking (given spell check extension is installed) and disable word-based suggestions (so that they don't constantly popup when you type generic text lines):

{
    "files.exclude": {
        "*.meta": true
    },
    "editor.wordWrap": "on",
    "editor.wordBasedSuggestions": false,
    "editor.semanticTokenColorCustomizations": {
        "enabled": true,
        "rules": {
            "CommentLine": { "foreground":"#5d6470", "italic": true },
            "LabelLine": "#9bc37c",
            "GenericTextLine": "#acb2be",
            "CommandLine": "#6cb2ed", 
            "CommandBody": "#6cb2ed",
            "CommandParameter": "#cd9769", 
            "ParameterValue": "#e2be7f",
            "InlinedCommand": "#6cb2ed", 
            "ScriptExpression": "#62b8c1",
            "GenericTextPrefix": "#e2be7f",
            "InvalidSymbol": "#d14e4e"
        }
    },
    "cSpell.enableFiletypes": [
        "naniscript"
    ]
} 

You can access the settings JSON file via File -> Preference -> Settings menu and clicking "Open Settings (JSON)" button in the upper-right corner of the window. Select "User" tab to edit settings for all projects or "Workspace" to affect only the current project with the naninovel scripts.

Feel free to customize the settings as you see fit.

# Video Tutorial

Below is a video tutorial on how to install, configure and use the VS Code extension; it also covers generating metadata for custom commands, resources and actors.

Last Updated: October 13, 2020