vscodeの便利な使い方です。個人的な覚書をかねています。
目次
vscodeの使い方の本
マイクロソフトの中の人が書いた本があったため、試しに購入してみました。gitの使い方もかいてあり、文章がとてもわかりやすかったです。
他にはデバッグや設定などもいろいろと書かれています。マイクロソフトの本なのでやはりというかTypeScriptの解説はありましたが、言語とわずそれなりに使える本な気がします
vscodeの設定
vscodeの公式
visual studio codeの特徴は以下のとおりです。
- Visual Studioコードはマイクロソフトが開発。
- Windows専用ではなく、Linux、Mac OS、Windowsで使えるクロスプラットフォームエディタで、必要に応じてプラグインを拡張できます。
- 無料です。
- Visual StudioのようなIDEではなく、あくまでエディタなので動作が高速、軽量です。
- コードの補完も強力です。
- エディタとは言え、拡張機能でコンパイルもデバッグもできます。
- Visual Studio（IDE/統合開発環境）とは共存可能。
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をみましょう。シェアがわかります。
個人的にも開発環境は言語を問わず、すべて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の短径選択(ボックス選択)
短径選択はこうです。
- Shift + Option + 開始点をクリック
- マウスの左クリックをしながらドラッグすると短径選択できる
コピペしたい場合はこうなりますね。
- あらかじめ、コピーしたいものをcommand + C
- Shift + Option + 開始点をクリック
- マウスの左クリックをしながらドラッグすると短径選択できる
- command + V
うまくできないときは落ち着いてやりましょう。
vscodeのコンフリクト
画面右を残すなら、 ボタンは左側にあるAccept/Overwriting(上書き)で対応。
こちらのサイトで画像つきで解説。
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でプロジェクトを作成する。
既存のプロジェクトを開く。
- File > New Windows
- File > Open(もしくは画面左上のファイルアイコン > Open Folder)
コメント