覚書をかねてvscodeの使い方をまとめていきます。
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の開発が捗りそう。
— きょーちゃん（26） (@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 は同一のものであり区別はしていません。気分的には揃えておきたいですけど…。
Macにローカル環境に移行したらhttp://localhost:8080/に繋がらない解決方法
Macにローカル環境に移行したらhttp://localhost:8080/(http://localhost:3000/の場合もある)に繋がりませんでした。
原因はesetでした。。
接続しようとすると、chromeでは以下のエラーがでます。
localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE
解決方法は以下のとおりです。
ESET Cyber Security を開く > 設定 > Webアクセスの保護の[設定] > HTTPプロトコルで使用するポート 有効にする
無効にする、もしくは有効するの中にある8080を削除すると解決します。
80,8080,3128
再起動もしてみましょう。
他にもファイヤーウォールが悪さをしている場合があります。一度、接続をきると問題の切り分けができます。
解決方法は以下のとおりです。
設定 > パーソナルファイヤーウォール > 設定 > フィルタリングモードを[ 対話モード ] > ルールを設定
このコンピューターで実行中のアプリケーションが、
リモートコンピューターと通信しようとしています。
この通信を許可しますか？
Chrme Helper
macbookpro.local
みたいながでてくるため、許可しましょう。この対話モードはアプリをたくさん立ち上げていると、他のものがいっぱいでてきてうざったいです。他のアプリは終了したのちやりましょう。
vs codeでトラブりましたが、xcode等でも不具合が報告されていました。
eset結構振り回されるな…。
visual studio code(VS Code)のデフォルトのブラウザをsafariからchromeに
vs codeからジャンプするとsafariに飛びます。VS Codeではなくこの問題はmac側の設定を変えます。
りんごの[アイコン] > システム環境設定 > 一般 > デフォルトWebブラウザ
vscodeのターミナル操作
VS Codeでsettings.jsonの開き方
settings.jsonの開き方は以下のとおり。
歯車アイコン > setting > 検索ボックスに適当なワード (例)json > edit in settings.json
もしくは右上の
File > Preferences > Settings(Windows/Linux)
Code > Preferences > Settings(macOS)
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の拡張
visual studio code(VS Code)の拡張のインストール
画面左のExtensions(マイクロソフトのロゴみたいなアイコン) > キーワードをいれて検索 > install
visual studio code(VS Code)の共通の拡張機能
phpやjavascript言語関係なく共通で使えます。
- indent-rainbow インデントをカラーでわかりやすくする
- Bracket Pair Colorizer2 括弧の対応をカラーでわかりやすくする
Bracket Pair ColorizerとBracket Pair Colorizer2の違いは公式サイトによると以下のとおり。
Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.
ベースが同じで速度があがっています。β版だが、今のところ困ったことがないためBracket Pair Colorizer2を使っています。
vscodeのショートカット
vscodeのコメントアウトショートカット
行をコメントアウト Command + /
vs codeでターミナルのクリア
vs codeのターミナルのクリアは以下のコマンドです。
claer
vs codeで実行中止
control + C
コメント