Tips

●●VS code

拡張機能

★★★:インストールすべき ★★:必要性を感じるならインストールすべき ★:趣味による

---git関係

GitLens — Git supercharged ★★★

VScodeのgit機能に足りない部分を補ってくれます。

Git History ★★★

開いているファイルの編集履歴を、ブラウザの戻る・進むボタンのようなUIで操作できます。

ツリー形式で各ブランチの分岐を表示できます。

---開発補助

ローカルサーバーを立てて編集中のHTMLファイルをブラウザで表示できます。HTML/CSSを書いて挙動を確認したいときに便利。ホットリロード機能も有り。

共同プログラミングを可能にする拡張機能。githubのアカウントが必要(?)。

２つのファイル(クリップボードも)の差分表示(diff)が出来ます。たまにしか使用しませんが便利ですね。

VScode上から簡単に別のプロジェクトファイルを開くことが出来ます。

●●ショートカットキー

macOS

隠しファイルの表示 (Finderにて) shift + command + .

Spotlight検索 command + space （ファイル検索・アプリ起動をキーボードから行う場合）

範囲選択スクリーンショット ctrl + command + shift + 4 スクリーンショットがクリップボードに保存される。だいたいのアプリがcommand + vで画像を貼り付けられるためよく使用する。スクリーンショットファイルが残らない。

chrome

検索バーへカーソル移動 command + l

インスペクタ（開発者ツール）を開く command + option + i

インスペクタのエレメント選択（ブラウザ上でマウスホバーした部分のソースが見れるあれ） command + shift + c ←重要

タブを開く command + t

タブを閉じる command + w

閉じたタブを再度開く shift + command + t

VScode(Mac/Windows)

ファイル名検索 command + p / ctrl + p ←重要

コマンド検索・実行 shift + command + p / shift + ctrl + p

単語の選択 command + d カーソルが置かれた単語を選択状態にします。

同名の単語にマルチカーソルを当てる (選択状態で) command + dマルチカーソルでよく使用します

縦にカーソルを増やす command + option + ↓↑ マルチカーソルでよく使用２

option + ↑↓ 上・下の行と入れ替え

ターミナルの分割・画面の分割 command + |

キーボードショートカット(古くなっているものもあるかも…)

VScodeのキーボードショートカットであえて設定しているもの

ターミナルを開く・エディタにカーソルを戻す

code:json

{

"key": "cmd+j",

"command": "workbench.action.terminal.toggleTerminal"

}

フォントの拡大・縮小

code:json

{

"key": "shift+cmd+=",

"command": "editor.action.fontZoomIn"

},

{

"key": "shift+cmd+-",

"command": "editor.action.fontZoomOut"

}

VScodeはcommand + shift + +- を押すとエディタだけでなくメニューまで拡大されます。画面共有時に文字だけ拡大したい場合などで不便なのでフォントサイズだけ変更する設定を入れています。

git checkout (ブランチの選択・新規作成)

code:json

{

"key": "shift+cmd+c",

"command": "git.checkout"

}

画面左下にブランチの選択・新規作成ボタンがありますがキーボードからもアクセスできるようにしています。

●●CLIコマンド

zsh

いきなりzshについてですが、zshは設定を行うことで、cdを省略したり補完が使いやすくなるなどあるので調べてみましょう。

ctrl + c

実行中のコマンドの（強制）終了。ctrl + cが割り当てられていることが多いです。

ctrl + r

↑↓でコマンド履歴を戻る・進むことが出来ますが、ctrl + r はコマンド履歴に対して文字検索出来ます。

curl または wget

rm -rf <対象ディレクトリへのパス>

とりあえずフォルダ・ファイルを消したい場合はこちら。

open .

カレントディレクトリをFinderで開く。MacOS限定(?)

code <パス>

VScodeをインストールしたとき設定が行われていれば、指定したフォルダをVScodeで開く。

<コマンド> | grep <検索ワード>

この場合、grepは実行されたコマンドの出力結果から検索ワードに該当する内容だけ表示するために使用しています。

例えば、

ls ./ |grep .js

使用するが説明が面倒なコマンドたち

code:bash

ls -a フォルダの中を表示(-aで隠しファイルも表示)

ls -l フォルダの中を権限情報付きで表示

pwd カレントディレクトリの表示

touch ファイルの作成

mkdir フォルダの作成

cat ファイルの内容を表示。cat ~| grep ~でファイル内検索できる。

cp ファイルのコピー

mv ファイルの移動

Vim

CLIで使用するエディタ。上記のcodeコマンドが使用できるのであれば、使用するシチュエーションは少ない。ただ突然何かのコマンドの拍子に出現して、終了することすらできない、ということがあるので知っておくとよい。

ツール

メモ

Scrapbox

MacOS

有料。Windowsと同じくウィンドウを画面端に移動した時ウィンドウを整列させる機能のためにインストールしています。他にも同様の機能を持ったアプリはありますが、BetterTouchToolが最も好みの挙動でした。ただし多機能で有料です。また、logicoolのマウス・キーボード設定アプリと(恐らく)干渉するようで、windows,mac共に予想外の影響を与えることがあります（自分のマウスのエンコーダーが死んでるだけかも…）。

有料。MacOSの画面解像度を既定値以外に設定可能にするアプリ。デフォルトよりも文字を小さくして多くの情報を表示できる

USキーボードの日本語入力に対応するため。英かなでも良いが、Chrome Remote Desktopを使ったときにうまく動作しなかったため変えた（気がする）

環境構築無しでTypeScript/JavaScriptを実行できるアプリ。無課金でも使えましたが最近無課金だとconsoleを一定時間表示しないよう変更されたため、無課金ではあまり使い物にならない。課金するとnpmパッケージも呼び出せるようになります。

MacOSのパッケージ管理アプリであるhomebrewのバージョン更新を監視してくれる。

翻訳サービスDeepLのデスクトップアプリ版。command + cを2回押すと翻訳を開始してくれる機能が非常に便利で翻訳の評判も良い。

有料。代表的なプログラミング言語を(一応)環境構築無しで実行できる。TypeScriptも使用できるが使用感はRunJSに劣る。

寄付制。クリップボード履歴管理アプリ。文字だけでなく画像も履歴に残る。コードやドキュメントを複雑に切り貼りする機会が多く、意外と使用頻度が高い。使ってみて便利さに気づいた系。（最近気づいたがたまにメモリを爆食いしていることがある）

有料。iPhoneのように、文字を選択すると横にコピー等のメニューを表示する。

開発支援ツール。いまのところ使用機会はほとんどない…。

curl/wgetで触れましたがGET・POST等HTMLリクエストを発行するGUIアプリ。リクエストを飛ばすだけの場合機能がリッチすぎ、UIが若干複雑ですがJSON・認証情報の追加などもGUI上から行えます。

massCode ★

メモ帳アプリ（本当はスニペットアプリ）。無料でMacのメモ帳と同じく1段階の階層構造を持っている。少し使いづらい部分もあり。