google-site-verification: google3bd66dd162ef54c7.html
fc2ブログ

VSCode for Arduino の自動フォーマットの設定

◆まえがき
前回の記事に引き続き VScode の話です。VSCode Extension for Arduino のプログラムの自動整形のスタイルが気に入らなかったので、出来るだけ自分の好みになるように設定してみました。

◆コードの自動フォーマットの設定
ネットのあちこちに設定方法が書かれていますが、自分の頭の中の整理を兼ねて設定方法を書いておきます。

1) デフォルトのフォーマットルールの指定
ウインドウの左下の歯車ボタン、つまり「管理」→「拡張機能」→「ユーザータブの拡張機能」→「C/C++」の「C_Cpp: Clang_format_fallback Style」に Google と設定。
拡張機能の設定

これは、次に説明する .clang-format ファイルが見つからなかった時のフォーマット仕様(スタイル)として使われます。つまり設定しなくてもかまわないのですが、念のためにやっておきます。ちなみにデフォルトのままだと、中括弧の開き「{ 」の後で改行されるようになります。

2) .clang-format ファイルの設定と保存
このファイルで自動フォーマットの仕様を設定します。設定方法は clang-format の設定方法についての解説資料がネットのたくさんあるのでそちらをご覧下さい。例えばこちら。

私の設定は以下の通りです。
-----
# VSCode のソースフォーマッターの動作指定ファイル
# このファイルは utf-8 でエンコードすること

# デフォルト設定
BasedOnStyle: Google

# 1行の最大文字数(0なら無制限)
ColumnLimit: 0

# 連続する = の位置を揃える
AlignConsecutiveAssignments: Consecutive

# 連続する宣言の要素の位置を揃える
AlignConsecutiveDeclarations: Consecutive

# 連続したマクロ(#define)の内容を揃える
AlignConsecutiveMacros: Consecutive

# 行末コメントの位置を揃える
AlignTrailingComments: true

-----
上記の ----- に挟まれた部分を .clang-format という名前のファイルに入れ、そのファイルをプログラムを保存するフォルダ、あるいはその上位のフォルダに保存しておきます。

VSCode が自動フォーマットを行う時、現在のフォルダから順に上位のフォルダに向かって .clang-format ファイルを探し、最初に発見されたものを使ってフォーマットが行われます。ちなみに、ルートまでつまり例えば \c: まで探しても発見出来なければ 1) 項で指定した設定が使われることになるはずです。

フォーマットはその内容を示すコマンド文字列で指定しますが、上の例のように日本語のコメントを入れておいた方が後で分かり易いと思います。但し、日本語のコメントを入れる場合文字コードに注意する必要があって、utf-8 でエンコードしておかないとエラーになりました。ちなみにBOMは付けても付けなくてもOKだったので、私は無しにしています。Windows からいつものようにエディタを使うと shift-JIS エンコードになることが多いので要注意です。

◆自動フォーマット
今回の設定の効果を見てみます。

1.Googleのスタイル
あらかじめ用意されているGoogleのコーディングスタイルでフォーマットした結果です。
Googleのスタイル
// で始まる行末コメントの位置が揃っていないので読み難いです。また、下から5行目の av = の行が変な所で改行されています。たぶん1行の文字数制限を超えたため、改行が挿入されたのだと思います。

ちなみに、行末コメントは使わない方が良いという話があり、その理由も理解できます。でもこの例のように、for ループを使わなかった理由などは直接その行に書いておいた方が判り易いと思います。

2.今回の設定
今回の設定を使って自動フォーマットした結果です。
今回の設定
行末コメントの位置がある程度揃うようになって読み易くなりました。なお、コメントの文字が黄緑色で本文とは違っているのも読み易い理由の一つですが、これはVSCodeの元からの仕様です。

欲を言うと 1行離れた行末コメントも同じ位置に揃えることが出来たらもっと読み易くなると思うのですが、残念ながらそういう指定は出来ないようです。ちなみに代入記号 ( = ) などの位置揃えにはそういいう指定が出来るようになっています。

3.ArduinoIDE
前項と同じものを Arduino IDE で表示させた結果です。
ArduinoIDEで見た場合
当然ですが、文字の位置は同じように表示されます。しかし、予約語を除きほとんどの文字が黑で表示されるので、本文とコメントの境界が判り難いです。(実はコメントの方が文字の色が薄いのですがよく見ないと判りません。)これが Arduino IDE を使った時に行末コメントの位置を揃えたくなる理由の一つだと思います。

◆まとめ
これで VSCode を使う時の自動フォーマットのスタイルを自分好みに設定することが出来ました。この記事で紹介しているスタイルは私の好みなので、各自が好みのスタイルに設定すればよろしいかと思います。

それにしても、ずっとArduino IDE の世界にいたので、外の風に当たるのも良い経験になります。
カレンダー
06 | 2021/07 | 08
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
プロフィール

ラジオペンチ

Author:ラジオペンチ
電子工作を中心としたブログです。たまに近所(東京都稲城市)の話題など。60過ぎて視力や器用さの衰えを感じつつ日々挑戦!
コメントを入れる時にメールアドレスの記入は不要です。なお、非公開コメントは受け付けていません。
記事の内容のご利用は読者の自己責任でお願いします。

記事が気に入ったらクリックを!
最新記事
カテゴリ
最新コメント
リンク
FC2カウンター
検索フォーム
月別アーカイブ
RSSリンクの表示
QRコード
QRコード