monaco-vim
Advanced tools
Vim keybindings for monaco-editor demo
npm install monaco-vim
This package will only work when bundled using webpack/browserify or using AMD. Including globally
is not possible due to the use of an internal dependency of monaco-editor which is not exposed in
the API. Loading 'monaco' globally is also not possible as you'll have to use its loader.js file.
If you are using that, then there will be no problem. See AMD.
import { initVimMode } from 'monaco-vim';
const vimMode = initVimMode(editor, document.getElementById('my-statusbar'))
Here, editor is initialized instance of monaco editor and the 2nd argument should be the node where you would like to place/show the VIM status info.
To remove the attached VIM bindings, call
vimMode.dispose();
If you would like a particular keypress to not be handled by this extension, add
your onKeyDown handler before initializing monaco-vim and call
preventDefault() on it. monaco-vim will ignore such events and won't do
anything. This can be useful if you want to handle events like running code on
CTRL/CMD+Enter which otherwise would have been eaten up by monaco-vim.
(Available from v0.0.14 onwards).
If you are following the official guide and integrating the AMD version of monaco-editor, you can follow this -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<div id="status"></div>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({
paths: {
'vs': 'https://unpkg.com/monaco-editor/min/vs',
'monaco-vim': 'https://unpkg.com/monaco-vim/dist/monaco-vim',
}
});
require(['vs/editor/editor.main', 'monaco-vim'], function(a, MonacoVim) {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
var statusNode = document.getElementById('status');
var vimMode = MonacoVim.initVimMode(editor, statusNode);
// remove vim mode by calling
// vimMode.dispose();
});
</script>
</body>
</html>
See demo.js for full usage.
If you would like to customize the statusbar or provide your own implementation, see initVimMode's implementation in src/index.js.
Actual vim implementation can be imported as:
import { VimMode } from 'monaco-vim';
// VimMode.Vim.defineEx(name, shorthand, callback);
VimMode.Vim.defineEx('write', 'w', function() {
// your own implementation on what you want to do when :w is pressed
localStorage.setItem('editorvalue', editor.getValue());
});
For advanced usage, refer codemirror. CodeMirror.Vim is available as VimMode.Vim;
This implementaion of VIM is a layer between Codemirror's VIM keybindings and monaco. There may be issues in some of the keybindings, especially those that expect extra input like the Ex commands or search/replace. If you encounter such bugs, create a new issue. PRs to resolve those are welcome too.
FAQs
Vim keybindings for monaco-editor
The npm package monaco-vim receives a total of 16,402 weekly downloads. As such, monaco-vim popularity was classified as popular.
We found that monaco-vim demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.