【VSCode】初期設定

初期設定例

Command + , でユーザー設定画面を開く

Files

• Insert Final Newline
  ファイルの保存時に最終行に空行を挿入します

• Trim Final Newlines
  ファイルの保存時に最終行以降の行をトリミングします

• Trim Trailing Whitespace
  ファイルの保存時に行末の空白をトリミングします

Workbench

• Color Theme
  好みの配色を選択しましょう

おすすめプラグイン

サイドバーの拡張機能アイコンから検索

基本

• vscode-icons
  拡張子に合わせてアイコンを表示してくれる拡張機能です

• Japanese Language Pack for Visual Studio Code
  VSCodeを日本語化します

整形

• EditorConfig for VSCode
  EditorConfig のVSCode版の拡張機能です
  .editorconfig にルールを定義して、プロジェクトに配置して使います

• Bracket Pair Colorizer 2
  対応する括弧を色分けして表示してくれる拡張機能です

• Prettier - Code formatter
  Prettierはソースコードを解析して、ルールに応じてコーディングスタイルを適用してくれるコードフォーマッターです

• Code Spell Checker
  スペルミスを検出してくれる拡張機能です
  タイポを減らせます

補完

• Auto Rename Tag
  ペアになっているHTML/XMLタグの名前を自動的に変更する拡張機能です

• Auto Close Tag
  HTML/XMLの終了タグを自動的に追加してくれる拡張機能です

• Path Intellisense
  ファイルパスを補完してくれる拡張機能です

フロント系

• HTML CSS Support
  HTMLドキュメントに対するCSSのサポートを行う拡張機能です
  主にクラス属性の補完、ID属性の補完、css、scssファイルの検索をしてくれます

• CSS Peek
  CSSインラインエディターのように、HTMLのidやclassへ定義ジャンプしたり、HTMLファイル上でCSSスタイルを確認できる拡張機能です

• Import Cost
  JavaScriptやTypeScriptでimportしたファイル容量を表示してくれる拡張機能です

• Babel JavaScript
  ES201x や React JSX の JavaScript シンタックスハイライトを表示してくれる拡張機能です

Git

• Git Graph
  コミット履歴をツリー形式で表示してくれる拡張機能です

• Git Lens
  ソースコードの行またはコードブロックがいつ、誰がコミットしたのか表示され、コードの歴史を知るのに役立ちます

その他

• Live Share
  リアルタイムで共同編集やデバッグができる拡張機能です
  ペアプログラミングをする際に使用します

• Visual Studio IntelliCode
  AI支援によりAPIサジェスト一覧の精度を向上させる拡張機能です

[推奨] codeコマンドでターミナルからVSCodeを起動する

インストール

• VSCodeで Command + Shift + P でコマンドパレット開く
• 「Shell」を検索
• インストール

使い方

カレントディレクトリをプロジェクトとして開いて起動

$ code .

ファイルを指定して起動

$ code src/resources/js/hoge.js