vscodeの便利な使い方です。個人的な覚書をかねていまwindows10でpathを上書きせず複数設定する方法す。主にjavascriptで使っています。
目次
VSCodeの便利な使い方のおすすめ書籍/本
マイクロソフトの中の人が書いた本があったため、試しに購入してみました。gitの使い方もかいてあり、文章がとてもわかりやすかったです。必要なところだけつまみ読みすればいい気がします。
他にはデバッグや設定などもいろいろと書かれています。マイクロソフトの本なのでやはりというかTypeScriptの解説はありましたが、言語とわずそれなりに使える本な気がします
こちらはデバッグに特化した本です。いろいろな言語に対応しています。
UdemyでもたにぐちまことさんのVisual Studio Code活用講座が評判がよいです。この方は結構網羅的に解説するのでわかりやすく全体がわかります。
Udemy言語別におすすめUdemyのおすすめ教材もまとめてあります。
VSCodeの設定
vscodeの公式
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をみましょう。シェアがわかります。
個人的にも開発環境は言語を問わず、すべてvisual studio codeに統合していく流れになっています。マイクロソフトは最近いい感じかもですね。
プログラミングを書くなら最良のエディタかもしれません。
vue.jsの場合、nodo.jsをインストールして環境変数を指定する流れになります。
visual studio code(VS Code)のデフォルトのブラウザをsafariからchromeに
vs codeからジャンプするとsafariに飛びます。VS Codeではなくこの問題はmac側の設定を変えます。
りんごの[アイコン] > システム環境設定 > 一般 > デフォルトWebブラウザ
Vs CodeのWindows版の設定
Macがメインですが、Windowsも使っています。
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の拡張子検索
- 検索ボックスの下にある「…」のアイコン
- 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
短径選択(ボックス選択)
短径選択はこうです。
- Shift + Option + 開始点をクリック
- マウスの左クリックをしながらドラッグすると短径選択できる
ボックス選択のコピペしたい場合はこうなりますね。
- Shift + Option + 開始点をクリック
- マウスの左クリックをしながらドラッグすると短径選択できる
- command + C
- Shift + Option + 開始点をクリック
- マウスの左クリックをしながらドラッグすると短径選択できる
- command + V
感覚的にはカーソルをピッとあわせ、Shift + Optionを同時押しして押してマウスをぐいっという感じですね。
半角1文字とかだと繊細な操作になるので、うまくできないときは落ち着いてやりましょう。
VSCodeのコンフリクト
画面右を残すなら、 ボタンは左側にあるAccept/Overwriting(上書き)で対応。
こちらのサイトで画像つきで解説。
ひっくり返っていて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の項目から-(ハイフンを削る)
自分もcssのclass名はケバブケースでハイフンでつけてます👻
— Mittu | Web (@WBboy32) May 16, 2020
あと、class名コピペする時にケバブケースだとダブルクリックで一括選択できないって自分も最初ぶつかりましたけど、エディターの設定でハイフンも含めて一括選択できるようにすればいけますよ〜🙆♂️ https://t.co/AOgCy4XN9q
エディタの設定で変えられるようになったのち、アンダースコア派ではなくなりました。ハイフンの方がshiftをおさないぶん、若干入力が楽かもしれませんね。
vscodeでハイフン区切りのClass名をダブルクリックで選択
idもハイフン。googleの規約。
Qiitaの記事でもキャメルケースと書かれたものもありますが、lint系の拡張をいれるとキャメルケースはエラーがでるようになりました。
HTMLのid属性はなるべく使わず、cssのスタイル設定にはclass属性を使うべし。どうしてもid属性を使う場合は、必ずハイフンを含む命名をすべし；ハイフンを含まないid属性はJSのグローバル名前空間を汚染する。https://t.co/2QT3miSgqJ
— 音風景の管理人 (@kamedo2) July 21, 2022
一度、他人のサンプルをコピペで動かそうとしたとき、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のフォルダ管理
基礎中の基礎ですが、久々にやるとたまにあれって？と思うこともあるため。
新規プロジェクトの作成
新規プロジェクトの作成
- 任意の場所にフォルダ作成
- File > New Windows
- File > Add workspace folderでフォルダの位置を紐づける
- npmでプロジェクトを作成する。
既存のプロジェクトを開く
既存のプロジェクトを開く。
- File > New Windows
- File > Open(もしくは画面左上のファイルアイコン > Open Folder)
参考になれば幸いです。
コメント