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

プログラミング学習

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

特集:フリーランスWebエンジニアのための週2からのリモートワーク

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他)
Udemyのヘビーユーザーです。プログラミング、デザイン、動画編集、資産運用などudemyのすべて実経験でおすすめコースをまとめていきます。Udemyは日本に来る前から愛用しています。半分ぐらい英語の講座を買っています。udemyはセールが...
ebookbrain.net
スポンサーリンク

VSCodeの設定

vscodeの公式

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...
code.visualstudio.com

visual studio codeの特徴は以下のとおりです。

  • Visual Studioコードはマイクロソフトが開発。
  • Windows専用ではなく、Linux、Mac OS、Windowsで使えるクロスプラットフォームエディタで、必要に応じてプラグインを拡張できます。
  • 無料です。
  • Visual StudioのようなIDEではなく、あくまでエディタなので動作が高速、軽量です。
  • コードの補完も強力です。
  • エディタとは言え、拡張機能でコンパイルもデバッグもできます。
  • Visual Studio（IDE/統合開発環境）とは共存可能。

macとwinの違いはないようです。

2015年にリリースされてものすごい勢いで使う人が増えています。phpだとbracketsからvisual studio codeに乗り換え組も。

https://twitter.com/kyoochaan/status/1181685919104942080
twitter.com

stackoverflowのMost Popular Development Environmentsをみましょう。シェアがわかります。

Stack Overflow Developer Survey 2018
Get insights on the world’s developers from the largest and most comprehensive survey ever. Demographics. Technologies. Salaries. Career satisfaction.
insights.stackoverflow.com

個人的にも開発環境は言語を問わず、すべてvisual studio codeに統合していく流れになっています。マイクロソフトは最近いい感じかもですね。

プログラミングを書くなら最良のエディタかもしれません。

vue.jsの場合、nodo.jsをインストールして環境変数を指定する流れになります。

visual studio code(VS Code)のデフォルトのブラウザをsafariからchromeに

vs codeからジャンプするとsafariに飛びます。VS Codeではなくこの問題はmac側の設定を変えます。

りんごの[アイコン] > システム環境設定 > 一般 > デフォルトWebブラウザ

スポンサーリンク

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のコンフリクト

画面左を残すなら、ボタンは右側にあるRevert(元に戻す)で対応。
画面右を残すなら、 ボタンは左側にあるAccept/Overwriting(上書き)で対応。

こちらのサイトで画像つきで解説。

Visual Studio Code Tips and Tricks
Visual Studio Code Tips and Tricks for power users.
code.visualstudio.com

ひっくり返っていてui的にどうなの?と思うけど。。左なら左、右なら右の方がわかりやすい。。

VSCodeでGithubのクローンを作成

大抵、githubと連携していますよね。今回、別フォルダで作成してpullしてくる形です。ちなみに、今回、原因不明のトラブルが発生したため環境の再構築のため2つ目のローカルリポジトリを作ります。ついでにフォルダの位置も引っ越します。

Vscode側の操作

File > New Window

github側の操作

Github > プロジェクト名 > Codeの緑のボタン(Clone or downloadから名前が変わりました。) > アドレスをコピー

また、Vscode側に戻ってアドレスをペーストします。

左の3番目のアイコン > Clone Repository

上記はコマンドパレットからの操作も可能

アドレスを入れる > 保存先を選択 > Select Repository Location

Would you like to open the cloned repository?

Open

参考にした動画は以下のとおりです。

しかし、cloneするだけでは動かないです。

npm run dev
sh: nuxt: command not found

github上には、node_modulesがないからです。落としてきたデータにも当然ないです。だから作成する必要があります。

npm install

余談ですがファイル数が多いためdropboxでも管理していると同期がはじまってCPUが暴走します…。

インストールすると部品が揃ったため実行できるようになります。

npm run dev

ただし、.envなどのファイルはローカルで管理しているはずなので、そのあたりは別途移植が必要になります。

.gitignoreでnode_modulesを外す

.gitignoreのファイルもありません。

.gitignoreはgitで管理したくないファイルを省くものです。Vs Code側から次のように尋ねられることがあります。

The git repository at * has too many active changes, only a subset of Git features will be enabled. Would you like to add ‘node_modules’ to .gitignore?

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のファイル差分比較

View > Command Palette > compareと入力

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

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

上記が１番よく使うかもしれません。他には

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

もしくは

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

ほかにもあるみたいですけど、よく使うものは上記です。

VS Codeの上下分割で比較

View > Editor Layout > Split Up

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

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

VSCodeのフォルダ管理

基礎中の基礎ですが、久々にやるとたまにあれって？と思うこともあるため。

新規プロジェクトの作成

新規プロジェクトの作成

  1. 任意の場所にフォルダ作成
  2. File > New Windows
  3. File > Add workspace folderでフォルダの位置を紐づける
  4. npmでプロジェクトを作成する。

既存のプロジェクトを開く

既存のプロジェクトを開く。

  1. File > New Windows
  2. File > Open(もしくは画面左上のファイルアイコン > Open Folder)
  3. 信頼するか問われる

Do you trust the authors of the files in this folder

Do you trust the authors of the files in this folder

信頼するか否かのStackoverdlowの回答がわかりやすかったです。

If you select No, I don't trust the authors, Visual Studio Code will open the workspace in ‘restricted mode’. This is the default for all new workspaces. It lets you safely browse through code but disables some editor feature, including debugging, tasks, and many extensions. However, keep in mind that ‘restricted mode’ is all you need for many use cases.

If you select Yes, I trust the authors, Visual Studio Code will trust the current workspace and enable all of the editor feature you are used to in it.

https://stackoverflow.com/questions/67914668/vs-code-do-you-trust-the-authors-of-the-files-in-this-folder

とりあえず、自分で書いたコードの場合は信頼します。ダウンロードしてきたものでソースコードを読みたいときは信頼しないで読むといいかもしれません。

参考になれば幸いです。

コメント