mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 07:00:11 +01:00
75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
# Monaco Editor ESM Localization Sample
|
|
|
|
This sample demonstrates how to use localization with the Monaco Editor ESM version.
|
|
|
|
## Features
|
|
|
|
- Shows how to import language files before importing Monaco Editor
|
|
- Demonstrates German localization of the Monaco Editor UI
|
|
- Includes examples of localized context menus, command palette, and other UI elements
|
|
- Provides a reference for implementing other languages
|
|
|
|
## How to Run
|
|
|
|
1. Navigate to the root of the monaco-editor repository
|
|
2. Install dependencies: `npm install`
|
|
3. Build the sample: `cd samples/browser-esm-localized && npm run build`
|
|
4. Open `index.html` in your browser
|
|
|
|
## How it Works
|
|
|
|
The key to ESM localization is importing the language file **before** importing the main Monaco Editor module:
|
|
|
|
```javascript
|
|
// Import German localization first
|
|
import 'monaco-editor/esm/nls.messages.de.js';
|
|
// Then import Monaco Editor
|
|
import * as monaco from 'monaco-editor';
|
|
```
|
|
|
|
The language file sets up global variables that Monaco Editor uses for localization:
|
|
|
|
- `globalThis._VSCODE_NLS_MESSAGES` - Contains the translated strings
|
|
- `globalThis._VSCODE_NLS_LANGUAGE` - Contains the language code
|
|
|
|
## Testing Localization
|
|
|
|
Once the sample is running, you can test the localization by:
|
|
|
|
1. **Right-clicking** in the editor to see the German context menu
|
|
2. **Pressing F1** to open the command palette in German
|
|
3. **Using Ctrl+F** to open the search box with German labels
|
|
4. **Checking error messages** and tooltips in German
|
|
|
|
## Available Languages
|
|
|
|
The following language files are available:
|
|
|
|
- `nls.messages.de.js` - German
|
|
- `nls.messages.es.js` - Spanish
|
|
- `nls.messages.fr.js` - French
|
|
- `nls.messages.it.js` - Italian
|
|
- `nls.messages.ja.js` - Japanese
|
|
- `nls.messages.ko.js` - Korean
|
|
- `nls.messages.zh-cn.js` - Chinese Simplified
|
|
- `nls.messages.zh-tw.js` - Chinese Traditional
|
|
|
|
## Switching Languages
|
|
|
|
To test different languages, modify the import statement in `index.js`:
|
|
|
|
```javascript
|
|
// For French
|
|
import 'monaco-editor/esm/nls.messages.fr.js';
|
|
|
|
// For Spanish
|
|
import 'monaco-editor/esm/nls.messages.es.js';
|
|
|
|
// etc.
|
|
```
|
|
|
|
Then rebuild and reload the page.
|
|
|
|
## Dynamic Language Loading
|
|
|
|
For a more advanced implementation that loads languages dynamically, see the documentation in `docs/integrate-esm.md`.
|