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

プログラミング学習

vscodeの便利な使い方です。個人的な覚書をかねています。主にjavascriptで使っています。

PR記事:プログラミング学習Udemyのおすすめ動画全まとめ

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

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

徹底解説Visual Studio Code
著:本間咲来
¥3,102 （2022/03/02 21:48時点 | Amazon調べ）
Amazon
＼楽天ポイント5倍セール！／
楽天市場
＼ポイント5%還元！／
Yahooショッピング

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

UdemyでもたにぐちまことさんのVisual Studio Code活用講座が評判がよいです。

Udemy

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

【評判】Udemyのプログラミングおすすめ/フロントエンドエンジニア(Javascript他)/動画編集などのコース
Udemyのヘビーユーザーです。プログラミング、デザイン、動画編集、資産運用などudemyのすべて実経験でおすすめコースをまとめていきます。Udemyは日本に来る前から愛用しています。半分ぐらい英語の講座を買っています。u...
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に乗り換え組も。

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をインストールして環境変数を指定する流れになります。

windows10でpathを上書きせず複数設定する方法

通常の指定方法は以下のとおりですね。

Windowsのここに入力して検索で「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 > 新規

しかし、個人的にはffmpegなどの動画コーディックでもpathを使っているため、上書きしてしまいました。。

複数指定する場合はセミコロンで区切りますが、Windows10からはuiが改善されて編集モードで複数指定できるようになりました。

Windowsのここに入力して検索で「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 > 編集

あとはこのようにインストール先を指定すればいいだけです。

C:\Program Files\nodejs

ちなみに、環境変数は大文字と小文字が混在している場合もありますが、PATH と Path は同一のものであり区別はしていません。気分的には揃えておきたいですけど…。

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のターミナル操作

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からFinderを開く

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

open .

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名をダブルクリックで選択

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)

コメント

タイトルとURLをコピーしました