アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

VSCodeで自動成型の設定方法

Featured image of the post

Visual Studio Code (VSCode)は、軽量かつ拡張性に優れたコードエディタとして、多くの開発者に利用されています。中でも、コードの自動成型機能は、コーディング作業を効率化し、コードの可読性を向上させる非常に便利な機能です。この記事では、VSCodeでの自動成型の設定方法について、ステップバイステップで解説します。


[目次を開く]
1. 拡張機能のインストール

VSCodeには、多くの拡張機能が用意されており、これを活用することでさまざまな言語に対応した自動成型が可能になります。特に有名なものとして、以下の拡張機能が挙げられます。

  • Prettier - Code formatter: JavaScript、TypeScript、CSS、HTMLなどの言語に対応したフォーマッタ。
  • ESLint: JavaScriptやTypeScriptのコードを解析し、スタイルのルールを守っているかをチェックするツール。
  • Beautify: HTML、CSS、JavaScript、JSONなどを美しくフォーマットするための拡張機能。

まずは、Prettierを使った自動成型の設定方法を説明します。

Prettierのインストール方法
  1. VSCodeのサイドバー左側にある「拡張機能アイコン」をクリック。
  2. 検索バーに「Prettier」と入力し、結果に表示される「Prettier - Code formatter」を選択。
  3. 「インストール」ボタンをクリック。

インストール後、Prettierが使用できるようになります。次に、自動成型を有効にするための設定を行います。


2. 自動成型の設定

拡張機能をインストールしただけでは、自動成型はまだ有効になりません。VSCodeの設定を調整して、自動成型を有効にする手順を以下に示します。

a. フォーマットオプションを設定する
  1. メニューバーの「ファイル」→「基本設定」→「設定」を選択します。
  2. 右上の検索バーに「format」と入力し、関連する設定項目を検索します。

この中から以下の設定を確認・調整します。

  • Editor: Format On Save

    この設定を有効にすると、ファイルを保存するたびにコードが自動でフォーマットされます。設定方法は以下の通りです。

    • 検索結果から「Editor: Format On Save」を探し、チェックを入れる。
  • Editor: Default Formatter

    特定のフォーマッタをデフォルトに設定することができます。Prettierをデフォルトのフォーマッタにしたい場合は、この設定を行います。

    • 「Editor: Default Formatter」を探し、プルダウンメニューから「Prettier」を選択。

3. 言語ごとのフォーマッタ設定

VSCodeは、さまざまなプログラミング言語をサポートしていますが、言語ごとに異なるフォーマッタを利用したい場合は、さらに細かい設定を行うことができます。これを行うには、VSCodeの設定ファイルであるsettings.jsonを編集します。

settings.jsonでの設定方法
  1. 「Ctrl + ,」で設定画面を開き、右上の「ファイルのアイコン」をクリックして、settings.jsonを直接編集できる画面を開きます。
  2. 以下の設定を追加します。
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

このように言語ごとにフォーマッタを指定することで、言語別に最適な成型を自動で行うことができます。


4. ショートカットでの手動成型

自動成型だけでなく、手動で成型したい場合もあります。特定のコードブロックやファイル全体をフォーマットしたい時に便利なショートカットが用意されています。

  • Windows / Linux: Shift + Alt + F
  • Mac: Shift + Option + F

このショートカットを使えば、保存時に自動でフォーマットされない場合でも、即座にフォーマットを適用できます。


5. 特定のフォーマッタ設定を上書きする

Prettierなどのフォーマッタは、デフォルトでいくつかのスタイルルールを適用しますが、これをプロジェクトや個人の好みに合わせてカスタマイズしたい場合は、設定ファイルを利用します。

Prettierの設定ファイル .prettierrc

プロジェクトルートに.prettierrcというファイルを作成し、以下のような設定を追加します。

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5"
}

これにより、コードの行幅やタブの幅、シングルクォートを使うかどうかなど、細かい成型ルールをカスタマイズすることができます。


まとめ

VSCodeでの自動成型は、開発効率の向上やコードの可読性向上に欠かせない機能です。この記事で紹介した方法を使って、Prettierなどのフォーマッタを設定し、保存時に自動でコードが整えられるようにしましょう。また、プロジェクトごとにフォーマット設定をカスタマイズすることで、チーム全体のコーディングスタイルを統一することも可能です。

ぜひ、これらの手順を実践して、VSCodeでの開発体験をよりスムーズにしてください。

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会