SHOEISHA iD

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

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

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

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

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

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

プログラミングに便利な拡張機能

 ここでは、プログラミング作業において便利度がアップする拡張機能をいくつか紹介します。拡張機能の探し方やインストール方法については、連載第3回を参照してください。また、settings.jsonを直接編集する場合のファイルの置き場所については、第2回を参照してください。

コードを手軽に実行 ──Code Runner

 C++やRustなどでは、ソースファイルの作成から実行までにコンパイル作業が必要で、それをいちいちターミナルでコマンドを入力して行うのも面倒なものです。Jun HanによるCode Runner(formulahendry.code-runner)をインストールすると、コマンドを入力することなくコンパイル、実行までを行ってくれて効率的に作業できるようになります(Code-Runnerというよく似た名前の拡張機能もあるので注意しましょう)。C、C++、Java、JavaScript、PHP、Python、Perlをはじめとして非常に多くのプログラミング言語に対応しています。

 なお、コンパイルや実行のための環境は、利用したいプログラミング言語に合わせて構築されており、パスも通っていてコマンドが実行できるようになっている必要があります。これは、Code Runnerは開いているファイルの種類に応じて、コマンドをターミナル等で実行する機能しか持っていないからです。

 図6は、簡単なCプログラム(Hello, world!!)をCode Runnerで実行してみた例です。コンパイルと実行は、コンテキストメニューから[Run Code]を選択するか、[Control]+[Option]+[N]/[Ctrl]+[Alt]+[N]を入力します。

図6:Code Runnerによるコンパイルと実行の例
図6:Code Runnerによるコンパイルと実行の例

 図6のように、ファイルが編集途中で、保存もされていない場合には、一時ファイルを作成して、それを実行します。保存されたファイルであれば、それが直接コンパイル、実行されます。コマンドが自身で終了しないようなものであるときには、[Control]+[Option]+[M]/[Ctrl]+[Alt]+[M]で中断できます。

 Code Runnerは、既定ではパネルの[出力]タブにコンパイル・実行経過を書き出すので、scanf関数やgets関数などで標準入力から入力を受け取ることができません。settings.jsonファイルにcode-runner.runInTerminal項目を追加して値をtrueに設定すると、入出力にターミナルを使うようにできます。また、同じくsettings.jsonファイルにcode-runner.executorMap項目を追加すると、言語ごとに実行するコマンドをカスタマイズできます。設定の内容については、拡張機能「Code Runner」の[詳細]タブで「Configuration」の欄を参照してください。

フロントエンド開発のためのコードフォーマッタ ──Prettier - Code formatter

 VSCodeは、ビルトインでコードのフォーマット機能を備えますが、esbenpによるPrettier - Code formatter(esbenp.prettier-vscode、以降は単にPrettierとします)をインストールすると、既定のフォーマット機能に替えて以下の機能を利用できるようになります。

  • よりきめ細かなルールに基づくフォーマット
  • フォーマット内容のカスタマイズ
  • ファイル保存時に自動フォーマット
  • 設定ファイルの作成と共有

 PrettierはVSCode専用ではなく、VimやEmacs、Atomといったテキストエディターでも利用できる汎用性が高いものですが、ここではVSCodeでの利用に絞って紹介します。Prettierのサポートする対象の言語はHTML、CSS(LESS、SCSS)、JavaScript、TypeScript、JSX、Angular、Vue、Flow、Ember/Handlebars、JSON、GraphQL、Markdown、YAMLとなっており、主にフロントエンド開発のための言語・フレームワークを対象としたものになっています。

 拡張機能Prettierをインストールしたら、まずは既定のフォーマッタをPrettierに変更します。Editor:Default Formatterをesbenp.prettier-vscode(表示はPrettierとなっている)に変更します。ファイル保存時に自動でフォーマットしてほしいなら、Editor:Format On Saveにチェックを入れます。

 フォーマットの実行は既定と変わりありません。コンテキストメニューから[ドキュメントのフォーマット]あるいは範囲指定して[選択範囲のフォーマット]を選択したり、[Commamd]+[K][Commamd]+[F]/[Ctrl]+[K][Ctrl]+[F]キーで実行できたりします。図7は、Prettierの既定の設定でフォーマットを実行してみた例です。

図7:Prettierによるフォーマットの例
図7:Prettierによるフォーマットの例

 フォーマットルールは、VSCodeの設定から拡張機能のPrettierを選択して表示される約30の項目から変更できます。以下に、主なものをいくつか抜粋します(カッコ内は既定値)。

  • Prettier: Enable:Prettier自体を有効にするか(true)
  • Prettier: Bracket Spacing:ブラケットの内側にスペースを置くか(true)
  • Prettier: Semi:行末にセミコロンを置くか(true)
  • Prettier: Tab Width:タブ幅(2)
  • Prettier: Print Width:行幅(80)。この幅に収まるように整形される
  • Prettier: Single Quote:引用符をシングルクォートにするか(false)

 開発者間でフォーマットルールを共有したいときには、設定ファイルを作成して、それを各自に配布します。ファイルの形式はJSON(.json)、JavaScript(.js)、TOML(.toml)、YAML(.yml)などが選べますので、それぞれの拡張子を付加した.prettierrcファイルを作成して、フォーマット対象のファイルのある場所に置きます。ファイルの書き方などの情報は、拡張機能「Prettier - Code formatter」の[詳細]タブか、以下のWebサイトに詳細な例があるので、参照してみてください。

コメントの色分け表示 ──Better Comments

 VSCodeは、コメントを認識してカラー表示してくれますが、コメントの内容にまでは踏み込んでくれません。コメントには、通常のメモ的な内容の他にTODOといった作業コメント、JavaDocのようなドキュメンテーションコメントも含まれるので、これらを認識して色分け表示できれば、例えばTODOを見逃しにくくなるなど便利でしょう。Aaron BondによるBetter Comments(aaron-bond.better-comments)をインストールすると、コメントの種類による色分け表示を可能にしてくれます。基本的には、コメントの先頭にある文字を判別し、そこから種類を判別して表示色を決定します。対応するプログラミング言語は多岐にわたり、AdaやPascalといったものまでサポートされています。

 図8は、Javaのコメントを色分け表示した例です。

図8:Javaのコメントを色分け表示した例
図8:Javaのコメントを色分け表示した例

 Better Commentsでは、settings.jsonファイルで以下のような設定が可能です。

  • better-comments.multilineComments:複数行コメントへ対応する場合true(既定)
  • better-comments.highlightPlainText:コメントでないプレーンテキストへ対応する場合true(既定はfalse)
  • better-comments.tags:コメント先頭の記号(「!」や「?」など)や色などをカスタマイズ

 better-comments.tagsの既定の内容については、拡張機能「Better Comments」の[詳細]タブで「Configuration」の欄を参照してください。

プログラミング言語ごとの拡張機能

 ビルトインでサポートされていないプログラミング言語では、言語ごとに用意された拡張機能をインストールすることで、コード補完やシンタックスハイライト表示、リファクタリングなどのコーディング支援機能が利用可能になるので、ぜひインストールしましょう。主な言語と、その拡張機能の一部を表2に挙げておきます。もちろん、拡張機能の検索機能で言語名を入力すれば探すことができます。

表2:主な言語の拡張機能一覧
言語 拡張機能
C/C++ C/C++、C/C++ Extension Pack
C# C#、C# Dev Kit
Go Go、Go Nightly
Java Extension Pack for Java、Debugger for Java
JavaScript JavaScript and TypeScript Nightly
PHP PHP Intelephense
Python Python、Python Indent
React ES7+React、Redux、React-Native snippets
Ruby Ruby、Rails
Rust rust-analyzer
Vue Vetur

[NOTE]言語サーバ

 プログラミング言語のサポートは、言語サーバ機能の上に成り立っています。言語サーバプロトコル(LPS)として標準化されており、対応するエディタやCLIツール、拡張機能間で組み合わせて使うことができます。VSCodeは、バージョン1.7でほとんどの言語の拡張機能でLPS対応を果たしています。

次のページ
多言語対応の対話型実行環境「Polyglot Notebooks」を試す

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

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

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング