VS Code: mLua Extension

# Course Introduction

Creators using the LocalWorkspace and ExtendedScriptFormat can efficiently create scripts by using the mLua VS Code Extension provided by MapleStory Worlds.

##### Reference Guide

[LocalWorkspace](/docs/?postId=1165%7B%22target%22:%22_blank%22%7D) [ExtendedScriptFormat](/docs/?postId=1166%7B%22target%22:%22_blank%22%7D) [mLua](/docs?postId=1287%7B%22target%22:%22_blank%22%7D) [Coproduction](/docs/?postId=670%7B%22target%22:%22_blank%22%7D)

# mLua VS Code Extension

mLua Extension is an expansion program that allows the convenient use of mLua in VS Code.

> Learn More mLua Extension can make global variable declarations, and unlike MSW Maker's script editor, a warning doesn't display.

> Learn More A debugging function will be added in the future.

# Using mLua VS Code Extension

To use mLua Extension,  must be installed. VS Code provides a syntax emphasis function with the source code editor, which increases the convenience of writing code.

  1. Install .
  2. Select Extensions and search mLua. [png](1739257075188099842c84703431fae9f1dfe782c5b3b)
  3. Once the installation is complete, Extension is automatically activated. [png](17392575481988bb9dee8ad324ddea22bef398b4421c7)
  4. After selecting VS Code - File - Open Folder, select the world folder that was downloaded from local to load the entire file. [png](1739257564610278a1b7b1ff143d0a498a01e8a3c6134)
  5. Written code can be synchronized with MapleStory World's maker and released. Refer to [LocalWorkspace](/docs/?postId=1165%7B%22target%22:%22_blank%22%7D) on how to synchronize.



# mLua VS Code Extension Function

## Hover

The symbol's information displays when hovering the mouse over the symbol. [png](1739258236378407788513cc141c2af1b550be5154b6d)

## Inlay Hint

Displays the information that helps with writing code such as a member's override status, the Entity Name that corresponds to Entity Id. [png](1739258296092c63e04f5db6a443585eb781342cc51b3)

## Document Symbol

Displays the symbols that exists in the document. [png](1739259663469d2a0a54c39c44d87942b78154ea70269)

## Rename Symbol

Change the names of the referenced symbols at once.

## Signature Helper

Displays function signatures when writing functional call expressions, which help with writing parameters. If overloaded, use the arrow keys to find the desired signature to show the function signature. [png](1739258358762a37066f5d9284e27a5d031f086aedb78)

## Go to Reference

Move to the selected symbol's reference.

## Find All Reference

Finds the references of all selected symbols.

## Go to Definition

Moves the selected symbols to the defined locations.

## Go to Type Definition

Moves the selected symbol's type to the defined location. [png](1739259625673c71ae233e5f2446daee2749b11cfbbd4)

## Completion

#### Code Completion

Infers symbols that can be used in certain scripts when writing a script and offers auto-completion. It also infers accessible members from the target symbol when indexing and offers auto-completion.

[png](173925981885800cc64e8e22a4c6bab618d241f270495)

#### Entity Id Completion

You can easily find an entity's Id by using the entity path. By selecting an entity candidate provided by Completion, it will be replaced with an Entity Id automatically. You can view the entity's name through the inlay hints to easily differentiate entity Ids. For example, if the property type is BackgroundComponent, Completion will narrow down entity Ids that have Background. [png](173926657423897107b00ec1c4dc7a66a7c5907914b2c)

## Code Snippet

Provides codes often used by the user as a template. Auto-complete code fragments by selecting Snippet, and press Tab to move to the template's next intended position.

## Diagnostic

A function that diagnoses code written by the creator and tells them about any potential issues. It can classify issues by importance, and you can view the diagnosis results from PROBLEMS. [png](17392600764315daec26eb5b148fe90c9134258b65d7d)

## Commit Character Support

A function that selects automatically-suggested items upon entering `.(dot)`, `,(comma)`, `:(colon)`. [gif](1739259976957319c89b93a604bba81366707a91b93f2)

# Code Folding

This function folds certain sections of written code using `--region`, `--endregion`. Enter `--region` at the desired start of the folded code and `--endregion` at the end.

[png](17483232121567e4c7bf533d5448d9a8a8b143410a237)

# Symbol Color Customization

You can change the color of certain symbols by changing the foreground scope value from Inspect Editor Tokens and Scopes. You can only use the color change function by creating a settings.json file under downloaded project folder - .vscode folder that was downloaded to local through the local workspace. Please refer to the [LocalWorkspace] (/docs?postId=1165{"target":"_blank"}) guide on how to create the settings.json file.

  1. Enter Ctrl + Shift + P from VS Code.

  2. Select Developer:Inspect Editor Tokens and Scopes.

  3. Click the symbol that will have its color changed with the mouse to confirm the foreground scope value.

  4. Write the created settings.json file in the following format.
         
         @Component
         script PlaceholderBehavior extends Component
         end
         



    
    
        
    4. Save the **settings.json** file and check if the color has been changed.
    
    >**Tip**
    >.The file name inside of the **vscode** folder must be **settings.json**. the function will not apply if the name isn't input precisely.
    
    # Shortcut
    
    
    | Shortcut | Action |Description |
    | --- | --- | --- |
    | Ctrl + Space|  Completion  | Activates Completion. | 
    | Ctrl + Shift + Space | Signature Helper  |Activates Signature Helper.| 
    | Shift + F12 | Go to Reference  | Move to the selected symbol's reference. | 
    | Shift + Alt + F12 | Find All Reference  |Finds all of the selected symbol's references. | 
    | F2   |  Rename  |Changes the name.| 
    | F12 |   Go to Definition  | Move to Definition.|