Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

環境

Mac macOSHighSierra 10.13.4

Visual Studio Codeをインストール

https://code.visualstudio.com/

おすすめの設定

日本語化

スクリーンショット_2019-01-02_0_09_49.png

その他の設定

「Code -> 基本設定 -> 設定」または「Cmd + ,」
スクリーンショット_2019-01-02_0_19_26.png

▼setting.json
スクリーンショット_2019-01-02_0_23_03.png

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
}

おすすめのプラグイン

「Shift + Cmd + X」 → 拡張機能の名前を入力して検索する


タグ簡単入力

VS CodeでHTMLの
タグを[shift+enter]で入力するエクステンション作った
https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag

CSSクラスの入力補完

IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

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

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

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

htmltagwrap - Visual Studio Marketplace
タグで囲みたい文字列を選択してAlt + Wを押す。
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

HTMLHint拡張機能

https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

括弧に色を付けてくれる

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

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

indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

scssの整形(フォーマット)

Sass Formatter
https://marketplace.visualstudio.com/items?itemName=sasa.vscode-sass-format
コマンド:sudo gem install sass --no-user-install
キーボードショートカット:ShiftOptionF

TypeScriptの整形(フォーマット)

https://qiita.com/yasu_yyy/items/70963d26309ea6ceb605
https://qiita.com/akisx/items/4b90106c7faca4965852

おすすめ使い方

移動

Cmd + P ーーー ファイルのパスを記述してファイルを開く

検索

Cmd + F エディタ内の検索
Cmd + H エディタ内の置換
Cmd + Shift + F ファイル内の検索
Cmd + Shift + H ファイル内の置換
F3 / Shift + F3 次の/前の検索結果にジャンプ

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

Alt + クリック ーーー カーソル追加。
Alt + Cmd + / ーーー マルチカーソルを上/下に追加
Cmd + D  ーーー ハイライトされた文字列を選択に追加し、マルチカーソルモードにする。
Cmd + Shift + L  ーーー ハイライトされた文字列と一致する文字列をすべて選択し、マルチカーソルモードにする。
Alt + Shift + ドラッグ  ーーー 矩形選択後、マルチカーソルモードになる。
Esc  ーーー マルチカーソルを解除する。

HTMLのコード整形(フォーマット)

(全体)ShiftOptionF
(部分)CmdKCmdF

おすすめブログ

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

https://qiita.com/hi85/items/eaede5ebb509f21f27f5

vscodeおすすめ拡張

https://qiita.com/EbXpJ6bp/items/4b87a092a3d6a0ecf595

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

https://necojackarc.hatenablog.com/entry/2017/03/16/090000

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

https://qiita.com/12345/items/64f4372fbca041e949d0

abeno
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away