リンク
この記事は、次の記事と相互リンクです。
Visual Studio Code を外部エディタから開く。 - Qiita
はじめに
Visual Studio Code (VSCode) をIDEの外部エディタとして使用するだけでなく、VSCodeから他のエディタを使えたら、ツール間の連携がとれていいなと思ったので調べました。
かなりややこしく、かつ、他の方に役に立つと思うのでまとめておきます。
まだ調べきれていないことや、コマンド入力欄の正式な名前などがわからない所があるので、何かご存知の事あればコメントをください。
環境
環境はWindowsです。
VSCodeのインストールはされているという前提です。
コマンドラインで実行した現在(最新)のバージョンは次の通りです。
> code -v
1.41.0
9579eda04fdb3a9bba2750f15193e5fafe16b959
x64
codeコマンドで起動できるのはかっこいいです。
概要
次の2つの方法があります。
- tasks.json を利用して、VSCodeから外部エディタを開く
- 拡張機能 Open in Editor を利用して、VSCodeから外部エディタを開く
tasks.json を使う方法は、外部エディタの起動のために[Ctrl+Pキー]を押してコマンド入力欄(正式名称不明)に、[task editor]などと入力する手間があります。また、tasks.jsonは編集しているファイル群のあるフォルダだけで設定が有効になるので、プロジェクトごとにtasks.jsonファイルを配置が必要です。tasks.jsonで定義したショートカットキーへの割当方法はよくわかりません。
拡張機能のOpen in Editor は、[Alt+Shift+Eキー]で外部エディタを起動することができます。結構便利です。
それぞれの機能を説明していきます。
tasks.json を利用して、VSCodeから外部エディタを開く
tasks.jsonの作成
まず、tasks.jsonを作成します。
VSCodeは、例えば、C:\Temp\Test\A.js のファイルを編集したり実行する際には、Testフォルダをプロジェクトフォルダとして認識します。
このプロジェクトフォルダのVSCodeの設定は、
C:\Temp\Test..vscode
に入っており、tasks.jsonは
C:\Temp\Test..vscode\tasks.json
に配置されることになります。
この場所に自分で作成してもいいのですが、VSCodeでも作成できるのでそちらを行います。
C:\Temp\Test\A.js
を、開いているとします。(jsファイルではなく、テキストファイルでもなんでもよいです)
F1キーで、入力欄を表示します。
>task bui
と入力すると、[Tasks: Run Build Task]、が選択されます。
実行すると、「ビルドタスクが構成されていません」みたいなメッセージがでるので「ビルドタスクを構成します」のボタンが表示されているので押します。
ここで、いろいろリストがでます(gulp|grunt|npm|typescript etc..)。一番下に表示される[Others 任意の外部コマンドを...]を、選択します。
そうすると、ファイルと同階層に、[.vscode\tasks.json]ファイルが作成されます。
※また、[.vscode\tasks.json]ファイルを作るのは、
>configure task runner
こちらのコマンドでもよいようです。こちらもリストが表示されるので、[Others 任意の外部コマンドを...]を選択してください。
次の場所にファイルが作成されます。
このファイルを編集することで、taskコマンドを拡張することができます。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "echo",
"isShellCommand": true,
"args": ["Hello World"],
"showOutput": "always"
}
外部エディタを定義する tasks.json の設定
tasks.json を次のようにします。
これは、VSCodeを使っても、エディタを使って編集してもいいでしょう。
{
"version": "0.1.0",
"command": "cmd",
//あるいは "command": "cmd.exe",
"isShellCommand": true,
"showOutput": "always",
"args": ["/C"],
"tasks": [
{
"taskName": "editor",
"suppressTaskName": true,
"args": [ "\"C:\\Program Files (x86)\\EmEditor\\EmEditor.exe\" /l ${lineNumber} ${file}" ],
"showOutput": "never"
},
{
"taskName": "test",
"suppressTaskName": true,
"args": [ "echo Hello World! " ],
"showOutput": "always"
}
]
}
taskName として、editor と test を登録してみています。
これを真似して書いてもらえれば、いくつでもタスクを増やすことができます。
今回使うのは、"taskName": "editor", の所だけです。
このように書くことで、VSCode の機能が拡張されます。
ダブルクォーテーションや、パス区切り記号を間違えないように注意して設定してください。
VSCode から動作を確認する。
VSCode に戻り、C:\Temp\Test\A.js を開いた状態にして
[Ctrl + P キー]を押してください。F1キーをおした時と同じ入力欄が出ます。
(コマンド入力モードか、そうでないか、が違いがあるようです。)
そこで、
task editor
と入力、Enter を押すと、外部エディタとしてEmEditorが起動します。
VSCodeで編集しているカーソル(キャレット)のある行が、EmEditor でも開くようになります。
拡張機能 Open in Editor を利用して、VSCodeから外部エディタを開く
拡張機能 Open in Editor を使うと、わざわざ [tasks …]とか入力しなくてもショートカットキーでエディタが開けるので、毎回開くファイルごとフォルダごとにtasks.jsonを編集して外部エディタを開く設定をするよりも便利です。
インストール
Open in editor 拡張機能のインストール手順です。
F1キーを押して、コマンド入力欄を出し
>install
と入力すると、いくつかコマンドが出て来るので[Extensions: Install]を選んでください。拡張機能欄が表示されます。
[open in editor]
で検索すると、open in editor 拡張を選択することができるので、[インストール]を押してインストールしてください。
しばらくすると、[インストール]ボタンが、[再読み込む]ボタン(む？)に変わるので押してください。ダイアログがでて、[ウィンドウの再読み込み]ボタンを押します。これは、VSCodeの内部の枠だけが再起動されるような機能になっています。
設定
Open in Editor の設定は、VSCodeの普通の設定で行います。
-
メニューの[ファイル][基本設定][設定]を選択
-
表示される、[settinngs.json]を下にスクロールすると、
-
Open in External Editor configuration が現れるので中身を展開してみる。
-
次の2つの設定を行う
"alt-editor.binary": "C:\\Program Files (x86)\\EmEditor\\EmEditor.exe",
"alt-editor.args": "/l {line} {filename}"
動作確認
VSCodeでファイルを見ている時に、[Alt+Shift+Eキー]を押すと、EmEditorが起動します。
VSCodeで編集しているカーソル(キャレット)のある行が、EmEditor でも開くようになります。
参考にした記事
- 特集：Visual Studio Code早分かりガイド：Visual Studio Codeの使い勝手をよくするツール (2/5) - ＠IT
- Visual Studio Code: Task 機能に複数の任意のコマンドを簡単に仕込む方法 - Qiita
- Visual Studio Codeのtasks.jsonメモ - レンガ積みのブログ
とても参考になりました。ありがとうございます。