sassに検索用のコメントを入れるVS Code拡張機能を制作した話

WebVSCODE,業務効率化,VScode拡張機能,sass

sassをお使いのみなさま～、クラス名で検索できないことにお怒りではございませんこと？！

さて、今回はsassに検索用のコメントを入れる拡張機能の制作過程と、 VS Code拡張機能の作り方をざっくりとご紹介したいと思います。

作ったもの

sassのscss記法(かっこを略さない形式)にて、アンパサンド(&を用いて単語をつなぐ書き方)を用いた際に、「&–」「&-」「&_」をクラス名と連結したものをコメントとして挿入する機能です。

これが、

.sample {
  &--work {
    text-align: center;
  }
}

こうなります

.sample {
  //.sample--work
  &--work {
    text-align: center;
  }
}

制作にあたって考慮した点

見切り発車でテストケースが存在しなかったために、初めてパッケージ化してからこの記事を書くまでに何度も修正を加えました。

  • @includeなどのネスト
  • 宣言の中身がない場合
  • 重複コメントを挿入しない
  • メディアクエリなどの必要な重複コメントにプレフィックスをつける
  • ネストが無い場合の配列の参照エラー
  • etc…

厳密なテストを行っていないので実際に使用してからエラーに気づき、都度修正していく形で開発しています。(どんなサービスも作りっぱなしにはできませんね)

修正を含めると、制作にかかったのはおよそ20時間ほどでした。
意外とお手軽です。

今回制作した拡張機能の公開・配布は行っておりませんが、代わりにVSCode拡張機能の作り方についてご紹介しようと思います。

開発環境の作り方

https://code.visualstudio.com/api/get-started/your-first-extension
このページに従ってインストールを進めます。

エラーが出たとき用

【参考】PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法

実行ポリシーをRemoteSigned(発行元の署名がある場合のみ実行)にします。
※このときScopeをProcessにするとプロセスが終わったら自動でRestrictedに戻ります。

インストールが終わったら、早速VS Code APIのリファレンスを見に行きましょう。

VS Code APIとは？

https://code.visualstudio.com/api/references/vscode-api
公式に提供されている、拡張機能を制作するためのAPIです。

これを読んでもよくわからないときは「VSCode　api 　{知りたいやつ}」で調べるといろいろ出てきます。

今回制作に利用したVS Code APIのコード

  • vscode.commands.registerCommand
    package.jsonで設定したコマンドを呼び出します。

  • context.subscriptions.push();
    変数として宣言したコマンドを利用可能にする魔法のコードです。

  • vscode.window.showInformationMessage('Success!’);
    拡張機能を起動した際にメッセージを表示します。

  • vscode.window.activeTextEditor
    テキストカーソルのあるエディターを取得します。

  • vscode.window.activeTextEditor.edit()
    テキストの編集をするメソッドです。
    editor.edit(event => {
    //任意のコード
    });

  • vscode.window.activeTextEditor.document
    エディターの概要を取得します。

  • vscode.window.activeTextEditor.document.languageId
    エディターの言語を取得します。

  • vscode.window.activeTextEditor.document.getText()
    エディターのテキストを取得します。

  • vscode.window.activeTextEditor.document.lineAt(n)
    ※nは任意の数字
    指定した行のテキストを取得します。

  • event.insert(position, string)
    ※eventはイベントオブジェクト
    positionで指定した位置にstringを挿入します。
    直前の行・直後の行に挿入したい場合は「\r\n」もしくは「\n」をstringに結合しておくと改行されます。

  • positionの指定のしかた
    positionコンストラクターを生成します。
    let position = new vscode.Position(line, character);
    ↑このようにしてpositionを引数に渡すのが一番わかりやすいと思います。

    lineには挿入したい行(数字)、characterにはその行の何文字目(数字)を指定します。
    矢印キーでテキストカーソルを動かすイメージ(lineは上下、characterは左右)で挿入箇所の指定ができます。

作成したVS Code拡張機能のインストールのしかた

【参考】VSCode拡張機能をパッケージ化する

「package.json」「README.md」を編集

package.jsonに「publisher (制作者の名前) 」を追記

README.mdを編集(初期のままだとエラーになるようです)

ターミナルからVSCEをダウンロード

> npm install -g vsce

パッケージ化

package.jsonなどがあるフォルダで

> vsce package

すると、フォルダ内に「.vsix」形式のファイルが生成されます。

インストール

VS Codeの拡張機能タブの中に「VSIXからのインストール」があるので、生成されたファイルを読み込むと拡張機能のインストールができます。

みなさまもちょっとした拡張機能で、良いVS Codeライフを～👋

業務効率化は株式会社アルタにおまかせ！

「繰り返しの作業が多すぎて嫌になっちゃうわ」「Excelでの顧客管理めんどくさいな～」

そこのあなた！

巷でよく聞く、「RPA(ロボティック・プロセス・オートメーション)」──── 導入してみませんか？

そんな株式会社アルタがお届けするソリューションが気になる方は…

株式会社アルタ ITサポートをチェック！！

Posted by Neon

この記事を書いた人

Twitter大好き。