settings.jsonの開き方などVS Codeの使い方まとめ

プログラミング

覚書をかねてvscodeの使い方をまとめていきます。

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 は同一のものであり区別はしていません。気分的には揃えておきたいですけど…。

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を使っています。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

vscodeのショートカット

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

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

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

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

claer

vs codeで実行中止

control + C

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

コメント

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