monaco-editorでキーボードショートカットを設定する

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

// monacoRefはmonaco-editorのオブジェクト

const KM = monaco.KeyMod;
const KC = monaco.KeyCode;
monacoRef.addCommand(KM.CtrlCmd | KC.KeyS, () => save());

function save() {
  // 保存処理
}

関連記事

• AjvでAPIのレスポンスの型チェックを行う

  TypeScript fetchの共通処理を実装するでfetchの共通処理を作成しましたが、これはAPIからのレスポンスの形式があっている前提で処理を行っています。例えば以下はAPIのレスポンスの型は...

  ---

• React useEffectで無限ループが発生するときに確認すること

  ReactのuseEffectを利用したときに無限ループが発生してしまうことがあります。特に注意したいのが、ESLintのreact-hooks/exhaustive-depsで表示された警告をUpd...

  ---

• React 関数コンポーネントにプロパティを設定する

  React+TypeScriptで作成した関数コンポーネントにプロパティを設定する方法を紹介します。以下は送信ボタンのコンポーネントを作成しています。isSubmittingというプロパティを用意して...

  ---

• React react-router-domの基本的な使い方

  React+TypeScriptのプロジェクトにreact-router-domを導入してSPAのアプリケーションを作成する方法を紹介します。まずはreact-router-domのパッケージをインス...

  ---

• react-router-dom ページごとにファイルを分割する

  react-router-domでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そ...

  ---

• react-router-domでプログラムから画面遷移を行う

  react-router-domでプログラムから画面遷移を行う方法を紹介します。history.psuh(遷移先URL)の形式で実行すると、画面遷移を行えます。historyはreact-router...

  ---

• react-router-dom ログイン認証の仕組みを実装する

  React+react-router-dom+TypeScriptでログイン認証の仕組みを実装する方法を紹介します。以下の仕様で実装します。未ログイン時ログイン時まずはログインページとトップページのル...

  ---

• React RecoilでグローバルなStateを作成する

  React+TypeScriptの環境で、Recoilを使用して、グローバルな状態State（グローバル変数）を作成します。React createContextでグローバルなStateを作成するでc...

  ---

• React 選択した画像ファイルを画面に表示する

  React+TypeScriptの環境で、選択した画像ファイルを画面に表示するプレビュー機能を実装します。React クリップボードにコピーしたファイルを貼り付けるで作成したコンポーネントに対して修正...

  ---

• React Hook Form + TypeScriptで共通のコントロールを作成する

  React Hook Form+TypeScriptの環境で、共通のコントロールコンポーネントを作成します。TypeScriptでフィールド名の型チェックが行われるように作成します。ここで紹介する方法...

  ---