覚書をかねてvscodeのトラブルや使い方をまとめていきます。
目次
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
再起動もしてみましょう。
他にもファイヤーウォールが悪さをしている場合があります。一度、接続をきると問題の切り分けができます。
解決方法は以下のとおりです。
設定 > パーソナルファイヤーウォール > 設定 > フィルタリングモードを[ 対話モード ] > ルールを設定 > 追加
対話モードからもできますが、他の通信まででてきてうざったいので、、個別に追加します。
参照からChromeを選ぶ
/Applications/Google Chrome.app
次へ
アクション：許可
方向：両方
次へ
プロトコル：TCP & UDP
ポート：リモート
リモートポート：すべて
宛先：インターネット全体
対話モードの場合は以下のとおりです。
このコンピューターで実行中のアプリケーションが、
リモートコンピューターと通信しようとしています。
この通信を許可しますか？
Chrme Helper
macbookpro.local
みたいながでてくるため、許可しましょう。この対話モードはアプリをたくさん立ち上げていると、他のものがいっぱいでてきてうざったいです。他のアプリは終了したのちやりましょう。
vs codeでトラブりましたが、xcode等でも不具合が報告されていました。
このトラブルはアプデのたびに何回もやりなおしています…。
これでも解決しなかったことがあり、しばらく様子見をしていたらバグ修正された定義ファイルが落ちてきたこともあります。あとはサポートに電話ですね。
eset結構振り回されるな…。
(追記)esetとプログラミングの相性は悪いです。。esetは以前にも、仮想環境のトラブル、cpuのトラブルと次々振り回されたため、現在積極的にカスペルスキーに乗り換えています。
カスペルスキーはまあまあいいです。詳しくはこちらの記事をみてください。
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の開発が捗りそう。
— きょ@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のターミナル操作
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
vscodeのコンフリクト
画面右を残すなら、 ボタンは左側にあるAccept/Overwriting(上書き)で対応。
こちらのサイトで画像つきで解説。
Vs CodeでGithubのクローンを作成
大抵、githubと連携していますよね。今回、別フォルダで作成してpullしてくる形です。ちなみに、今回、原因不明のトラブルが発生したため環境の再構築のため2つ目のローカルリポジトリを作ります。ついでにフォルダの位置も引っ越します。
Vscode側の操作
File > New Window
github側の操作
Github > プロジェクト名 > 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?
追加しておきましょう。
コメント