MacChromeでlocalhostが繋がらないなどVS Codeトラブル/使い方まとめ

おすすめのオンラインプログラミング学習

覚書をかねて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.app
参照からChromeを選ぶ
/Applications/Google Chrome.app

次へ

アクション:許可
方向:両方

次へ

プロトコル:TCP & UDP
ポート:リモート
リモートポート:すべて

宛先:インターネット全体

対話モードの場合は以下のとおりです。

外向きのトラフィック
このコンピューターで実行中のアプリケーションが、
リモートコンピューターと通信しようとしています。
この通信を許可しますか?

Chrme Helper
macbookpro.local

みたいながでてくるため、許可しましょう。この対話モードはアプリをたくさん立ち上げていると、他のものがいっぱいでてきてうざったいです。他のアプリは終了したのちやりましょう。

vs codeでトラブりましたが、xcode等でも不具合が報告されていました。

このトラブルはアプデのたびに何回もやりなおしています…。

これでも解決しなかったことがあり、しばらく様子見をしていたらバグ修正された定義ファイルが落ちてきたこともあります。あとはサポートに電話ですね。

eset結構振り回されるな…。

(追記)esetとプログラミングの相性は悪いです。。esetは以前にも、仮想環境のトラブル、cpuのトラブルと次々振り回されたため、現在積極的にカスペルスキーに乗り換えています。

カスペルスキーはまあまあいいです。詳しくはこちらの記事をみてください。

AndroidやParallels desktopのセキュリティソフト比較おすすめで軽いのは!?
PC2台持ちと加え、Parallels desktop、Android、windowsタブレット、ipad mini、iphoneを使っています。 この構成でセキュリティソフトを何にすべきか検討しました。またcpuが100%になる問題にも悩...
スポンサーリンク

電子書籍のおすすめ比較

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...

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をみましょう。シェアがわかります。

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.

個人的にも開発環境は言語を問わず、すべて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を使っています。

Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

vscodeのショートカット

vscodeのコメントアウトショートカット

行をコメントアウト Command + /

vs codeでターミナルのクリア

vs codeのターミナルのクリアは以下のコマンドです。

claer

vs codeで実行中止

control + C

vscodeのコンフリクト

画面左を残すなら、ボタンは右側にあるRevert(元に戻す)で対応。
画面右を残すなら、 ボタンは左側にあるAccept/Overwriting(上書き)で対応。

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

Visual Studio Code Tips and Tricks
Visual Studio Code Tips and Tricks for power users.

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

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

How To Use GitHub with VS Code in 2020 | Clone | Part 2

しかし、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?

追加しておきましょう。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました