Zenn
🔖

VS Code 推奨拡張機能インストールメモ

に公開
VS Code
tech

VS Code 推奨拡張機能インストールメモ

普段Visual Studio Codeをより便利に使うためにインストールしている推奨拡張機能を記録します。

インストール方法

  1. VS Codeを開く
  2. 左側のアクティビティバーから「拡張機能」アイコンをクリック（Ctrl+Shift+X）
  3. 検索ボックスに拡張機能名を入力
  4. 「インストール」ボタンをクリック

インストールしている拡張機能一覧

🌳 Git Graph

Git履歴を視覚的に表示

  • Gitのコミット履歴をグラフィカルに表示
  • ブランチの分岐・マージが一目で分かる
  • 右クリックでコミットの詳細操作が可能

🧠 IntelliCode

AIによるコード補完

  • Microsoft製のAI支援ツール
  • コンテキストに応じたスマートな補完

🇯🇵 Japanese Language Pack for Visual Studio Code

日本語化パック

  • VS Codeのインターフェースを日本語に変更
  • メニューやメッセージが日本語で表示

📝 markdownlint

Markdownファイルの品質チェック

  • Markdownの記法をチェック
  • 一貫性のあるMarkdownファイルを作成
  • READMEやドキュメント作成時に便利

✨ Prettier - Code formatter

コードの自動整形

  • JavaScript、TypeScript、CSS、HTMLなど多言語対応
  • 保存時に自動でコードを整形
  • チーム開発でのコードスタイル統一に最適

🐍 Python

Python開発の必須ツール

  • Pythonのシンタックスハイライト
  • デバッグ機能とIntelliSense

🌈 Rainbow CSV

CSVファイルの可読性向上

  • CSVの列を色分けして表示

🔍 ESLint

JavaScriptコードの品質チェック

  • コードの潜在的な問題を検出
  • 一貫性のあるコーディングスタイルを維持
  • 保存時に自動修正も可能

⚫ Black Formatter

Pythonコードの自動整形

  • Microsoft製のPython専用フォーマッター
  • Microsoft製が対象

インストール後の設定

拡張機能をインストールした後、以下の設定を実施しています：

Prettierの設定

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Bkackの設定

{
    "[python]": {
        "editor.formatOnSave": true, 
        "editor.formatOnPaste": false,
        "editor.formatOnType": false,
        "editor.defaultFormatter": "ms-python.black-formatter" 
    },
    "black-formatter.args": [
        "--line-length=120"
    ]
}

Discussion