0. はじめに

VS codeのインストール

1. 基本設定

VSCodeの日本語化

初期設定は英語のため、日本語にするために以下の設定行う

サイドバーの上から５つ目のアイコン（Extensions）をクリックし、「Japanese」と入力
一番上の「Japanese Language Pack for Visual Studio Code」を選択し、「Install」をクリック
⚠️画像ではインストール済みのため、「アンインストール」と表示されている
右下に現れる「Restart Now」をクリック
VS Codeが再起動され、日本語化される

ターミナルからVS Codeを開く

以下の作業を行うと、ターミナルからVS Codeを簡単に開くことができる

コマンドパレット（command shift p）を起動し、shellと入力
「シェルコマンド: PATH内に 'code' コマンドをインストールします」を選択
動作確認するため、一旦VS Codeを閉じる
ターミナルから起動してみる ⚠️.（ピリオド）はカレントディレクトリの意味

ターミナル　

code .

VS Codeが起動すればOK

ダークモードに変更

コマンドパレット（command shift p）を起動し、darkと入力
基本設定：ライトテーマとダークテーマの切り替えを選択

各種色を変更

設定画面を開き（command+,）、workbench.colorCustomizationsと入力
Edit in settings.jsonを選択
workbench.colorCustomizationsに以下を追加

"workbench.colorCustomizations": {
    "tab.activeBackground": "#666666cc",
    "editor.selectionBackground": "#8213be",
    "editor.selectionHighlightBackground": "#0115cd",
    "editor.findMatchHighlightBackground": "#4d5fb0",
    "editor.findMatchBackground": "#7402a9",
    // "editor.findMatchBorder": "#ffffff",
  },

tab.activeBackground タブ
editor.selectionBackground　選択中のテキスト
editor.selectionHighlightBackground　選択中のテキストと同じ文字列
editor.findMatchHighlightBackground　検索にヒットした文字列
editor.findMatchBorder　検索にヒットした文字列群のうち，現在フォーカスしているものの枠線
editor.findMatchBackground　検索にヒットした文字列群のうち，現在フォーカスしているもの

コメントアウトの文字色は以下を追加

"editor.tokenColorCustomizations": {
  "comments": "#dda0dd"
}

HTMLタグ補完

HTMLタグの補完のため、以下のようにemmetを導入する。

設定画面を開き（command+,）、emmetと入力
「Emmet:Trigger Expansion on Tab」にチェックを入れる
設定画面を開き（ctrl+,）、edit in settingsと入力
settings.jsonで編集をクリック
開いたファイルに以下を追記

settings.json

"emmet.includeLanguages": {
        "erb": "html"
    }

表示設定

画面に不要な項目を非表示にする

画面上部のView > Appearance > Status Barなど（各自お好み）

ターミナルの設定

ターミナルを左側に表示する

ターミナルの部分で右クリックでメニューを開き、パネルの位置を「左」に設定。

自動保存

保存時とペースト時に自動でフォーマットする設定

以下をsettings.jsonに追加

settings.json

  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

2. ショートカットキー

以下の作業を行うと、VS Codeでやり直しができる

コマンドパレット（command shift p）を起動し、keyboard shortcutと入力
「基本設定：キーボードショートカットを開く」を選択し、上部の検索バーに変更したい項目を入力

今回設定した内容は以下

項目	設定値
やり直し	⌘ Y
次のエディターを開く	⌘ ↓
以前のエディターを開く	⌘ ↑
エクスプローラを表示	⌘ E
ソース管理を表示	⌘ G
置換	⌘ H
エディターでシンボルに移動	⌘ U
File: Copy Relative Path of Active File	⌘ R
Terminal: Create New Terminal in Editor Area	⌘ T
Terminal: Focus Next Terminal Group	⌘ ↓
Terminal: Focus Previous Terminal Group	⌘ ↑
View: Toggle Maximized Panel	⌘ M
View: Split Editor	⌃ S
View: Git Graph (git log)	⌘ L
View: Move Editor Left	⌘ ,
View: Move Editor Right	⌘ .
View: Pin Editor	⌃ P
View: Unpin Editor	⌃ P
表示：ターミナルの切り替え	⌘ ;
workbench.action.openSettings	⇧ ⌘ ,
workbench.action.openEditorAtIndex1	⌘ ]

(参考)
設定済みのショートカットで一般的ではないが、よく使うもの

項目	設定値
ターミナルの表示/非表示	⌘ J
サイドバーの表示/非表示	⌘ B
インデントでの折りたたみ	⌥ ⌘ [
現在のフォルダのファイル一覧表示	⌘ ⇧ .

3. 各種設定

設定画面を開き（⌘+,)、以下の内容を設定していく

項目	設定値	内容
editor.autoIndent	full	コピーした行を貼り付けるときにインデントを保持
editor.font size	11	フォントサイズ
editor.rulers	[120]	垂直ルーラーを120文字ラインに設定
editor.minimap.showSlider	“always”	ミニマップのスライダーを常に表示
editor.cursorBlinking	“smooth”	カーソル・アニメーションをスムーズに
editor.cursorSmoothCaretAnimation	on	カーソルの移動をアニメーション
editor.cursorStyle	block	カーソルをブロックで表示
editor.renderWhitespace	“boundary”	空白文字を単語間の単一スペース以外表示
editor.copyWithSyntaxHighlighting	off	テキストコピー時に書式設定を含めない
editor.formatOnType	on	フォーマットを自動化(値入力時)
editor.formatOnPaste	on	フォーマットを自動化(値貼り付け時)
editor.GlyphMargin	行番号の横の領域を非表示
editor.LetterSpacing	-1.8	フォントの横幅を狭くする
editor.LineHeight	1.2	フォントの縦幅を狭くする
editor.Folding	チェックしない	行番号右側の↓を非表示
editor.fontFamily	Menlo, Monaco, monospace	フォント変更
editor.scrollbar.vertical	hidden	縦スクロールバーを非表示
editor.scrollbar.horizontal	hidden	横スクロールバーを非表示
Editor: Suggest Font Size	12	候補用語のフォントサイズ
editor:suggest Line Height	12	候補用語のフォント高さ
explorer.compactFolders	false	アイコンのコンパクト表示しない
files.autoGuessEncoding	true	ファイルを開くときに文字セットエンコードを推測
files.eol	“\n”	既定の改行文字を LF に設定
files.trimTrailingWhitespace	true	ファイルの保存時に末尾の空白をトリミング
files.insertFinalNewline	true	ファイルの保存時に最新の行を末尾に挿入
files.trimFinalNewlines	on	ファイル保存時に最終行以降の空行を自動削除
terminal.integrated.scrollback	200000	ターミナルの最大行数
terminal.integrated.confirmOnExit	never	終了時にアクティブなターミナルセッションを確認しない
terminal.integrated.copyOnSelection	on	ターミナルで選択したテキストをクリップボードに自動コピー
terminal.integrated.defaultLocation	editor	ターミナルをediterで開く
terminal.integrated.letterSpacing	-1.3	エディタフォントの横幅を狭くする
title bar style	native	タイトルバーを非表示
tabsize	2	インデント幅の変更
auto Save	OnFocusChange	ファイルの自動保存
debug.inlineValues	on	デバックの有効化
workbench.editor.tabSizing	shrink	複数のタブを開いている場合にタブが縮小表示
workbench.editor.Pinned Tab Sizing	compact	ピン留めしているタブのサイズを縮小
Workbench.editor.Open Positioning	last	新しいタブを一番右側で開く
extensions.ignoreRecommendations	off	拡張機能の推奨をしない
window.Zoom Level	-1	VScode全体のフォントサイズ
breadcrumbs.enabled	false	ぱんくずリスト表示

参考記事

4. 拡張機能

HTML

HTMLHint

HTML構文チェッカー

Auto Complete Tag

Auto Rename Tag と Auto Close Tag のセット
(Auto Rename Tag) 開始タグを変更すると終了タグも編集
(Auto Close Tag) 閉じタグの補完

open in browser

HTMLファイルを開いているとき、option(⌥) + B でそのファイルをブラウザで開ける

Live Server

HTMLファイルを開いているとき、下にあるステータスバーの「Go Live」をクリックすると、ブラウザでそのファイルを開く。また、ファイル更新時に自動反映される。

CSS

HTML CSS Support

CSS側で作ったクラス名の補完

CSS Peek

CSS の class の定義元へジャンプ
(class 上で F12 もしくは command キーを押しながら class をクリック)

Live Sass Compiler

下にあるステータスバーの「Watch Sass」をクリックすると、Sassファイルを保存した際に自動的にCSSファイルが作成・更新される

JavaScript

ESLint

リンター（構文チェックツール）

ESLintで保存時に自動修正したい場合は、settings.jsonに次を追加

settings.json

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Vue.js

Vue Language Features (Volar)

Veturに変わるVueの推奨プラグイン

Vue peek

定義元にジャンプできる

Git

GitLens

コミット履歴・ブランチ間の差分などを確認できる

以下の機能が追加される

COMMITSでは git commit の履歴を確認できて、ファイルをクリックすると、差分確認できる

ソースコード内でコミット履歴が表示される

GitHub Pull Requests and Issues 現在は利用していない

VSCodeでGitHubのプルリクやコメントを編集・送信できる

以下のメニューが追加される

Git Graph

コミット履歴を元にブランチが視覚的にわかりやすくなる

Ruby, Ruby on Rails

事前に Ruby on Rails の環境構築が必要

Ruby ※サポート対象外

設定

.rb ファイルのフォーマッタでrufoを利用。
拡張機能rubyを導入後に、以下の設定でrufoを導入

ターミナル

gem install rufo

settings.json に次を追加

settings.json

  "ruby.intellisense": "rubyLocate",
  "ruby.useLanguageServer": true,
  "ruby.lint": {
    "rufo": true
  },
  "ruby.format": "rufo",

定義元にジャンプする記事は以下

ruby-rubocop

Rails Routes

erbのhelper_pathにcommandを押しながらクリックすると、contorllerのactionに遷移

VSCode Ruby

シンタックスハイライト

Rails

ERB Formatter/Beautify

「ホームディレクトリ」で，次をターミナルから実行

ターミナル　

gem install htmlbeautifier

Ruby Solargraph

コントローラで定義したメソッドを一覧で確認できる

ターミナル　

gem install solargraph

erb

HTMLタグの補完

設定

settings.json に次を追加

settings.json

  "emmet.includeLanguages": {
    "erb": "html"
  },
  "files.associations": {
    "*.erb": "erb"
  },

【注意】
一部の環境で，このフォーマッタを使用すると、Railsのhtml.erb形式のファイルを保存（＆フォーマット）した際に、tmpファイルが作成されることがある。

現時点では、このフォーマッタをアンインストールする以外の方法が不明のため、上記の場合はフォーマッタを使用して tmp ファイルを削除するか、フォーマッタをあきらめるかの二択になる。

endwise

endの自動補完

Ruby LSP

Rails Go to Spec

Cmd + Shift + yで対象のspecファイルを開く。
※ ModelとMailerはspecファイルを開けたが、Controllerはspecファイルが開けなかった

AI

GitHub Copilot

Phind

使い方は以下の記事を参考

見た目調整

zenkaku

全角スペースを「灰色」で表示

有効化するため，次をターミナルから実行

ターミナル　

code ~/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js

開かれたファイルを次のように修正して、VSCodeを再起動

// 5行目の false を true に修正
var enabled = true;

// 11〜18行目を緑色に修正
    light: {
        backgroundColor: 'rgba(100, 200, 100, 0.7)',
        borderColor: 'rgba(100, 100, 200, 1)'
    },
    dark: {
        backgroundColor: 'rgba(100, 200, 100, 0.7)',
        borderColor: 'rgba(100, 200, 100, 1)'
    }

Rainbow CSV

vscode-icons

フォルダやファイルのアイコンが追加されて見やすくなる

Partial Diff

選択した部分のコードを簡単に比較できる

比較したい1つ目のコードをコピーし、2つ目のコードを選択して右クリック。
Compare Text with Clipboardをクリック。

すると、差分ファイルが開き、変更点を教えてくれる。
例） postと@postの部分で@に色が付いている。

Code Spell Checker

英単語のタイプミスを教えてくれる

Path Autocomplete

パスを自動補完してくれる

indent-rainbow

インデントに色付けしてくれる

Output Colorizer

VSCodeの出力を色付けしてくれる

Prettier

コードフォーマッタ

Prettierの設定
フォーマットに Prettier を使用できるように指定する場合は， settings.json に次を追加
どれを Prettier に指定するかはお好み。

settings.json

settings.json
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

以下も settings.json に追加

settings.json

  "prettier.printWidth": 120,
  "prettier.singleQuote": true,
  "prettier.semi": true,

【補足】
rintWidth：「1行の文字数制限」を120文字に設定。デフォルトは80文字。

singleQuote:文字列リテラルを「シングルクォート」に強制的に変更。デフォルトは falseで「ダブルクォート」を「シングルクォート」に強制敵に変更しない。

semi:式の最後にセミコロン;を付ける設定。デフォルトはtrue。

Atom One Dark Theme

目に優しい配色にしてくれる
長時間のパソコン作業には必要

インストール前
インストール後

trailing-spaces

コードの末端の空白を色付きで表現してくれる

markdownlint

マークダウンの構文チェッカー

Restore Editors

開いているタブを保存し、ボタン一つで復元できる

Error Lens

フォーマッタやリンターで設定している警告を大きく表示

TODO Highlight

TODOコメント等を見やすくする

Better Comment

TODOコメント等を見やすくする

各種ツール

Remote Development

複数の機能がパックされている

REST Client

HTTPリクエストの内容を確認できる
⚠️.httpファイルに限る

.httpファイルを作りSend Requestをクリック

以下のようにHTTPリクエストの内容が表示される

5. settings.json

これまでの設定を踏まえた現在の設定がこちら。

{
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "auto-close-tag.SublimeText3Mode": true,
  "emmet.triggerExpansionOnTab": true,
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome",
  "emmet.includeLanguages": {
    "erb": "html"
  },
  // "editor.formatOnSave": true,
  // "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "Atom One Dark",
  "vsicons.dontShowNewVersionMessage": true,
  "editor.inlineSuggest.enabled": true,
  "githubPullRequests.pullBranch": "never",
  "terminal.integrated.scrollback": 9999,
  "editor.cursorBlinking": "smooth",
  "editor.rulers": [120],
  "editor.renderWhitespace": "none",
  "files.autoGuessEncoding": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "editor.minimap.enabled": false,
  "githubPullRequests.createOnPublishBranch": "never",
  "editor.renderControlCharacters": false,
  "terminal.integrated.persistentSessionReviveProcess": "onExitAndWindowClose",
  "terminal.integrated.defaultLocation": "editor",
  "workbench.startupEditor": "none",
  "debug.inlineValues": "on",
  "editor.formatOnType": true,
  // "editor.formatOnPaste": true,
  "files.trimFinalNewlines": true,
  "terminal.integrated.copyOnSelection": true,
  "scm.inputFontSize": 11,
  "markdown.preview.fontSize": 11,
  "workbench.layoutControl.type": "menu",
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#666666cc",
    "editor.selectionBackground": "#8213be",
    "editor.selectionHighlightBackground": "#0115cd",
    "editor.findMatchHighlightBackground": "#4d5fb0",
    "editor.findMatchBackground": "#7402a9"
    // "editor.findMatchBorder": "#ffffff",
  },
  "explorer.confirmDelete": false,
  "workbench.editor.pinnedTabSizing": "compact",
  "workbench.editor.tabSizing": "shrink",
  "editor.letterSpacing": -1.7,
  "explorer.openEditors.visible": 0,
  "editor.suggestLineHeight": 13,
  "debug.console.lineHeight": 11,
  "scm.diffDecorations": "none",
  "editor.folding": false,
  "editor.minimap.showSlider": "always",
  "editor.scrollbar.vertical": "hidden",
  "editor.scrollbar.horizontal": "hidden",
  "rest-client.fontSize": 11,
  "notebook.output.fontSize": 11,
  "notebook.markup.fontSize": 11,
  "editor.suggestFontSize": 12,
  "editor.inlayHints.fontSize": 13,
  "editor.codeLensFontSize": 11,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorStyle": "block",
  "explorer.compactFolders": false,
  "editor.fontFamily": "Menlo, Monaco, monospace",
  "editor.fontWeight": "normal",
  "editor.tokenColorCustomizations": {
    "comments": "#d19cd1"
  },
  "terminal.integrated.enableMultiLinePasteWarning": false,
  "window.titleBarStyle": "native",
  "workbench.editor.openPositioning": "last",
  "workbench.editor.enablePreview": false,
  "git.showInlineOpenFileAction": false,
  // "liveServer.settings.donotShowInfoMsg": true,
  // "liveServer.settings.host": "file:///Users/jaraki/Desktop/Vue",
  "editor.fontSize": 13,
  "chat.editor.fontSize": 13,
  "editor.lineHeight": 0.8,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.letterSpacing": -1,
  "diffEditor.useInlineViewWhenSpaceIsLimited": false,
  "workbench.statusBar.visible": false,
  "window.zoomLevel": -2,
  "editor.fontLigatures": false,
  "workbench.activityBar.visible": false
}