SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeをプログラミングエディタとして強化しよう! 便利な設定や拡張機能を紹介

開発用エディタのド定番「VSCode」を使いこなそう 第6回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 第6回は、VSCodeをプログラミングのためのエディタとして使うときに便利な設定や、注目のPolyglot Notebooksを含むお勧めの拡張機能を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。

対象読者

  • テキストエディタメインで開発してきた方
  • Visual Studioより軽い環境が欲しいと考えている方
  • Visual Sudio Codeをもっと使いこなしたい方

必要な環境

 本記事の内容は、以下の環境で動作を確認しています。

  • macOS Ventura 13.4.1
  • Visual Studio Code 1.80

プログラミングに便利な設定5選

 VSCodeの基本的な設定は第2回で紹介しました。ここでは、そこでは取り上げなかったプログラミング(コーディング作業)を行う際に便利と思われる設定をいくつかピックアップして紹介します。なお、それぞれの設定項目は、アイコンをクリックして表示されるメニューから[設定]を選択し(ショートカットキーは[Command]+[,]/[Ctrl]+[,])、検索窓に項目名(一部でも可)を入力すると簡単に見つけることができます。

開いたファイルの文字エンコーディングを自動判別(Files:Auto Guess Encoding)

 開くファイルの文字コードエンコーディングを自動で推測するようにします。デフォルトはオフです。昨今では、プログラミング言語のソースファイルなどはUTF-8であることが多いのですが、ちょっと前の主流であったShift JISやEUC-JP(Extended UNIX Code Japanese)で記述されたソースファイルを扱う機会が多いのであれば、Files:Auto Guess Encodingの設定をオン(true)にしておくとよいでしょう。

 図1は、古いC++ソースファイル(Shift JIS)を開いた例です。文字エンコーディングの欄が「Shift JIS」になっていて、日本語のコメントも文字化けしていないことが確認できます。

図1:文字エンコーディングが自動判別された例
図1:文字エンコーディングが自動判別された例

 なお、オフにしておくと次で紹介するFiles:Encodingの設定が採用されます。また、プログラミング言語ごとに自動判別の有無を設定することも可能です。

既定で使用する文字エンコーディングの設定(Files:Encoding)

 新規にファイルを作成するとき、およびファイルを開くときに使用する既定の文字エンコーディングを指定します。デフォルトは、「UTF-8」です。通常はこれで問題ありませんが、作業内容に応じてBOM付きのUTF-8としたり、Shift JISとしたりしたい場合には、この設定を変更するとあとあとで変更する手間が省けて便利でしょう。

 図2は、規定の文字エンコーディングをBOM付きのUTF-8に変更後、ファイルを新規作成した例です。

図2:指定の文字エンコードでファイルが作成された例
図2:指定の文字エンコードでファイルが作成された例

 この設定は、上記のFiles: Auto Guess Encodingがオフの場合に優先して採用されます。また、プログラミング言語ごとに既定の文字エンコーディングを設定することも可能です。

ターミナルで使用するフォントとサイズの設定(Terminal>Integrated:Font Family、Terminal>Integrated:Font Size)

 エディターで使用するフォントとサイズの設定については、第2回で紹介しました。こちらは、ターミナルで使用するフォントとサイズの設定です。エディターのフォントサイズを大きくして見やすくしたが、ターミナルの文字はそのままなので小さかったと思ったら、変更を検討すると良いでしょう。ターミナルに使用されるフォントファミリは、エディターと同じものを使用するのが既定となっています。サイズについては連動していないので、適切なサイズを設定しておきましょう。

 図3は、ターミナルのフォントを「Courier New」に変更し、サイズも16ピクセルと少し大きくしてみた例です。ここでは紹介しませんでしたが、フォントウェイト(太さ)の設定も可能です。

図3:ターミナルのフォントを変更した例
図3:ターミナルのフォントを変更した例

カッコのカラーリング表示の設定(Editor>Bracket Pair Colorization、Editor>Language:Colorized Bracket Pairs)

 VSCodeでは、パーレンやブラケットなどのカッコ類のカラーリング表示が既定で有効になっています。組となるカッコ類がレベルに応じて異なった色で表示されるので、カッコの対応が分かりやすくなります。以前は拡張機能で実現していたこの機能も、既定で利用できるので便利になりました。とはいえ、カラーリングの方法はそれぞれで異なるので、拡張機能をそのまま使い続けたいときや、そもそもカラーリングが不要な人もいると思うので、そのようなときには既定のカラーリング機能を無効にしましょう。Editor › Bracket Pair Colorizationをfalseに設定すると無効になります。

 図4は、カッコのカラーリング表示をオフにした例です。

図4:カッコのカラーリング表示をオフにした例
図4:カッコのカラーリング表示をオフにした例

 既定のカラーリング機能では、言語ごとの有効/無効の設定も可能です。Editor>Language:Colorized Bracket Pairsから、settings.jsonを直接編集する形で設定します。このとき、Editor>Bracket Pair Colorizationの設定は無効にして、有効にしたい言語を指定するホワイトリスト方式で設定します。言語が複数ある場合には同様の設定をカンマで区切って繰り返します。

リスト:settings.json
"editor.bracketPairColorization.enabled": false,
"editor.language.colorizedBracketPairs": [
    "[javascript]": {
        "editor.bracketPairColorization.enabled": true
    }
]

コーディングで一般的でない文字のハイライト表示(Editor>Unicode Highlight)

 日本語における全角カナや漢字などを識別子の一部に使用することを受け入れるプログラミング言語は多いのですが、こと全角の空白や記号類についてはそれを空白や記号とは見なさないのが普通のようです。つまり、全角の空白は半角の空白とは扱えないし、全角の記号も同様というわけです。これによって、ついうっかり全角の空白をタブ代わりに入れてしまったり、カッコを全角で入力してしまったりして構文エラーに悩む、という症状を多く見てきました。

 これを受けてか、VSCode 1.63から、Unicode Highlight(Unicodeの強調表示)という機能が追加され、コーディングにおいて一般的でない文字を強調表示できるようになりました。この機能は、本来はUnicode制御文字を使ったなりすまし攻撃に対抗するためのものです。なので、できるだけ既定のまま(強調表示される)使うのが望ましいのですが、これが煩わしい場合には必要に応じてオフにするなど設定変更しましょう。

 図5は、Unicode Highlightによる強調表示の例です。

図5:Unicode Highlightによる強調表示の例
図5:Unicode Highlightによる強調表示の例

 Unicode Highlightでは、表1の設定が可能です。なお、設定名のUnicode Highlightは、字種の判定をUnicodeベースで行うところから来ているようです。

表1:Editor>Unicode Highlightの設定項目
設定 概要
Ambiguous Characters 基本のASCII文字(U+0020~U+007Eの文字、タブ、改行、行頭復帰)と混用される可能性のある文字を強調表示するか
Include Comments コメント内の文字を対象にするか
Include Strings 文字列内の文字を対象にするか
Invisible Characters 不可視あるいは幅のない文字を強調表示するか(全角スペースなど)
Non Basic ASCII 基本(上記参照)以外のすべてのASCII文字を強調表示するか

 混用される可能性のある文字とは、例えば全角の感嘆符(!)やブラケット([])です。不可視あるいは幅のない文字とは、例えば全角スペースやUnicode制御文字などです。Include CommentsとNon Basic ASCIIは、既定がinUntrustedWorkspaceとなっていて、信頼されていないワークスペース内で有効になります。他の設定のようにtrueとfalseで明示的な指定も可能です。

次のページ
プログラミングに便利な拡張機能

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook <個人紹介> WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18224 2023/09/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング