Visual Studio Code の拡張機能を作ってみる(2)

今日は範囲選択した部分を変換してクリップボードにコピーしてみる。


前回の続きです。

チュートリアルを見つつ、自分の作りたいものに使えそうな部分は取り込んでいきます。今日は範囲選択した部分のテキストを取得して、エスケープ処理して、クリップボードにコピーしてみよう。ほとんどゴールだけど∠( 'ω')／

「HTMLの山括弧のエスケープめんどくさいね～」という話があったんですけど、練習題材にちょうどいいなと思ったので、これをVSCの拡張機能で作ってみようと思います。

範囲選択

チュートリアルに良い感じのものがのってました。こういう感じで、名前わりと直感的ですね。

let editor = vscode.window.activeTextEditor;
let selection = editor.selection;
let text = editor.document.getText(selection);

クリップボード操作

さらっと公式ドキュメントを見てもそれっぽいのが見つからなかったので検索してみると、クリップボードの操作には別のnpmパッケージを呼び出す必要があるようです。詳しくは以下のQiita記事を参照ください。


というわけでnpmパッケージを使います。今回はclipboardyを使います。

npm install clipboardy

clipboardyもまた直感的な関数名がつけられています。クリップボードに文字列を書き込むのはこんな感じ。とてもラクチン。

import * as cb from 'clipboardy';

var text = "hoge";
cb.writeSync(text);

エスケープ処理

ここは普通にjavascriptと同じく、replaceメソッドが使えます。全置換したいので正規表現で置き換えます。

text = text.replace(/置換前の文字/g, '置換後の文字');

最後に

ええやん

ここまでの生成物はGitHubに上げました。初プロジェクト。何かアラートが出てるのであとでよく読みます。

solaris0616/escape-html-bracket

Contribute to escape-html-bracket development by creating an account on GitHub.

余談

• GitHubのページでブログカード化のブックマークレットが使えなかったので乗り換えた。
• より高度なものを見つけてしまった。思いつくものは調べれば出てくるよねえ。