VS Code の記事一覧

今回は、EmacsからVS Codeに乗り換えて以降開発環境が完全にVS Codeに移行したことを記事にしました。最近愛用しているVS Codeプラグイン「Jumpy」も紹介しておりますので、是非試してみてください。 はじめに こんにちは、GMOインターネット株式会社の斉藤です。以前にブログ記事にも書いたのですが、昨年EmacsからVS Codeに乗り換えました。開発環境をまるっと乗り換えたわけですからそれはもう大きな変化だったわけです。 https://developers.gmo.jp/11041/ 今現在、私自身の開発環境はVS Code一択になって、Emacsは完全に使わなくなってしまいました。良いエディタなのは間違いありませんが、ちょっと寂しいですね。私は最近GMOの仕事ではPHP, JavaScriptなどを、プライベートではGo, Flutter(Dart), Next.jsあたりを触っています。特に後者のような新しい言語やフレームワークへの対応で、EmacsはVS Codeには確実にかないません。ユーザー数が違うからです。そして以前のブログでは、Emacsからの乗り換えに当たって導入したVS Codeのプラグインについて紹介したのですが、今回は最近私が愛用しているVS Codeプラグインを紹介したいと思います。 Jumpy Jumpyはwmaurer氏が開発したVSCodeのカーソル移動を助けてくれるプラグインです。このプラグインを使うと、画面上のどの位置でも2キーストロークで移動することができるようになります。コンセプトはvimのプラグインであるvim-easymotionと似ていますね。 jumpy - Visual Studio Marketplace 以下のGifアニメによる動作説明がわかりやすいです。 (GitHubから引用) 使い方ですが、VSCodeのExtenstionsから「jumpy」で検索してインストールします。 jumpyには行を指定してカーソル移動するJumpy Line Modeと、画面上の単語を指定して移動するJumpy Word Modeモードの2種類があります。使いたいモードと、モードを抜けるときにキーバインドを自分で設定する必要があります。 Word Modeに入るキーバインド { "key": "shift+enter", "command": "extension.jumpy-word", "when": "editorTextFocus" } モードを抜けるキーバインド { "key": "Escape", "command": "extension.jumpy-exit", "when": "editorTextFocus && jumpy.isJumpyMode" } モードに入る/抜けるという考え方は、モードを持っているエディタに慣れていない方にはわかりにくいかもしれません。ただ、VSCodeにはこういった形式のプラグインが多くあるので理解しておくに越したことはないです。 ここまで設定できれば、jumpyが使えるようになります。 残念なことに、日本語テキストだとジャンプポイントが減ってしまいます おわりに エディタのカーソルの移動効率を上げることができれば生産性もあがるので重要です。私がもともとEmacsユーザだったのも、キーバインドを大量に登録してカーソル移動も含めていろいろな機能を少ないキーで呼び出せるようにしたかったからです。そこからすると、画面上のどの位置にでもすぐに飛べるjumpyは優れものです。 ぜひ皆様も使ってみてください。おすすめです。 それではまた次回お目にかかりましょう。

こんにちは、GMOインターネット株式会社の斉藤です。今回はEmacsからVS Codeへの乗り換えについて書きたいと思います。 はじめに 今月は勤め先のお盆休みがあったり、コロナ感染者増で完全在宅勤務への切り替えがあったりでバタバタしている月でした。そしてお盆休み中に自宅の開発環境をM1 Macに移行しました。前からやろうと思っていたのですが、さすがにアーキテクチャ変更を伴う大きな変更になるのでトラブルも予想されます。なので長めのお休みの方にやるのがベターだと判断しました。ステイホームが推奨されていますしちょうど良いですね。 https://twitter.com/hironobu_s/status/1427199287557980160 いろいろトラブルはあったものの、在宅でのお仕事はM1 Mac上で行っています。勤め先からリースされている2018モデルのMacBook Proより全然パフォーマンスは良いですね。 このあたりの乗り換え話はまた機会があれば書こうと思います。 EmacsからVS Codeへ乗り換え 今回は別の乗り換えのお話しです。私は普段Emacsを使ってコードを書いていますが、去年後半から今年に書けてほぼVSCodeへ移行しました。もはやEmacsを使うのは、ターミナル内でちょっとコードを書きたいときくらいになっています。 Emacsから乗り換えるに当たって、数多くの機能拡張のお世話になっています。とくにキーバインドは手に馴染んでいるので今さら変えるのは難しいのですよね。Emacsは独自のキーバーインドを持っており、これが魅力ではあるのですがエディタの乗り換え時には大きな障壁になります。 ちなみに、私は現在以下の機能拡張を利用しています。 Awesome Emacs Keymap https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx vscode-emacs-indent https://marketplace.visualstudio.com/items?itemName=sakapoko.vscode-emacs-indent vscode-emacs-tab https://marketplace.visualstudio.com/items?itemName=garaemon.vscode-emacs-tab Emacs kill-line https://marketplace.visualstudio.com/items?itemName=hiro.emacs-kill-line キーバインドの変更だけでそれなりに多くの拡張を入れていると思います。ただこれでなんとか実用に耐えるキーバーインドを構築することができました。 自作の機能拡張について 一番下のEmacs kill-lineは私が作った機能拡張です。 乗り換えの際に、1つだけ私が常用しているキーバインドで既存のVS Codeの拡張には存在しないものがあったので、仕方なく自前で作りました。 EmacsはCtrl+Kで行を削除したり行の内容をコピーできます。このキーバインドにはkill-whole-lineというオプションがあり、これを非nilにすると行頭でこのキーを叩いたときに改行文字を含めて行全体を削除すると言う挙動になります。これをエミュレートするVS Codeの拡張が存在しなかったのです。 https://ayatakesi.github.io/emacs/24.5/Killing-by-Lines.html 客観的に見て「そんな細かいこと・・・」とは思うのですが、やはり常用しているキーバインドは無くなると非常に困りますし、この拡張は100人くらいインストールされているので、世界にそれだけ困っている人がいたと言うことで・・・。 さいごに VS Codeは機能拡張をTypeScriptで簡単に書けるのが素晴らしいですね。チュートリアルもとてもわかりやすいので、エディタ乗り換えで困っている人は自前で作ってしまっても良いと思います。 Your First Extension | Visual Studio Code Extension API 以前にGo言語向けの機能拡張を作った話もブログに書きましたので、そちらも良かったらご覧ください。 https://developers.gmo.jp/technology/4714 それではまた次回お目にかかりましょう。

こんにちは、GMOインターネット株式会社の斉藤です。本エントリーでは、Goを書くときに便利な"err"という文字列をハイライトする方法について紹介します。 はじめに 僕は普段EmacsでGoを書いているのですが、最近他の言語を書くときはVisual Studio Code(以下VS Code)を利用することが増えてきています。Emacsは最近は老害などと言われがちではありますが、長く使っていてカスタマイズも完全に馴染んでいるのでなかなか乗り換えが難しいんですよね。 そんなEmacsでGoを書くときに私が便利に使っている設定が、"err"という文字列をハイライトするというものです。 go-modeでerrをハイライトしておくと捗る - Qiita もともとは下記のブログを参考にしたものです。"err"という文字列をHighlightしておくとGolangのコードリーディングが捗る Goは例外などの機構が存在せず、エラーはerrやerrをプレフィックスとした名前の変数で受けて処理するのが慣例となっています。そして、以下のようなコードブロックが頻繁に登場します。 if err != nil {return err} なのでerrをハイライトしておくとエラーの箇所が明確になりコードリーディングが便利になるんですね。私はこれを入れないとよくエラーを見落とすので、生産性に直結する大事な設定だったりします。 VS Codeのシンタックスハイライト この設定、残念ながらVS Codeでは設定できません。VS Code正規表現などを使ったコードハイライトをする仕組みを持たないからです。ただVS Codeは拡張機能を簡単に作れるので、それを利用して自前で作りました。 Go err highlighting - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=hiro.go-err-highlighting。 これを使うと上の画像のようになります。いかにも見やすそうでしょう。VS CodeでGoを書いている方はぜひ使ってみてください。 自分で拡張機能を作る さて以下はVS Codeのシンタックスハイライトをカスタマイズしたい人向けの情報です。 Language Extensions Overviewhttps://code.visualstudio.com/api/language-extensions/overview VS Codeのシンタックスハイライトは、実際にはLanguage Extensionと言う名前の拡張機能の一種として実現されています。これにはシンタックスハイライト以外にもインテリセンスによる補完、括弧の対応、コメントの扱いなどが含まれています。 このLanguage Extensionは予約語の管理もしていて、VS Codeがそれに応じて色を付けるようになっています。たとえばifやforなどですね。逆に言うと予約されていない語に色づけするのは無理です。今回の"err"はGoのLanguage Extensionでは予約されていないので、自前で拡張を作る必要があります。 今回は追加したいキーワードがerrでしたので、既存のGoのLanguage Extensionに設定をInjectionするアプローチを取ります。これはオフィシャルガイドにやり方が書いてあります。 Injection grammarshttps://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars 実際の手順は、まずガイドにあるとおり拡張機能のスケルトンを作成します。 Your First Extension | Visual Studio Code Extension APIhttps://code.visualstudio.com/api/get-started/your-first-extension あとはInjection grammarsにあるとおりにハイライトしたい設定を書くだけです。Go err highlightingの場合は以下になります。 vscode-go-err-highlight/injection.json at main · hironobu-s/vscode-go-err-highlighthttps://github.com/hironobu-s/vscode-go-err-highlight/blob/main/syntaxes/injection.json おわりに ちょうどMTGが延期になったりタスクが延期になったりで業務時間の空きができ、これはブログネタにもなりそうだと言うことでエイヤで一気に作り上げてしまいました。 ともかく、これでGoを書くのにもVS Codeを使っていくことができます。EmacsはCUI環境でも使えるのでまだまだ捨てることありませんが、しばらくはVS Codeも併用で開発を進めていくことになりそうです。 それではまた次回お目にかかりましょう。