今回は、Visual Studio Code(以下、VSCodeとする)で
ソースコードを自動整形する方法について紹介します。
これを知った時は、プチ感動しました。
1. 自動整形とは
VSCodeで各行の インデントを自動で整えてくれる機能 です。
例
という感じで、ソースコード全体のインデントを自動で揃えてくれます。
2. 自動整形のやり方
それぞれのOSで設定されている
ショートカットキーを押すことで自動整形できます
。
| OS | 名前 |
| mac | [Shift] + [option] + [F] |
| Windows | [Shift] + [Alt] + [F] |
※ただし、このショートカットキーは、半角時のみ有効です。
全角の時に、ショートカットキーを押すと、「Ï」という文字が入力され、自動整形できないです。
3. インデントのスペース数を設定
VSCodeの初期設定では、インデント(スペース)数が「4」になっていると思います。
なので、自動整形のショートカットキーを押すと、インデント数を4で揃えてくれると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const data = { labels: [ "January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100 ], } ] }; |
これを以下のようにインデント数を2で揃えたい人は、次の設定をしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const data = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { data: [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100 ], } ] }; |
設定方法
VSCode(エディタ)の右下に下記のような表示があるので、その中の「スペース」をクリック
次に、スペースによるインデントを選択
設定したいインデント数を入力か選択すると設定が変更されます。
以下のようにスペース数が変更されていれば、OKです。
VSCode教材
 |
“ソースコードを自動整形する方法【VSCode】” への3件のフィードバック