Visual Studio 확장프로그램 개발 (3)

이번에는 공식 문서 샘플 중에서 확장프로그램 종류를 선택해서 한번 똑같이 따라해보려고 한다.

 

https://github.com/Microsoft/vscode-extension-samples/tree/main/code-actions-sample

vscode-extension-samples/code-actions-sample at main · microsoft/vscode-extension-samples

 

이 샘플은 code action들을 할 수 있게 하는 샘플이다.

 

Code action은 vscode 에서 quick fixes나 refactoring을 할 때 쓰인다.
refactoring은 코드를 더 읽기 쉽게 재구성하거나 중복 제거, 불필요한 코드 정리 등을 의미함! (https://code.visualstudio.com/docs/editor/refactoring)

 

이 샘플에서는 md(마크다운)파일에서 :) 를 스마일리 이모지로 바꿔주는 코드 액션을 하게 해준다! 귀엽당

예시는 typescript로 되어있지만 나는 javascript를 사용할 예정이라 다 바꿔서 코드를 작성했다.

---

<extension.js>

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
const COMMAND = 'code-actions-sample.command';

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

	context.subscriptions.push(
		vscode.languages.registerCodeActionsProvider('markdown', new Emojizer(), {
			providedCodeActionKinds: Emojizer.providedCodeActionKinds
		})
	);
	
	// const emojiDiagnostics = vscode.languages.createDiagnosticCollection("emoji");
	// context.subscriptions.push(emojiDiagnostics);
	
	// subscribeToDocumentChanges(context, emojiDiagnostics);
	
	// context.subscriptions.push(
	// 	vscode.languages.registerCodeActionsProvider('markdown', new Emojinfo(), {
	// 		providedCodeActionKinds: Emojinfo.providedCodeActionKinds
	// 	})
	// );
	
	context.subscriptions.push(
		vscode.commands.registerCommand(COMMAND, () => vscode.env.openExternal(vscode.Uri.parse('https://unicode.org/emoji/charts-12.0/full-emoji-list.html')))
	);
	
}

/**
 * Provides code actions for converting :) to a smiley emoji.
 */
class Emojizer {
    static get providedCodeActionKinds() {
        return [
            vscode.CodeActionKind.QuickFix
        ];
    }
    
    provideCodeActions(document, range) {
        if (!this.isAtStartOfSmiley(document, range)) {
            return;
        }
        
        const replaceWithSmileyCatFix = this.createFix(document, range, '😺');
        
        const replaceWithSmileyFix = this.createFix(document, range, '😀');
        // Marking a single fix as `preferred` means that users can apply it with a
        // single keyboard shortcut using the `Auto Fix` command.
        replaceWithSmileyFix.isPreferred = true;
        
        const replaceWithSmileyHankyFix = this.createFix(document, range, '💩');
        
        const commandAction = this.createCommand();
        
        return [
            replaceWithSmileyCatFix,
            replaceWithSmileyFix,
            replaceWithSmileyHankyFix,
            commandAction
        ];
    }
    
    isAtStartOfSmiley(document, range) {
        const start = range.start;
        const line = document.lineAt(start.line);
        return line.text[start.character] === ':' && line.text[start.character + 1] === ')';
    }
    
    createFix(document, range, emoji) {
        const fix = new vscode.CodeAction(`Convert to ${emoji}`, vscode.CodeActionKind.QuickFix);
        fix.edit = new vscode.WorkspaceEdit();
        fix.edit.replace(document.uri, new vscode.Range(range.start, range.start.translate(0, 2)), emoji);
        return fix;
    }
    
    createCommand() {
        const action = new vscode.CodeAction('Learn more...', vscode.CodeActionKind.Empty);
        action.command = { command: COMMAND, title: 'Learn more about emojis', tooltip: 'This will open the unicode emoji page.' };
        return action;
    }
}



// This method is called when your extension is deactivated
function deactivate() {}

module.exports = {
	activate,
	deactivate
}

 

 

<package.json>

{
  "name": "test2",
  "displayName": "test2",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.89.1"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onLanguage:markdown"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
  ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.89.0",
    "@types/mocha": "^10.0.6",
    "@types/node": "18.x",
    "eslint": "^8.57.0",
    "typescript": "^5.4.5",
    "@vscode/test-cli": "^0.0.9",
    "@vscode/test-electron": "^2.3.9"
  }
}

 

 

 

F5 눌러서 실행:

새로운 md 파일을 만들어서 테스트 해봤다

 

잘 변함!!!

ㅋㅋㅋ