VS Codeの個人的に便利な使い方と本まとめ

おすすめのオンラインプログラミング学習

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

vscodeの使い方の本

マイクロソフトの中の人が書いた本があったため、試しに購入してみました。gitの使い方もかいてあり、文章がとてもわかりやすかったです。

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

スポンサーリンク

電子書籍のおすすめ比較

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...

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.

個人的にも開発環境は言語を問わず、すべて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ブラウザ

スポンサーリンク

VS Codeで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のショートカット

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

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

vs codeでターミナルのクリア

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

claer

vs codeで実行中止

control + C

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

短径選択はこうです。

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

コピペしたい場合はこうなりますね。

  1. あらかじめ、コピーしたいものをcommand + C
  2. Shift + Option + 開始点をクリック
  3. マウスの左クリックをしながらドラッグすると短径選択できる
  4. command + V

うまくできないときは落ち着いてやりましょう。

vscodeのコンフリクト

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

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

Visual Studio Code Tips and Tricks
Visual Studio Code Tips and Tricks for power users.

Vs Codeで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

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

How To Use GitHub with VS Code in 2020 | Clone | Part 2

しかし、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をおさないぶん、若干入力が楽かもしれませんね。

VS Codeのフォルダ管理

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

新規プロジェクトの作成。

Add workspace folderでフォルダの位置を設定し、npmでプロジェクトを作成する。

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

  1. File > New Windows
  2. File > Open(もしくは画面左上のファイルアイコン > Open Folder)
人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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