VSCode에서 IntelliJ Diff를 실행시키는 Extension 만들기

SSEN
SSEN
Sep 3, 2018 · 5 min read

VSCode의 장점 한 가지는 IntelliJ처럼 Too Much 하지 않다는 것이다. 그리고, 반대로 IntelliJ에서 잘 쓰던 기능들이 없는 경우도 있고…

IntelliJ의 Diff 기능 중 Directory Diff 기능은 어찌 대체할 방법이 없어서, idea diff Command Line 기능을 VSCode Extension으로 연결시키는 중이다.

{  
...
"activationEvents": [
"onCommand:ssenkit.ideaDiffDirectories"
],
"main": "./out/extension",
"contributes": {
"commands": [
{
"command": "ssenkit.ideaDiffDirectories",
"title": "Compare Directories with idea diff"
}
],
"menus": {
"explorer/context": [
{
"when": "explorerResourceIsFolder",
"command": "ssenkit.ideaDiffDirectories",
"title": "Compare Directories with idea diff",
"group": "z_commands"
}
]
}
},
...
}

우선 package.json 파일에 위와 같은 정의를 해준다. VSCode Extension의 Contribution Point는 모두 package.json에 정의하게 된다.

package.json 파일을 수정하면 이제 메뉴 자체는 보이게 된다. (실행은 되지 않겠지만)

중요한게 contributes.menus.explorer/context 에만 등록하면 되는게 아니라, contributes.commandsactivationEvents 에 등록해줘야 한다는거다. (activationEvents를 보질 못해서 한참 헤맸었다.)

import * as vscode from 'vscode';
import * as fs from 'fs';
export function activate(context: vscode.ExtensionContext) {
const ideaDiffDirectories = vscode.commands.registerCommand('ssenkit.ideaDiffDirectories', (main: vscode.Uri, selected: vscode.Uri[]) => {
new Promise<[vscode.Uri, vscode.Uri]>((resolve, reject) => {
if (selected.length === 1) {
vscode.window.showOpenDialog({
canSelectFiles: false,
canSelectFolders: true,
canSelectMany: false
}).then(uri => {
if (uri) {
resolve([selected[0], uri[0]]);
} else {
reject(new Error('Failed folder open.'));
}
});
} else if (selected.length === 2 && selected.every(s => fs.statSync(s.fsPath).isDirectory())) {
resolve([selected[0], selected[1]]);
} else {
reject(new Error('Select one or two folder.'));
}
})
.then(([dir1, dir2]) => {
const term: vscode.Terminal = vscode.window.terminals.find(term => term.name === 'idea diff') || vscode.window.createTerminal('idea diff');
term.show();
term.sendText(`idea diff "${dir1.fsPath}" "${dir2.fsPath}"`);
})
.catch(err => {
vscode.window.showInformationMessage(`idea diff failed: ${err.toString()}`);
});
});
context.subscriptions.push(
ideaDiffDirectories,
);
}
export function deactivate() {
}

Extension activate() 에서 Command를 등록 시켜준다.

별다른 기능은 없다.

  1. VSCode Explorer에서 Diff 대상이 될 Directory들을 선택하고 실행하면
  2. VSCode Terminal 창을 열어서 idea diff /dir1 /dir2 를 실행한다

아쉬운대로 VSCode의 부족한 Diff 기능을 IntelliJ로 보완시켜서 사용할 수 있었다. 좀 더 다듬어서 Extension Store에 배포까지 시켜봐야겠다.


VSCode Extension 개발을 잡은지 몇 일 안되었는데, 일단 Shell Command의 실행까지는 별 무리없이 진행했다. 뭐… Node.js에 Shell Command 실행이면 못만들게 별로 없을 것 같긴하다.

아주 좋다~

SSEN

Written by

SSEN

https://github.com/iamssen

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade