はじめに

Visual Studio Codeを使っているので、オススメの使い方やプラグイン、設定などを紹介します。

環境

Mac macOSHighSierra 10.13.4

Visual Studio Codeをインストール

おすすめの設定

日本語化

その他の設定

「Code -> 基本設定 -> 設定」または「Cmd + ,」

▼setting.json

settings.json

{
  "editor.renderIndentGuides": true, // インデントのガイドの表示
  "editor.renderLineHighlight": "all", // 選択行のハイライト
  "editor.renderWhitespace": "all", // 半角スペースの表示
  "editor.snippetSuggestions": "top", // スニペット候補の表示（Emmet）
  "editor.tabSize": 4, // タブのサイズ変更
  "editor.wordWrap": "false", // エディターの幅で折り返し
  "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
  "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開
  "emmet.variables": {
    // Emmet で展開される言語を変更
    "lang": "ja"
  },
  "explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
  "files.associations": {
    // ファイルと言語の関連付けを変更
    ".*lintrc": "json"
  },
  "files.exclude": {
    // エクスプローラーから非表示にするファイル
    "**/*.map": true,
    "**/node_modules": true
  },
  "files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
  "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
  "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
  "[markdown]": {
    "files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない
  },
  "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
  "html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
  "html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない
  "html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
  "search.exclude": {
    // 検索対象外にするファイル設定（ files.exclude のファイルも含む）
    "**/tmp": true
  },
  "window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
  "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
  "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
  "workbench.editor.tabSizing": "shrink", // タブの表示設定
  "workbench.startupEditor": "none", // Welcome Page を表示しない
  "editor.insertSpaces": true,
  "explorer.confirmDragAndDrop": false,
  "window.zoomLevel": 1,
  // HTML タグの自動クローズを有効/無効にします。
  "html.autoClosingTags": false,
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "editor.minimap.enabled": false,
  "workbench.editor.enablePreview": false
}

【今日から携わる】はじめてのVisual Studio Code入門（オススメの設定・プラグイン・使い方）

はじめに

環境

Visual Studio Codeをインストール

おすすめの設定

日本語化

その他の設定

おすすめのプラグイン

タグ簡単入力

CSSクラスの入力補完

開始タグ変更で、閉じタグも変更

選択範囲を新規タグで囲む

HTMLHint拡張機能

括弧に色を付けてくれる

インデントの背景色を変えて見やすくする

scssの整形（フォーマット）

TypeScriptの整形（フォーマット）

おすすめ使い方

移動

検索

複数選択/マルチカーソル系

HTMLのコード整形（フォーマット）

重複チェック

名前順にする（重複を目視でチェックする）

正規表現で重複行を削除

テキストの大文字・小文字を切り替える

snake_case、camelCaseに変換

おすすめブログ

Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け -

vscodeおすすめ拡張

Visual Studio Code 入門～オススメ設定と拡張機能編～

VS Code の便利なショートカットキー