【VisualStudioCode】使えるコマンドや機能例ショートカットから拡張機能まで【大まとめメモ】

ファイル名: -

ページで紹介する内容

以下のような内容を、ボリュームたっぷりで紹介します。

  • カラー設定例,icon,テーマ
  • ショートカット
  • emacs設定
  • git (ソース管理)とdiff
  • snippet
  • 拡張機能
  • マルチカーソル

開発するときに嬉しい主な機能の特徴

目が輝きそうな、機能を上げておきます。
最近はモード、キーワードカラー、インデント、整形、キー設定、キャラコード対応は当たり前のようですね。

ファイル比較(diff)


diffも標準装備されており、Kompareライクなグラフィカルな表示ができます。

やりかたは、対象のファイルを2つ以上開いている状態からスタートします。フォルダー無いの開いているファイル一覧(デフォルトはエディター左)のようなところでファイルを一つ選んで、もう一つのファイルを右クリックすると Select for Compareのコンテキストメニューが出てきます。

※ソース管理(Git)バージョンの説明は後述。

ファイル全体のインデント

コードを右クリックし、湖塩テキストメニューの Format Code (Alt Shift F) を押すと全体が綺麗にインデント整形されます。

マルチポイント修正

同じ文字列や単語は、1つ選択してから右クリックし、Change All Occurrences を選択して修正すると、リファクタリングのように、すべての文字が修正されます。

※マルチ―カーソルについて後述

Markdown

マークダウンファイルを開いて、右上のアイコン列から、 Open Preview を選ぶとプレビューができます。2画面にする(C-S-v)と楽ですね。

ちなみに私の環境では、モードをマークダウンにするだけではダメで、拡張子をmdにして読み込ませないと Open Previewが表示されません。

C-\ で ウインドウを分割し、C-SPCで markdown snippets がリスト表示されます。

 

 

 

カスタマイズもかなり柔軟です。

設定ファイル

設定ファイルの場所

ショートカットキーの設定などは以下にあります。

C:\Users\ユーザ\AppData\Roaming\Code

※ファイルの場所を見つけにくい場合Userの設定を開いて、ファイルのパスをコピーすることができます。

 

ショートカットキー(エディター編)

公式のショートカットチートシートはこちらにあります。
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

(win / mac / Linux)

 

Visual Studio Code Key Bindings
キーで設定できるものや、Visual Studio / Sublime / Vim / Atom のキーマップセットもあります。
emacs はページ先で


装飾キーのOS間の関係は次のようになっているようです。  Cや M と省略しているときは,次の表の記載のボタン押下を意味しています。

windows icon-windows  mac icon-apple  Linux icon-linux 
(C)ontrol ⌘Command (C)ontrol
(S)hift ⇧Shift (S)hift
(A)lt  , (M) ⌥option  / alt (A)lt
その他
windows
その他
Control

Jump系

キー 効果
Ctrl+Shift+o
⌘⇧o
Go to Symbol.
関数一覧でリストアップしジャンプ。
起動するとエディター中央上部のコマンドパレットから選択できます。
css ならクラスなどの定義一覧がリストアップされます。
Ctrl+t
⌘+t
Show all Symbols
シンボルの検索
カーソル位置の単語を拾って、コマンドパレットから選択できます。
コマンドパレットの先頭は#です。
Alt+← / →
⌥← /  →
Go back/ forward

元いたカーソル位置の履歴機能。バンバンカーソルを検索やシンボルの定義で飛んでも、さっき編集したやつの感覚で前に後ろに移動できます。
カーソル位置の履歴で、MS系の開発ではよくある便利な機能。おススメ。

キーが覚えられない場合、拡張機能でツールバーにボタンを付けるものがあります。
Adam's Toolbar - Visual Studio Marketplace

左右ではなく、上下移動すると 選択範囲が移動します。

Ctrl+Shift+P,
F1

⌘⇧P

(emacs)
Alt+X
⌥X
 Show Command Palette
コマンドパレットに移動

Anything/Everything/Alfred/Sublimeライクに、
関数の起動やシンボルの検索がここでできます。

emacsでいうと M-xの interactive以外も含む関数実行と各検索機能が合わさったようなものです。

頭の1文字の意味は
…ショートカット一覧の表示
:…任意の行の移動(:30と入力すると30行目に移動)
!…エラーの検索
#   シンボル
 
Ctrl+Shift+\
⌘⇧\
Jump to
matching bracket
対応するかっこに移動
一致するペアに移動
editor.emmet.action.matchTag
C+S+[    か   M+[ あたりに設定しようかと思ってる。。

HTMLの対応タグに移動します。
Ctrl+G
⌘G
Go to Line...
コマンドパレットから続けて行数を入れるとその行へ飛びます。

emacs 系は C-gはキャンセルに割り当てられているので、
M-g  か  M-g,gの割り当てあたりが良く設定されます。
F8
Go to next error or warning
エラーが出ていると、その当該ファイル、行へ飛びます。
昔の開発環境や Grepでも使うよくある機能
F12
Go to Definition
カーソル位置の関数定義場所にジャンプします。
かなり頻繁に使います。
C+F12だと行に飛ぶようです。

Altを押しながらカーソルを当てると関数定義の内容がポップアップされます。
S+F12だと参照側がリストアップされます。
Shift+F12
⇧F12
Show References
S+F12だと参照側がリストアップされます。
Altを押しながらカーソルを当てると関数定義の内容がポップアップされます。
Alt+C/ R / W
⌥C/ R / W
Toggle casesensitive/ regex / whole word

検索中に押すとそれぞれ、大文字等を気にする、正規表現、 単語単位モードをトグルします。
検索結果表示中に A+Enterを押すと選択対象全てあわせてマルチカーソルモードになります。

表示切替系

キー 効果
Alt+Shift+1 
⌥⇧1
Toggle editor layout(horizontal/vertical)
分割の切り替え。水平も欲しい時。
(縦分割、横分割を切り替えたい時)

エディタの分割は Split-Editor  C+/  (Command⌘+/)です。
よく見るとエディタ右上にアイコンがある。
Ctrl+Shift+N
⌘⇧N

New window/instance
2window 開くときに活用。
単純にもう一つウインドウを開くだけ。
ただ検索とかジャンプとかは連動できない。

 複数のプロジェクトを開くマルチルートワークスペース は開発中のようです。

Ctrl + K, D
⌘D
:編集中に保存ファイルと比較

保存しなくてもDiff。しかも別名保存しなくてもいい。
最近既定で HTMLの「デフォルトブラウザで開く」にバッティングしていたので
C+K,C+Dに変更してみました。

 

編集系

キー 効果
Alt+↑/ ↓
⌥↑/ ↓
Move line up/down
MS系の開発者や、パワポユーザならよく使う 丸ごとインデントの上下版です。
セレクション範囲まるごと  上に下に移動できます。D&D編集もあるので、パワポほどじゃないけど便利そう。

Shift同時押しは複製になります。
TAB insertSnippet
補完
タブストップ(snippet補完直後の編集中とか)インデントとかでも使われるので紛らわしい。
インデントだけでいいかも。

Ctrl+^ で intellisenseが起動します。
Ctrl+]  
Ctrl+[
⌘]
⌘[
Indent/outdent line
インデント 
個人的には S+TABのアンインデント(アウトインデント)をよく使う。CONTROL
Ctrl+/
⌘/
Shift+Alt+A
⌥⇧A
Toggle line comment
Toggle block comment

それぞれ、行・ブロック単位のコメントトグルです。
Alt+Click
⌥Click
Insert cursor

マルチ―カーソルを増やせます。

マルチカーソルを複数入れたら、複数個所同時に編集できます。
限定的でインタラクティブな置換モードみたいなもの。
Shift+Alt+L
⇧⌥L
Insert cursor at end of each line selected
選択した行末前部にカーソルを追加できます。

検索後にAlt+Enterを押すと検索範囲全部がマルチ―カーソルになります。
F2
Rename Symbol
Refactor機能です。
関数内のローカル変数だったら、関数内だけ置換してくれるなど。
言語を理解しながら限定的にニュアンスをつかんで置換してくれます。

リファレンス系

キー 効果
Ctrl+Shift+Space
⌘⇧

Trigger parameter hints

パラメータ表示?切り替え?チートシートにも設定にもありますが、何か条件で動いていないようです。。

個人的にはマウスカーソルの hover か  Alt+hover でいいかなと思います。

Shift+F12
Show References
定義関数にカーソルを置いて起動させると、参照側が大きなポップアップでリストアップされ、それぞれの定義・参照箇所がポップアップ上で確認・編集までできます。
類似な機能として、Altを押しながらカーソルを当てると関数定義の内容が詳細情報までポップアップされます。

intellisenseは C+^
emmet略語展開は TAB
snippet は TAB
PowerShell展開は S+M+Eです。

VSCode関連

キー 効果
Ctrl+K,Ctrl+S
⌘K,⌘S
Open keyboard Shortcuts
キーボードのショートカットを開く
Ctrl+Shift+K
⌘⇧K
拡張機能を開く

emacs 拡張機能

ぱっと見、3つあって一番古くて多そうな hiro-sunのを使ってました。日本人🎌かな?
今はほかに 2つあります。

Emacs Keymap - Visual Studio Marketplace

  • 今なら、エディター内からでも簡単に検索できるので、リンクを覚えておくほどじゃないです。
    もちろn一通りショートカットはそろっています。
  • C-a , C-k や M-b/f についてはストレスを感じないですし、自分にぴったりです。
  • ただクリップボードと連動せず、S-Insキーを使って操作します。またkill-ringも ring になっていないようで、M-wがありません。Register機能を先に実装しようとしているぐらいで、今1年くらい経っています。C-kのコピーをあきらめて、一旦 windows標準のコピペ機能に直して使っていこうと思います。
  • あとは C-t とか C-l がないので、 C-lは次のキーを使います。
    keyboard-scroll - Visual Studio Marketplace
  • ウインドウズ分割系もないため、新しい VSCode用の対応も欲しいところです。
  • C-s 検索にイライラするのはエディター本体の機能のせいのようです。


そういうことで、次のような設定を ファイル → 基本設定 → キーボードショートカットで設定しました。あいまい検索やキーの検索もできるので、探せると思います。ちょっと前は jsonの編集でした。どのタイミングなんて探しにくかったですしね。

  • C-x s を全保存に設定
  • C-l  は 上記で入れて対応済み
  • C-w , C-y M-wは クリップボード系に設定
  • C-x 0,2,3は保留
  • C-kで始まるショートカットが多いので全滅を覚悟する。ちなみにデフォルトの cutは選択されていないと 行頭でのC-kの動作になるようです。
キー 効果 検索用コマンド名・キーバインド設定例
M-g
⌥G
行番号でジャンプ {
"key": "alt+g",
"command": "workbench.action.gotoLine",
"when": "editorTextFocus"
},
C-x 0
ゼロ
⌘X, 0
emacs:分割したウインドウを閉じる
(vscode:グループのエディターを閉じる)

{
"key": "ctrl+x 0",
"command": "workbench.action.closeEditorsInGroup",
"when": "editorTextFocus"
}
C-x, 1
⌘X, 1
他のグループのエディターを閉じる
C-x, 2
⌘X, 2
エディターの分割
C-x, 3
⌘X, 3
エディターグループの縦横を切り替える
C-x O
オー
⌘x, O
emacs:他のウインドウへ移る
vscode:次のグループにフォーカス

または、エディターグループ間で移動する。
C-L
⌘L
カーソルを中心にウインドウビューを調整 Scroll to middle, top or bottom of the screen
emacs.C-l
C-x s
⌘X,S
全保存 Save All
すべて保存
Alt-/ 補完機能がCtrl+Spaceの選択開始でつぶれるので、editor.action.triggerSuggest を入れてみます。 C-^で Emacs Friendly Keymap は設定しているようです。

Emacs Friendly Keymap - Visual Studio Marketplace

    • こちらは C-l , M-% や window分割関係も用意されていて、クリップボードと同期
      しているようです。
    • hiro-sunのgitからフォークして クリップボードの親和性をいったん高めたようですね。
    • C-t の transpose char や kill-ring は EmacsPigmee を使ってみてはどうでしょうか?
      • C-aも 行頭へ先に移動します(cursorHomeは先に、ブランクを除いた先頭の文字に移動する。)。
      • C-Spaceで選択時に、 C-wでカットしても、選択が維持されるうえに1文字以上選択していないと、選択が怪魚されないのをカスタマイズ可能なhookコマンドで対処できます。
    • ウインドウ分割系がデフォルトでサポートされています。

Emacs - Visual Studio Marketplace

こちらもウインドウ関連がそろえられていて  C-x s の全保存も最初からあります。

クリップボードや selection , C-a キーなど、色んな人がカスタマイズして展開してます。

【VSCode】Emacs キーマップ支援 の小人EmacsPigmee【拡張機能】
kill line , killring の 実装や、  emacs friendly での cut/paste時に、 自動 選択解除機能などがあります。

カラー設定

基本は白字に黒です。テストでも読むスピードが黒よりも早く疲れないそうです。
今どき液晶が流行ってますので、白と黒を抑えめにして(灰色に若干近づけ)コントラストとPCの輝度を抑えれば、目に負担は少ないと思います。節電についても、有機ELでない場合、バックライト方式であるため、効果はほとんどないと思います。

◆読みやすさ、購入率
The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
  仮説2  白地/黒字

Dark Side of UI: When Dark Is Good for Users. – design4users  より
https://design4users.com/2016/12/09/dark-side-of-ui-when-dark-is-good-for-users/


テーマ

結局テーマをいくつかインストールしましたが、黒め系が多く、色もくすんだ漢字ばかりなので
デフォルトのテーマで背景色をまずは変更しました。主張しすぎず、はっきりわかり、気持ちも前向きになる薄い色やポップ目の色に直していこうかなと思ってます。

Parasol Theme - Visual Studio Marketplace

設定

ファイル → 基本設定  (C-,) で ユーザ側のグローバル設定ファイルが開きます。
以下を参考に追加していけます。カテゴリを指定する必要があります。
色を変えて、保存すればすぐ反映されます。類似の拡張機能を読み替えるときは再読み込みが必要なものもあるかもしれません。

インデントの線や、80カラム目、100カラム目を同時に区切りを表示することはできるようですが、ユーザ設定でないほうで  Line等を検索すると出てきます。

カーソル行は色が指定できないようでした。→ありました。Borderは前後に色がつくのでいらないですね。。

"editor.renderLineHighlight": "gutter",
gutterにすると、ライン番号のところが、 allにすると全体が、 lineにすると ラインに色や装飾がつくようです。(色のセレクションの中でなく、最上位層の括弧の中に書く。)

 

選択した時と、カーソルを置いた時で似たような背景色だったので、コピーできているのかとても水らかったです。選択色は標準の青系のまま、カーソルを置いた時勘違いしないように色を変えています。

"editor.selectionHighlightBackground": "#ebeb89"

選択範囲は、もっと明確に反転したいですが、キーワードに色が付きすぎて、前景色に色が付けられません。色を濃くできないため、ダークテーマだと一層見ずらいです。


検索時、インクリメンタルサーチ中  類系色で合わせカレントのほうの検索語は濃くします。

括弧の色は bracketのキーワードで探します。しかし前景色が買えられない。。
背景色は何色にしようかな、いったん保留。。間に色付けても確かに不便かもしれない。

"editorBracketMatch.background": "#ff5",

拡張機能:
bracket / brace / paren / quote で検索するといくつか見つかります。


Rainbow Brackets - Visual Studio Marketplace

常時括弧に色を付け、しかも3段階ループで指定可能な色区分け設定です。
常時起動は集中度や疲労度に対して、微妙な感じはしますが、カラフルになります。
上で記載したようにデフォルトでも色はつくので好みの問題ですね。
ただ、括弧がおかしいと赤くなります。


デフォルトは色が暗いのでもうちょい鮮明な色に変更しました。
TimeOutは更新頻度への遅れ具合です。括弧を書いているときに、すぐに反映させたくない時使えると思います。 setTimeOut関数を使っていると思いますが 単位は msecですね。

<color> - CSS | MDN

Rainbow Brackets - Visual Studio Marketplace
こちらは、デフォルトから色は落ち着いていいですね。4段階までありそうです。
ただダークテーマに厳しく、変更設定はないかもしれません。

Scoper - Visual Studio Marketplace
括弧の範囲をすべて背景色で塗るので、多少うざさがあるかもしれません。
デフォルトでは、色が濃く見えなくなります。
ReadMe.mdではスペルミスしていますが、正しいスペルで反映されました。

ミニマップも変えられます。設定は
色ではなく、細い文字表示してもしょうがないだろと思い、
省メモリもかねてブロック表示にしたら、こちらのほうが見やすい。これで十分です。

"editor.minimap.renderCharacters": false,  設定は 色セクションではなくトップに



ガターは行番号のところです。
同じ色だと行頭やインデントが見ずらいので若干暗めに設定しておきます。

"editorGutter.background": "#eec",

サイドバー、ステータスバーは周りとの兼ね合いも考えつつ、テキトーに

ルーラーやインデントのガイド用の線も色が買えられるようです。
ほかにもあるので気になる人は色々見て探ってみると面白いかもしれません。

アイコン

あたりが好みです。

ニコラスケイジ好きな人はこちら
そこらじゅう ニコラスにしちゃってください。

主な機能

Git

ソース管理の位置ツールとして使用します。
デフォルトは gitのようなので、ローカルですぐ使い始められます。

使い始め

  1. git をインストールし、パスを通しておく
  2. 📁でソース管理ツールを使用する
    (左の中くらいのアイコンがあるアクティブバーでブランチしているアイコン)
  3. 開いたプロジェクトのフォルダをチェックし初期化してくれる。
  4. あとは、変更差分が表示されているので+ボタンをクリックし、差分比較し コミット+コメント
    (初回は、差分も何もないが)

ソースを比較したい時

シチュエーション やり方
ソース管理しているものに修正があるとき ファイルを右クリックで比較
編集中に保存ファイルと比較(C+D,K : うまく動かない場合ショートカットキーを変更しておいたほうがいい)
クリップボードと比較する場合 C+D,C
2つの実ファイルを比較 ソース管理サイドパネルから、片方を選択し、もう片方ご右クリックで比較を選ぶ
修正がない時 ソースを管理していない場合:上記のクリップボードのやり方か、直接2ファイルの比較が可能。
2個以上前を見る場合下記のやり方を参照
過去のgit

コマンドプロンプト(コンソール)で普通に確認
VSCodeのサイドバーから、ファイルを右クリックしてターミナルを開き(直接の見方ではないが)
git diff HEAD^
( git dif HEAD^..HEAD)

もっと前なら  HEAD^^とつけていく

staging(add) 前なら git diff
                        後なら git diff --staged


HEAD^^  >  HEAD^ > HEAD > ”空” >   --staged  
という並びの新しい順のイメージ

2つ並べれば、ハッシュ値同士、ブランチ同士、ファイル同士を比較できる。
git diff  branchA branchB

修正点を思い出したい時、どこまで修正したか忘れた時、
(コミットログを見たい時)

VSCodeのサイドバーからコマンドプロンプトを開き、ターミナルタブから
git log

Git History Diff - Visual Studio Marketplace

エディター上に履歴情報を表示できます。

Git History - Visual Studio Marketplace
履歴情報をツリー形式で表示できます。

GitLens — Git supercharged - Visual Studio Marketplace
つくりは素晴らしい。ソースコードの上にコミット情報を載せてくれます。
ただうっとおしいので、残念ですが集中の妨げになるかも。

開発を少しやり直したい時
(前回のコミットに/で戻す)

・”前回のコミットを戻す”をVSCodeのサイドバーのソース管理から選ぶか
ターミナルで以下を入力

git checkout
git checkout ブランチ名
git checkout HEAD^ ファイル名

※もちろんワーキングディレクトリとして、現在編集していたディスク上のファイルは上書きされます。

・ステージングにaddして確保された内容を戻す場合
ソース管理サイドバーで -を選び戻すか、ターミナルで以下を入力

 git reset HEAD <ファイル名>

開発の方向を変えたい時、ちょっと試しに作ってみたい時、事前確認したい時

・ブランチ一覧の確認
git branch

・ステータスバーからブランチ名をクリックし、”新しいブランチの作成”を選ぶか下記をターミナルから入力
git branch 名前

・ブランチの切り替え

ステータスバーからブランチ名をクリックし、ブランチを選択または、以下略。

git checkout ブランチ名

過去コミットからブランチ作成+checkout

git checkout 分岐対象コミットハッシュ値  -b ブランチ名 

ローカルを残しておきたい時、サイドバーでstashを選ぶか、以下略

git stash save "message"  
戻すときは、以下のコマンドを参考にします。
git stash list git stash pop , git stash branch branch名 git stash apply, git stash drop/clear

拡張機能を取り込みたい時、新規開発を始めるとき

・ターミナルから入力

git clone 取得元レポジトリ
(完全に新規でない時、調整したい時 git init , remote add, git pull のセットをそれぞれ順にやってもいい)


もう1,2個ファイルを先ほどのコミットと合わせたい時

ステージングにあげてから以下のコミットをするとコミットをまとめると同時に
コミットメッセージを上書きできます。

git commit --amend

snippet

snippet その1

htmlモードで、

html:5  を入力して TABを押すと 以下のコードが代わりに挿入されます。

これは、Emmetが入っているため、以下の様な Zen-Codigngができます。カーソルも tdのところに移動されて便利。
table>tr>td+td

w100p だと

c#0 だと

など HTMLモードでも cssの ZenCodingが可能です。

snippet その2 登録

for で呼び出せる JavaScript ループの例  以下の様なコードを  snipetの中にコピペし保存してください。

Ctrl + Space で実行できます。

Snippets in Visual Studio Code

python , C#,  Go, Angular の snippet集があります。

 

Snippet集

HTML/CSSはemmetがあるからskip。

登録の仕方は ファイル → 基本設定 → ユーザスニペット から コマンドパレットで、言語(javascript.json)を選びます。フォーマット例に従って記載し保存。
使用方法は、prefix を入力して TAB、または自然に候補に出てくるので選ぶだけ。

${1:hogehoge} のようなフォーマットで囲われたところは TAB STOPで 同じ個所は snippet入力直後に同時に編集できます。
1か所編集したら TABキーを押すだけで カーソルをちまちま移動せず、次の候補に飛び、修正することができます。括弧のないかに書いた:以降の文字はそのまま、OUTPUTされます。
独自のスニペットを作成 | 非公式 - Visual Studio Code Docs

JS/JavaScript

JS Snippets - Packages - Package Control

javascript-snippets

 

Java


vscode-java/java.json at master · redhat-developer/vscode-java

 

python

Python Code Snippets

Python Snippets | コピペ用のPython便利コードをメモっていくサイトです

ruby

ruby-snippet - Visual Studio Marketplace

ruby.tmbundle/Snippets at master · textmate/ruby.tmbundle

vscode-ruby/snippets at master · rubyide/vscode-ruby

php

vscode/extensions/php/snippets at master · Microsoft/vscode

マルチ―カーソル


Altを押してマルチ―カーソルを増やせます。
Ctrl にしたい場合、ユーザー設定に記載すればOKです。
"editor.multiCursorModifier": "ctrlCmd",

マルチカーソルを複数入れたら、複数個所同時に編集できます。
限定的でインタラクティブな置換モードみたいなもの。

for 文の変数など、いろんなところで活躍するかもしれません。
refactor機能があるので主に文字列あたりですが。

Alt+Shift+I :  選択した範囲の各行の末尾に、マルチカーソルを置いてくれる。
Ctrl+Shift+L : VSCodeでは単語やセンテンスを一個選択すると、同じ文字が選択される。  その時にこのコマンドを打つと全部それぞれに、マルチカーソルが置かれる。



ヘルプ → 対話型プレイグランド
で多少いじれます。

Basic Editing in Visual Studio Code

 

【VSCode】マルチカーソルで単語や行をローテーションする【拡張機能】
マルチカーソルの単語を swap したり rotate したりする拡張機能。

拡張機能

使用概要


インストール

Web 上からも、 VSCode上からも特に迷わずインストール可能
VSCode では、 アクティブバーの 5つ中5つ目のボタンに拡張機能があります。
(Ctrl + Shfit +K)
そこから開き、検索してインストールできます。
説明も VS Code内で見られます。ただ見ながら設定が面倒。

一時停止

拡張機能を開いた後、サイドパネルの…ボタンを押すと、有効な拡張機能一覧を選択できるので、そこから選び、無効ボタンを押してください。

確認

似た様な機能をインストールしなおした場合、片方を無効にして再読み込みをかけないと動かないものもあります。

作成

nodeをインストールし  TypeScript/JavaScript で開発できます。
ただ TypeScriptの例や サンプル、公開者も .ts形式ですので
.jsだと腹が立つぐらい修正がわかりにくいです。 VC 6.00の頃のよう。。
ライブラリの活用・連携方法まで行ってもらわないと、構成的な制約が読み取れませんから。

Building extensions for VS Code

各リソースへのアクセスは、Contribution  pointsという、アクセスポイントから
コマンド、キーバインディング、エディター、メニュー等 Activate時(拡張機能インストール時)に
登録するようです。

実際のAPIは NameSpace API を参考にすると思います。
またかなりの割合で Gitに登録されているので、似たような機能があるソースを参考にするのが早いかもしれませんね。

環境としては Hello World があるのですぐできます。
後悔は  Studio の Team アカウントを作っていれば
パッケージを圧縮せず、 VSCode上から直にWeb経由することなく公開することが可能です。
料金もかかりません。

もちろん圧縮して個人的に配ることも可能です。

上記リンクから、少し違うページの Publishing のページを確認してください。

一覧

一般系

jumpy

画面を単語単位ぐらいの行x列に区切って、 2文字入力するだけでその行へ飛べる機能です。
vi/emacsとか知らなくても、誰でも直感的に細かい移動がさくっとできます。
カーソルのある行が、行頭とそれ以外で多少動きが違うようです。
なんか二つの拡張パッケージがありますが、作者は Atomの同名拡張機能にインスパイアされたようです。

起動は S + Enter で、 2文字を入れると飛びます。 ESCでキャンセルできます。

キーバインディングに出てこなかったので、

その画面から、keybindings.json を開き
以下のように設定しました。

これらの内容は ReadMeに書いています。

Adam's Tool bar

カーソル履歴を戻る機能をステータスバーにつけられます。
ほかにもありますが、それを目当てで導入しました。

Active bar こちらは Active barなんだけどステータスバーなんです!
いや、謎解きしたいわけじゃないんだけど。ステータスバーにアクティブバーのアイコンを載せ左右の画面を広く使えるようになります。

indentとか、空白
拡張名 機能
Empty Indent 空行の余計な文字をsave時削除してくれます。
Trailing Spaces 修正ラインのみ、save余計な行末の空白を削除してくれます。
indent4to2 4 indent を 2indent にしてくれる。
簡単そうなプログラムだけど、いい。
Indentator 直前のインデントガイドを表示してくれるので、それほどくどくない。
しかも、実質 括弧範囲も見やすくなる。 scope いらないかも。
indent-rainbow 1インデント目、2インデント目と色を変えられる拡張。遅延設定や除外設定の他、マッチしないインデントに色も付けられます。
これも、ちょっとくどい感じがします。
おとなしめの使い道があれば、、、体裁を気にする人向けとして、イレギュラーケースだけ色付けてもいいかもしれません。

 

文字列操作系
拡張名 機能
insertDate String 名前の通り。
日本語バージョンではありませんが。
Path autocomplete 名前の通り
いつか使う日が来るだろうと。。
Path Intellisense 名前の通り
いつか使う日が来るだろうと。。ワクテカして待ってます。
Google Search By Browser

選択語を標準ブラウザで google検索します。すんません。(いやなにが?)

     googleで検索

Web/Front End系


Auto Complete Tag

以下の2つの機能を統合したもの。依存関係で両方入るのでややこしい。

Auto Rename Tag 開始タグを変更すると終了タグも書き換えてくれます。
Auto Close Tag  </までいれると 閉じてくれます。

CloseTagは標準で入りました。
https://github.com/ayatokura/JP-VSCode-Docs/blob/master/release-notes/v1_16_ja.md#html-close-tags

IntelliSense for CSS class names in HTML HTMLを編集しているとき、classなどの検索候補に cssから登録してくれ、選びやすくなる機能。
CSS Peek HTMLを編集しているとき、class名から cssと連動(Jump)してくれる。
ESlint

js のコードチェッカーです。

インストール

  1. nodeを入れる
  2. npm install -g ajv 依存関係で必要なjson validatorも入れる。
  3. npm install -g eslint   コマンドをVSCodeの統合ターミナルで入力してインストール
  4. npm --init を入力して package.jsonを取得
  5. とあるプロジェクトフォルダーでさらに eslint --init で 対話式に設定ファイルを作成し(2番目のgoogleを選択)、質問にEnterで答えると、.eslintrcファイルが作成される。
  6. 問題のタブにlint結果として、警告等が出力される。

他のプロジェクトでも毎回作成するのかも。

ファイルの中身はシンプル。

Hightlight-matching-tag マッチするタグをハイライト。
ただ、背景色じゃなくて、それぞれのタグの前後に縦線が入れられるみたい。
Open in browser 同名の拡張が一杯ある。デフォルトブラウザでHTMLを開く拡張。

 

その他設定

フォント設定

Visual Studio Codeの設定「虎の巻」:IDE編:特集:Visual Studio Codeを使いこなそう! - @IT

HTML設定

開始タグを入れた後、終了タグが入るのが邪魔だったのでオフにしてみた。
これが正解だった。

CloseTagは標準で入りました。
https://github.com/ayatokura/JP-VSCode-Docs/blob/master/release-notes/v1_16_ja.md#html-close-tags

検索設定

インクリメンタルサーチの検索ボックスが消えず誤動作するので、探したが特になかった。
以下の点を理解してあげないと。

・検索開始時、選択範囲の検索語を拾う設定がある。
・最後に検索した語を覚えていて、次回起動時に自動で検索開始されるところから始まる。
・検索しようとC-s押して単語を入力しようとしたら、選択されていてソース上の単語が消える。(問題はこれ!  もしかしたら emacs の拡張が悪かったのかもしれない: 今はemacs-friendlyの方を使い始めた。)

おまけ

Toggle Menu Bar

メニューが消えた場合も、慌てずに、 Ctrl+Shift +P キーから、 Toggle Menu Bar コマンドを選択すると、メニューが復活します。

リンクオープン!

HTMLで Aタグのところでカーソルを置きコマンドから Open Link を押すと、ブラウザでURLを開きます。

その他設定

 

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です