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

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

vscodeの使い方の本

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

徹底解説Visual Studio Code

• Amazon

他にはデバッグや設定などもいろいろと書かれています。マイクロソフトの本なのでやはりというか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...

code.visualstudio.com

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

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

いまさらだけどVSCode、テキストエディタとして使いやすいことが判明。キーバインドとかいろいろ慣れないが、カスタマイズできるのがいい感じ。MacとWinの違いのなさも好き。惚れた。

— Yoshi-aki Shimada (@yoshi_and_aki) December 20, 2018

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

あ、bracketsからvisual studio codeに乗り換えました。PHPの中でもSQLが読みやすいのに感動しました。

それからpower shellがエディタの中で実行できるのはすごく便利でpythonの開発が捗りそう。

— Kyosuke@webエンジニア (@kyoochaan) October 8, 2019

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ブラウザ

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

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

Visual Studio Code Tips and Tricks

Visual Studio Code Tips and Tricks for power users.

code.visualstudio.com

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

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

しかし、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の項目から-(ハイフンを削る)

自分もcssのclass名はケバブケースでハイフンでつけてます👻

あと、class名コピペする時にケバブケースだとダブルクリックで一括選択できないって自分も最初ぶつかりましたけど、エディターの設定でハイフンも含めて一括選択できるようにすればいけますよ〜🙆‍♂️ https://t.co/AOgCy4XN9q

— ミッツ_Web_Bboying@転職活動中 (@WBboy32) May 16, 2020

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

VS Codeのフォルダ管理

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

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

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

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

1. File > New Windows
2. File > Open(もしくは画面左上のファイルアイコン > Open Folder)