コーディングが爆速になる！VS Codeおすすめ拡張機能と時短ショートカット集

必ず入れておきたい！おすすめVS Code拡張機能

VS Codeは拡張機能によって自分好みにカスタマイズできます。以下は特に人気が高く、実務でも役立つものばかりです。

1. Prettier – Code formatter

コードの整形を自動で行ってくれるフォーマッター。保存時に自動整形する設定も可能です。

// settings.json に以下を追加
"editor.formatOnSave": true,
"prettier.requireConfig": true

2. ESLint

JavaScript/TypeScriptの文法チェックに必須。チーム開発にも欠かせません。

npm install eslint --save-dev
npx eslint --init

3. Path Intellisense

ファイルパスを自動補完してくれる便利拡張。パスの入力ミスを減らせます。

4. Bracket Pair Colorizer 2

カッコの対応関係を色で示してくれます。ネストが深いコードでも読みやすさUP。

5. Live Server

ローカル開発時にHTMLファイルを即時反映できる軽量なローカルサーバー。

作業スピード激増！覚えておきたいショートカットキー集（Win/Mac）

基本操作系

編集系

ナビゲーション系

作業効率をさらに上げるTips

マルチカーソルを駆使する

複数箇所を同時に編集したい場合は、Ctrl + D（Cmd + D）やAlt + クリック（Option + クリック）でマルチカーソルを設置できます。変数名の一括変更などに便利です。

Snippets（スニペット）を自作する

よく使うコードはスニペットとして登録可能です。

// javascript.json に記述（例：Reactコンポーネントの雛形）
"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "const $1 = () => {",
    "  return (",
    "    <div>$2</div>",
    "  );",
    "};",
    "",
    "export default $1;"
  ],
  "description": "React Functional Component"
}

rfcと入力するだけで一瞬でテンプレが展開されます。

まとめ：VS Codeを使いこなして開発スピードを最大化しよう

VS Codeは無料とは思えないほど高機能で、多くのエンジニアに愛用されています。拡張機能を厳選し、ショートカットを習得すれば、作業スピードは飛躍的に向上します。まずは今回紹介したものから導入して、少しずつ自分の開発スタイルに合った環境を整えてみてください。