プログラミング学習

VSCodeの初心者向けおすすめ書籍/本と便利な使い方

プログラミング学習

vscodeの便利な使い方です。個人的な覚書をかねていまwindows10でpathを上書きせず複数設定する方法す。主にjavascriptで使っています。

特集:Xserver VPS開始!マイクラや開発におすすめで安いVPSサーバー!

VSCodeの便利な使い方のおすすめ書籍/本

マイクロソフトの中の人が書いた本があったため、試しに購入してみました。gitの使い方もかいてあり、文章がとてもわかりやすかったです。必要なところだけつまみ読みすればいい気がします。

他にはデバッグや設定などもいろいろと書かれています。マイクロソフトの本なのでやはりというかTypeScriptの解説はありましたが、言語とわずそれなりに使える本な気がします

徹底解説Visual Studio Code
著:本間咲来
¥3,102 （2022/03/02 21:48時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング

こちらはデバッグに特化した本です。いろいろな言語に対応しています。

Visual Studio Codeデバッグ技術
著:森下 篤
¥1,980 （2022/12/01 23:05時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング

UdemyでもたにぐちまことさんのVisual Studio Code活用講座が評判がよいです。この方は結構網羅的に解説するのでわかりやすく全体がわかります。

Udemy

言語別におすすめUdemyのおすすめ教材もまとめてあります。

【評判】Udemyのプログラミングおすすめ/フロントエンド/バックエンドエンジニア(Javascript他)
ebookbrain.net
スポンサーリンク

VSCodeでsettings.jsonの開き方

わかりにくいので、めもしておきます。

settings.jsonの開き方は以下のとおり。

歯車アイコン > setting > 検索ボックスに適当なワード　(例)json > edit in settings.json

もしくはWindows/Linuxなら

File > Preferences > Settings> 画面右上のOpen Settings(Json)のアイコン

macOSなら

Code > Preferences > Settings 画面右上のOpen Settings(Json)のアイコン

スポンサーリンク

VSCodeの検索

検索する際に、いくつのトグルボタンがあります。

Match Whole Word のトグルボタンは完全一致、大文字小文字のトグルボタンもあります。

VSCodeの拡張子検索

  1. 検索ボックスの下にある「…」のアイコン
  2. file to include(含める)、file to exclude(除外する)に*.mdみたいな感じで入力する
スポンサーリンク

VSCodeのターミナル操作

visual studio code(VS Code)のターミナルのシェルを変更(terminal.integrated.shell)

1行settings.jsonに追記して保存、ターミナルの再起動によりターミナルの表示を変更できます。

{
    "terminal.integrated.shell.osx": "/bin/csh",
}

もしくはターミナルの画面右上のセレクトボックスから選択すると、settings.jsonが書き換わります。

以下のような設定があり、どれかをチョイスする感じです。

"terminal.integrated.shell.osx": "/bin/bash",
"terminal.integrated.shell.osx": "/bin/sh",
"terminal.integrated.shell.osx": "/bin/zsh",

上記のパスは現在値だけ表示されます。

"terminal.integrated.shell.osx": "/bin/csh",
"terminal.integrated.shell.osx": "/bin/tcsh",

上記はフルパスが表示されます。

"terminal.integrated.shell.osx": "/bin/ksh",

上記は現在値が表示されません。

windowsの場合はコマンドプロンプトを指定できます。

"terminal.integrated.shell.windows": "C:\\Windows\\system32\\cmd.exe",
スポンサーリンク

VSCodeのショートカット

コメントアウトショートカット

行をコメントアウト Command + /

ターミナルのクリア

vs codeのターミナルのクリアは以下のコマンドです。

claer

実行中止

control + C

短径選択(ボックス選択)

短径選択はこうです。

  1. Shift + Option + 開始点をクリック
  2. マウスの左クリックをしながらドラッグすると短径選択できる

ボックス選択のコピペしたい場合はこうなりますね。

  1. Shift + Option + 開始点をクリック
  2. マウスの左クリックをしながらドラッグすると短径選択できる
  3. command + C
  4. Shift + Option + 開始点をクリック
  5. マウスの左クリックをしながらドラッグすると短径選択できる
  6. command + V

感覚的にはカーソルをピッとあわせ、Shift + Optionを同時押しして押してマウスをぐいっという感じですね。

半角1文字とかだと繊細な操作になるので、うまくできないときは落ち着いてやりましょう。

VSCodeでハイフン区切りのClass名をダブルクリックで選択

vscodeでハイフン区切りのClass名をダブルクリックで選択できるようにします。これでケバブケースが使いやすくなります。

Code > Preferences > Settings > editor:wordと入力 > editor.separatorの項目から-(ハイフンを削る)

エディタの設定で変えられるようになったのち、アンダースコア派ではなくなりました。ハイフンの方がshiftをおさないぶん、若干入力が楽かもしれませんね。

vscodeでハイフン区切りのClass名をダブルクリックで選択

idもハイフン。googleの規約。

Qiitaの記事でもキャメルケースと書かれたものもありますが、lint系の拡張をいれるとキャメルケースはエラーがでるようになりました。

一度、他人のサンプルをコピペで動かそうとしたとき、Chromeでキャメルケースで動かずトラブったことがあり、ハイフンにしたら治った経験もあります。

Googleのコーディング規約を日本語訳したサイトにも書いてありました。なかなかよさそうなサイトですね。

“demo” と “image”を区切っていない
.demoimage {}

アンダースコアを使っている
.error_status {}

video-id {}

.ads-sample {}

https://fueru.info/design/html-css/google-styleguide/

Vs Codeでfinder(エクスプローラー)を開く

ぱっと見、右クリックで開くがないようです。。ターミナルからMacのFinderを開くとに発想を置換すればOKです。カレントディレクトリを開く方法は次のコマンドです。

// Macのfinder
open .
// Windowsのエクスプローラー
start .

VSCodeのファイル差分比較

画面左のファイル選択メニューを使います。

  1. 最初のファイル：右クリックメニュー > Select for Compare
  2. 2つ目のファイル：右クリックメニュー > Compare with Selected

もしくは

左メニューで2つのファイルを選択 > 右クリック > Select for Compare

VSCodeのファイル差分比較(その他の方法)

View > Command Palette > compareと入力

いくつか種類があります。

 File:Compare Active File With…> 任意のファイルを選択できます

他には

 File:Compare Active File With Clipboard (クリップボートと比較)

VS Codeの上下分割で比較

View > Editor Layout > Split Up

閉じるとき×ボタンです。

同じファイル内だけど、少し離れた位置にあるものを軽く目視で比較するときなどに、わりと便利です。

VsCodeディレクトリ構造やフォルダ構造をファイル名こみで表示

Macです。

tree

Windowsです。

tree /f

参考になれば幸いです。

コメント