VS Code Setup for FiveM Development

Visual Studio Code (VS Code) is one of the most popular code editors for FiveM development. This comprehensive guide will help you set up VS Code with all the essential extensions, configurations, and tools needed for efficient FiveM scripting.

Why VS Code for FiveM?

VS Code offers several advantages for FiveM developers:

• Lightweight and Fast: Quick startup and responsive editing
• Rich Extension Ecosystem: Extensive marketplace with FiveM-specific tools
• Multi-Language Support: Excellent support for Lua, JavaScript, TypeScript, and C#
• Integrated Debugging: Built-in debugger with FiveM support
• Git Integration: Seamless version control workflow
• Customizable: Highly configurable to match your workflow

While FxDK provides an integrated development environment, VS Code offers more flexibility and is preferred by many developers for its extensibility and familiar interface.

Prerequisites

Before setting up VS Code, ensure you have:

• VS Code: Download from code.visualstudio.com 
• FiveM Server: A local or remote FiveM server for testing
• Basic Knowledge: Familiarity with FiveM scripting concepts

Installation

Step 1: Download and Install VS Code

Download VS Code from https://code.visualstudio.com/  # Run the installer and follow the setup
wizard # Make sure to check “Add to PATH” during installation

Ubuntu/Debian
wget -qO- https://packages.microsoft.com/keys/microsoft.asc  | gpg —dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c ‘echo “deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code  stable main” > /etc/apt/sources.list.d/vscode.list’
sudo apt update
sudo apt install code

Download VS Code from https://code.visualstudio.com/  # Or use Homebrew: brew install —cask
visual-studio-code

Step 2: Verify Installation

Open a terminal and verify VS Code is installed:

code —version

1.85.0 c185983a683d14c396952dd432459097bc7f757f x64

Essential Extensions

Install these extensions to enhance your FiveM development experience:

1. Lua Language Support

Extension: sumneko.lua (Lua Language Server)

This extension provides:

• IntelliSense and autocomplete for Lua
• Syntax highlighting
• Error detection
• Code formatting
• Go to definition

Install via VS Code Command Palette (Ctrl+Shift+P / Cmd+Shift+P) # Type: Extensions: Install
Extensions # Search: “Lua” and install “Lua” by sumneko

2. FiveM Lua IntelliSense

Extension: overextended.fivem-lua (FiveM Lua IntelliSense)

Provides autocomplete for FiveM natives, events, and functions:

# Install: “FiveM Lua IntelliSense” by Overextended

3. JavaScript/TypeScript Support

Extension: Built-in (enabled by default)

VS Code includes excellent JavaScript and TypeScript support. For enhanced FiveM development:

Install: “ES7+ React/Redux/React-Native snippets” (optional) # Install: “Prettier - Code
formatter” (recommended)

4. C# Support (Optional)

If you’re developing in C#, install:

# Install: “C# Dev Kit” by Microsoft # Install: “C#” by Microsoft

See C# Basics for more information on C# development.

5. Additional Recommended Extensions

• GitLens: Enhanced Git capabilities
• Error Lens: Inline error highlighting
• Path Intellisense: Autocomplete for file paths
• Auto Rename Tag: Automatically rename paired HTML/XML tags
• Bracket Pair Colorizer: Color matching brackets
• Material Icon Theme: Better file icons
• Prettier: Code formatter for multiple languages

Workspace Configuration

Creating a Workspace

1. Open VS Code
2. File → Open Folder
3. Navigate to your FiveM server’s resources directory or a specific resource folder

Workspace Settings

Create a .vscode/settings.json file in your workspace root:

{
  "files.associations": {
    "fxmanifest.lua": "lua",
    "fxmanifest.json": "json"
  },
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/__pycache__": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "[lua]": {
    "editor.defaultFormatter": "sumneko.lua",
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "files.encoding": "utf8",
  "files.eol": "\n"
}

Lua Language Server Configuration

Create .vscode/settings.json with Lua-specific settings:

{
  "Lua.workspace.library": ["${3rd}/love2d/library", "${workspace}/**"],
  "Lua.runtime.version": "Lua 5.4",
  "Lua.diagnostics.globals": [
    "GetCurrentResourceName",
    "RegisterNetEvent",
    "AddEventHandler",
    "TriggerServerEvent",
    "TriggerClientEvent",
    "TriggerEvent",
    "AddStateBagChangeHandler",
    "SetStateBagValue",
    "GetEntityCoords",
    "GetPlayerPed",
    "CreateThread",
    "Wait",
    "Citizen",
    "exports",
    "GetResourceMetadata"
  ],
  "Lua.completion.enable": true,
  "Lua.completion.keywordSnippet": "Both",
  "Lua.hover.enable": true,
  "Lua.signatureHelp.enable": true
}

FiveM-Specific Configuration

IntelliSense for FiveM Natives

To get autocomplete for FiveM natives, you’ll need to configure the FiveM Lua IntelliSense extension:

1. Install the overextended.fivem-lua extension
2. The extension automatically detects FiveM resources
3. For manual configuration, add to .vscode/settings.json:

{
  "fivem-lua.api": {
    "natives": true,
    "events": true,
    "exports": true
  }
}

Resource Structure Recognition

VS Code can recognize FiveM resource structure. Create a .vscode/settings.json:

{
  "files.associations": {
    "fxmanifest.lua": "lua",
    "fxmanifest.json": "json",
    "*.lua": "lua",
    "*.js": "javascript",
    "*.ts": "typescript"
  },
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.fxdk": true
  }
}

Debugging Configuration

Setting Up Debugging

Create .vscode/launch.json for debugging FiveM resources:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to FiveM Server",
      "type": "lua",
      "request": "attach",
      "port": 9223,
      "sourceMaps": true
    },
    {
      "name": "Debug Lua Script",
      "type": "lua",
      "request": "launch",
      "program": "${file}",
      "cwd": "${workspaceFolder}"
    }
  ]
}

Remote Debugging

For remote debugging (connecting to a server on another machine):

1. Enable debug mode in your FiveM server
2. Configure port forwarding if needed
3. Update launch.json with the correct host and port

Code Snippets

Creating Custom Snippets

Create .vscode/lua.code-snippets for FiveM-specific snippets:

{
  "FiveM Server Event": {
    "prefix": "fmserver",
    "body": [
      "RegisterNetEvent('${1:event:name}')",
      "AddEventHandler('${1:event:name}', function(${2:source})",
      "    ${3:-- Server-side code}",
      "end)"
    ],
    "description": "FiveM server event handler"
  },
  "FiveM Client Event": {
    "prefix": "fmclient",
    "body": [
      "RegisterNetEvent('${1:event:name}')",
      "AddEventHandler('${1:event:name}', function(${2:args})",
      "    ${3:-- Client-side code}",
      "end)"
    ],
    "description": "FiveM client event handler"
  },
  "FiveM Thread": {
    "prefix": "fmthread",
    "body": [
      "CreateThread(function()",
      "    while true do",
      "        ${1:-- Thread code}",
      "        Wait(${2:0})",
      "    end",
      "end)"
    ],
    "description": "FiveM thread"
  },
  "FiveM Export": {
    "prefix": "fmexport",
    "body": [
      "exports('${1:exportName}', function(${2:args})",
      "    ${3:-- Export code}",
      "    return ${4:result}",
      "end)"
    ],
    "description": "FiveM export function"
  },
  "fxmanifest.lua": {
    "prefix": "fxmanifest",
    "body": [
      "fx_version 'cerulean'",
      "game 'gta5'",
      "",
      "author '${1:Your Name}'",
      "description '${2:Resource description}'",
      "version '${3:1.0.0}'",
      "",
      "server_scripts {",
      "    '${4:server/*.lua}'",
      "}",
      "",
      "client_scripts {",
      "    '${5:client/*.lua}'",
      "}",
      "",
      "shared_scripts {",
      "    '${6:config.lua}'",
      "}"
    ],
    "description": "FiveM fxmanifest.lua template"
  }
}

Best Practices

File Organization

Organize your resource files logically:

my-resource/
├── fxmanifest.lua
├── config.lua
├── server/
│   ├── main.lua
│   └── database.lua
├── client/
│   ├── main.lua
│   └── ui.lua
├── html/
│   ├── index.html
│   ├── style.css
│   └── script.js
└── locales/
    ├── en.lua
    └── es.lua

Version Control

Use Git for version control. Create a .gitignore:

# VS Code
.vscode/
*.code-workspace

# Dependencies
node_modules/
package-lock.json

# Build outputs
dist/
build/

# OS files
.DS_Store
Thumbs.db

# FiveM
__resource.lua

Code Formatting

Configure Prettier for consistent formatting:

.prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

Integration with FxDK

VS Code can work alongside FxDK:

1. Use FxDK for testing and debugging
2. Use VS Code for writing code
3. FxDK will detect external file changes
4. Both editors can work on the same project

Recommended Workflow

1. Development: Write code in VS Code
2. Testing: Use FxDK’s hot-reload feature
3. Debugging: Use VS Code’s debugger or FxDK’s console
4. Version Control: Commit changes from VS Code

Troubleshooting

IntelliSense Not Working

If autocomplete isn’t working:

1. Check Extension: Ensure Lua Language Server is installed and enabled
2. Restart Language Server: Ctrl+Shift+P → “Lua: Restart Language Server”
3. Check Settings: Verify .vscode/settings.json configuration
4. Clear Cache: Delete .vscode folder and reconfigure

Debugging Not Connecting

If debugging fails to connect:

1. Check Port: Verify the debug port (default: 9223)
2. Firewall: Ensure firewall allows the connection
3. Server Config: Enable debug mode in server configuration
4. Extension: Ensure debugger extension is installed

Performance Issues

If VS Code is slow:

1. Disable Unused Extensions: Remove extensions you don’t use
2. Exclude Folders: Add large folders to files.exclude
3. Disable File Watchers: Reduce file watching in settings
4. Increase Memory: Adjust files.watcherExclude settings

Advanced Configuration

Multi-Root Workspace

For managing multiple resources:

1. File → Add Folder to Workspace
2. Add all your resource folders
3. Configure settings per folder if needed

Task Automation

Create .vscode/tasks.json for automation:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Restart Resource",
      "type": "shell",
      "command": "echo 'restart ${input:resourceName}'",
      "problemMatcher": []
    },
    {
      "label": "Build NUI",
      "type": "shell",
      "command": "npm run build",
      "options": {
        "cwd": "${workspaceFolder}/html"
      },
      "problemMatcher": []
    }
  ]
}

Keybindings

Customize keybindings in .vscode/keybindings.json:

[
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Restart Resource"
  }
]

Next Steps

Now that you have VS Code configured:

1. Start Scripting: Check out Lua Basics or JavaScript Basics
2. Learn Resource Lifecycle: Understand how resources work
3. Explore Events: Learn about FiveM events
4. Create Your First Resource: Follow scripting examples
5. Set Up NUI: Learn to create user interfaces

Related Resources

• FxDK Guide - Official FiveM development kit
• Scripting Overview - Introduction to FiveM scripting
• Resource Lifecycle - Understanding resources
• Lua Basics - Lua programming fundamentals
• JavaScript Basics - JavaScript for FiveM
• Code Snippets - Ready-to-use code snippets

Summary

You’ve now set up VS Code for FiveM development with:

✅ VS Code installed and configured
✅ Essential extensions for Lua, JavaScript, and FiveM
✅ Workspace settings optimized for FiveM resources
✅ Debugging configuration
✅ Custom code snippets
✅ Best practices for file organization

VS Code is now ready for efficient FiveM development. Start creating your resources and take advantage of IntelliSense, debugging, and the rich extension ecosystem!