Visual Studio Code / VSCode Part5

**デフォルトの名無しさん** · 2018/11/08(木) 12:59:24.97

MS発のエディタVSCodeのスレ

公式
https://code.visualstudio.com/
https://github.com/Microsoft/vscode/

開発状況
https://github.com/Microsoft/vscode/wiki/Iteration-Plans

更新内容(日本語訳)
https://vscode-doc-jp.github.io/updates/

前スレ
Visual Studio Code / VSCode Part4
https://mevius.5ch.net/test/read.cgi/tech/1529679715/

**デフォルトの名無しさん** · 2018/11/08(木) 13:38:57.74

>>1
自決乙です

**デフォルトの名無しさん** · 2018/11/08(木) 15:47:38.55

ビルド設定だけで頭痛くなっちゃうぜ、おまけにだいたいの参考サイトが個人設定とかが多くて参考にならないし

**デフォルトの名無しさん** · 2018/11/08(木) 20:05:49.84

いちおつ

**デフォルトの名無しさん** · 2018/11/09(金) 23:22:00.58

phpコードを整形して綺麗にインデントしたいのだが、
Prettierと言うのを試したのだが動かない。
なぜよ？

**デフォルトの名無しさん** · 2018/11/09(金) 23:43:49.13

>>5
ぶっちゃけアリエナイ。

プラグイン入れた？
PrettierはNodeJS(Javascript)製のツール。だからデフォルトでは、
JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAMLといったJavascript隣接領域の言語にしか対応していない。

PHP向けには公式プラグインがある。
https://github.com/prettier/plugin-php

Python、Swiftにも公式プラグインがある。
その他Apex、Elm、Java、PostgreSQL、Rubyには非公式プラグインがあるがクオリティはお察し。
非公式プラグインでPrettierの実力を判断しないでほしいね。

**デフォルトの名無しさん** · 2018/11/10(土) 01:56:04.35

そのPrettier phpプラグイン、まだアルファ段階だから様子見してる。もう安定してるのかな？
うちは php cs fixer 使ってるわ。
HTMLも Prettier対応したな

**デフォルトの名無しさん** · 2018/11/10(土) 09:01:59.51

こういうのを聞くとgoのエコシステムは素晴らしいと思うわ。
tsもどうせならコード整形を言語機能側にぶち込んで強制してくんないかな。
別に俺はこだわり無いけど、どのプロジェクトでも同じ一貫性がほしい

**デフォルトの名無しさん** · 2018/11/10(土) 16:26:25.11

The quick brown fox jumped over the lazy dog.

HTMLのマークアップで、たとえば上のような既存の p があって、
この中の brown を span でマークアップしたい場合、

マークアップ対象を先に選択しておいて、次に目的のタグを選んで
くくるような操作ってできますか？

**デフォルトの名無しさん** · 2018/11/10(土) 17:08:29.71

>>9
これでどう？
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

**デフォルトの名無しさん** · 2018/11/10(土) 19:38:36.32

別に拡張入れなくても
標準で入ってるemmetのWrap with Abbreviationでいける

**デフォルトの名無しさん** · 2018/11/10(土) 19:47:50.18

銅じゃないよ！
じゃ、何？

**デフォルトの名無しさん** · 2018/11/10(土) 19:59:07.90

>>6
>プラグイン入れた？
Prettier formatter for Visual Studio Code
と言うのを入れたのだが、それだけじゃダメなん？

**デフォルトの名無しさん** · 2018/11/10(土) 20:00:10.80

ついでに聞きたいんだが
The quick brown fox jumped over the lazy dog.

このpを例えばh1に変更したいと思った時に前後のタグをいちいちカーソル合わせて変更するのではなく
パッとかえる方法はありますか？

**デフォルトの名無しさん** · 2018/11/10(土) 21:14:01.12

>>14
拡張機能あるよ。
htmltagwrapだったかな？

**デフォルトの名無しさん** · 2018/11/10(土) 23:08:46.88

>>14
それも拡張機能とか入れなくても標準機能のemmetである。
editor.emmet.action.updateTag （タグの更新）

**デフォルトの名無しさん** · 2018/11/10(土) 23:18:50.53

emmetがとても便利なのは認めるが反応しない時あるよね

**デフォルトの名無しさん** · 2018/11/10(土) 23:26:10.69

Emmet、 h1>div.hoge みたいなやつの展開以外にもいろいろ便利機能あるので
html作業メインならショートカットキー割り当てておくといいよ

>>9 の選択文字列を指定したタグで囲む
>>14 のタグを更新
の他に、たとえば、 <div>hoge</div> でhogeにカーソルがあるとき

一番内側のタグ（この場合）のタグだけを削除
　→ もう一回実行すると が消える
　→順にタグをだけを次々と削除可能とか、
タグの内側（hoge）だけを選択
　→ hoge を選択
　→ hoge を選択、と選択範囲を拡張（逆方向も可）とか、

・複数行を1行にマージ（標準機能と違って改行位置にスペースが入らない）
・タグ上にカーソルがあるとき、一致するペアタグとの相互移動
・数値上にカーソルがあるとき、数値の 0.1 1 10 刻みでの上下

とか他にもいろいろある

**デフォルトの名無しさん** · 2018/11/10(土) 23:33:13.51

それemmetの機能だったのか。

**デフォルトの名無しさん** · 2018/11/11(日) 04:45:31.80

Visual Studio Code / VSCode Part4
https://mevius.5ch.net/test/read.cgi/tech/1529679715/454-467

前スレの拡張機能の紹介で、

html tag wrapper
HTML を選択し、Ctrl + i を押すと、両端をタグで囲める

Auto Rename Tag
開始終了タグを、同時に変更する

**デフォルトの名無しさん** · 2018/11/11(日) 14:36:20.54

http://r2.upup.be/wV2qsULdHm

**デフォルトの名無しさん** · 2018/11/11(日) 16:03:43.21

>>21
ブラクラ

**デフォルトの名無しさん** · 2018/11/12(月) 21:31:13.35

1.29まだなの？

**デフォルトの名無しさん** · 2018/11/12(月) 22:22:41.93

最近リリース予定の翌週にずれこむ事が多いな

**デフォルトの名無しさん** · 2018/11/13(火) 07:05:10.96

https://code.visualstudio.com/updates/v1_29

**デフォルトの名無しさん** · 2018/11/13(火) 08:34:41.02

ついに複数行の検索が！

**デフォルトの名無しさん** · 2018/11/13(火) 09:58:05.19

1.29キター♪o(ﾟ∀ﾟo)(oﾟ∀ﾟ)o♪

**デフォルトの名無しさん** · 2018/11/13(火) 10:54:00.30

神アプデｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!!

**デフォルトの名無しさん** · 2018/11/13(火) 11:30:06.92

神なのか

**デフォルトの名無しさん** · 2018/11/14(水) 00:18:13.66

再インスコしないとアイコン変わらない？

**デフォルトの名無しさん** · 2018/11/14(水) 15:42:21.63

分からんけどアイコンって何か変わったの？

**デフォルトの名無しさん** · 2018/11/14(水) 15:43:31.45

変わってないよ

**デフォルトの名無しさん** · 2018/11/14(水) 17:33:08.49

前verで搭載された、ファイルアイコンのことかね
https://code.visualstudio.com/updates/v1_28#_file-icons-per-file-type

**デフォルトの名無しさん** · 2018/11/14(水) 17:40:55.42

なるほど

**デフォルトの名無しさん** · 2018/11/15(木) 00:13:56.42

>>33
それが1.29で更新されたやつの話じゃないの？
リリースノートにリストビュー用の小さいアイコンって書いてあるけど。

**デフォルトの名無しさん** · 2018/11/16(金) 15:04:03.93

スペルチェック出来る？

**デフォルトの名無しさん** · 2018/11/16(金) 16:36:59.62

この2つがDL数も多いし定番っぽい？

Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Spell Right
https://marketplace.visualstudio.com/items?itemName=ban.spellright

**デフォルトの名無しさん** · 2018/11/16(金) 22:10:48.94

Update 1.29.1

**デフォルトの名無しさん** · 2018/11/16(金) 23:15:13.46

神アプデかな

**デフォルトの名無しさん** · 2018/11/17(土) 09:50:32.85

Visual Studio Codeのスニペット登録が分からない

**デフォルトの名無しさん** · 2018/11/17(土) 12:05:47.10

コマンドパレットにsnippetとか入れたらなんかそういうの出るだろ
あと言語ごとにスニペットファイル作成なのも留意

あとは公式見ろ
https://code.visualstudio.com/docs/editor/userdefinedsnippets

少し情報が古いが有志の日本語訳
https://vscode-doc-jp.github.io/docs/userguide/userdefinedsnippets.html

**デフォルトの名無しさん** · 2018/11/17(土) 12:20:20.01

>>41
おお、ここ観たら分かりました！
https://www.youtube.com/watch?v=K3gLlZm-m_8

**デフォルトの名無しさん** · 2018/11/17(土) 23:40:39.55

MSのC/C++っていうextensionはC11も対応してる？

**デフォルトの名無しさん** · 2018/11/20(火) 16:18:06.15

選択行数表示のオプションどこ？、って探したら見当たらなくて、
ググったら要望上がっててcloseしてたから、指定の仕方がわかると思ったら
「本体じゃなくてアドオンでやるモンだからこの件はclose」
そうじゃないだろ、おい
選択行数表示機能が無いとかガッカリだよ……

ともあれ、Select Line Status Bar は便利に使わせて頂きます

**デフォルトの名無しさん** · 2018/11/20(火) 21:42:38.00

年末近づいてくるし、次のアップデートは12月の前半くらい、1月のアップデートは無しで2月になるって言ってるな。

**デフォルトの名無しさん** · 2018/11/22(木) 15:07:51.54

使い込むと良さそうなんだが、敷居高い　上級者向けエディタ
Sync Settingよくわからない

画面が広く使えない　これもきっとカスタマイズ可能なんだろうけどやり方不明

**デフォルトの名無しさん** · 2018/11/22(木) 15:59:22.91

最近ATOKと相性が悪い気がするんだが、そんなことない？
ATOKは月額の最新版、VSCodeも更新なし。

IME OFF時の入力、ONも半角の時は問題なし。
全角の時だけ、入力するとカーソル左側の文字が1文字消える。
MS-IMEに切り替えると起きないから、ATOKとの相性問題だと思うけど…。
「入力中の文字を最適化する」とか「未確定文字列を高速化する」は未チェック。

**デフォルトの名無しさん** · 2018/11/22(木) 18:11:57.50

>>46
ここでも見ておけ。全スレでも評判いい基本紹介
http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html

>>47
うちもATOK月額最新版だけど特に問題ないかな。Win10 64bit

**デフォルトの名無しさん** · 2018/11/22(木) 20:23:58.40

vscode立ち上げると、なんとなくPCが重くなるような気がするのですが、そんなことないですか？
拡張機能をできるだけdisableにしても。

**デフォルトの名無しさん** · 2018/11/22(木) 20:31:48.14

>>49
atom同様メモリ食いだからスワップが発生していると思われ。
メモリ増設しる

**デフォルトの名無しさん** · 2018/11/22(木) 20:44:35.39

メモリ12G積んでいるんだけどな

**デフォルトの名無しさん** · 2018/11/22(木) 21:19:52.53

矩形選択など、visual studioとキー操作が異なるので使いにくいのよね。
何かの設定でvisual studioと完全互換に出来ないかしら？

**デフォルトの名無しさん** · 2018/11/22(木) 21:39:06.96

質問させてください。
VSCでHTMLの勉強をはじめたのですが、HTMLプレビューの拡張機能を
2種類試したところ、どちらも表示がおかしいので困っています。

https://i.imgur.com/sDHcT9C.png

画像は!→TABで作成されるhtmlのテンプレートに外部CSSを指定し、
body内にID="test"のDIV、その中にpタグで"表示テスト"と書いただけのシンプルなものです。

しかし画像のように、HTML Preview 0.2.4ではCSSで指定した背景色
redとaquaは反映されますが、なぜかpタグの文字が一つになのに二重に表示され、
文字の色も変わってしまっています。
もう一つのLive HTML Previewer 0.3.0では、pタグの文字は正確なのですが、
bodyに設定した背景色redが反映されません。
画像中央はFireFoxでの表示ですが、pタグの文字も正しく、
bodyの背景色redが反映されて意図どおりに表示されています。
Google chromeでも同様に表示されました。
似たような機能なので拡張機能のバッティングが不具合の理由かと思い、
それぞれ一つづつインストールして試してもみたのですが同様の表示になりました。

拡張機能によるエディタ内でのHTMLのプレビューでは正確な表示は無理なのでしょうか。
それともやり方が悪いのか、もしくは正確に表示できる拡張機能があれば教えてください。

**デフォルトの名無しさん** · 2018/11/22(木) 22:05:17.27

>>53
エディタ上で正しく表示されない理由は正直分からないけど、HTMLのライブプレビューはこれが一番良いと思う
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

**デフォルトの名無しさん** · 2018/11/22(木) 22:12:46.61

>>46
むしろVSCodeは高機能な割に敷居はめちゃ低いと思う
vimとかは設定書かないとマトモに使えた物じゃないし敷居が高い

Sync Settingは複数PCで設定を共有するためのプラグインだから単一PCなら必要ない

あと「画面を広く」ってのはどういう感じのことを言ってる？

**デフォルトの名無しさん** · 2018/11/22(木) 22:29:04.77

プレビューはLiveserver使いやすくていいぞ

**デフォルトの名無しさん** · 2018/11/22(木) 23:28:35.74

>>49
プロセス間通信でIOがボトルネックになってるだけだろ。
chromeやelectronの仕組み上つき纏う。

53 · 2018/11/22(木) 23:45:13.07

>>54 >>56
レスありがとうございます！早速インストールして使ってみました。
実ブラウザで表示させるタイプなんですね。
ボタン一つでデフォルトブラウザに表示されて簡単でした。
しかしなぜかうちの環境では、説明GIFのようにセーブしてすぐ変更反映とはいかず、
ブラウザをアクティブにしてリロードしないと変更が反映されないようです。
あとで詳しくググって原因を調べてみます。

教えていただいたLive Serverを検索したときに候補にでた別の作者さんの、
Live Server Previewという拡張機能を試しにいれたところ、
エディタ内表示タイプで53のhtml+cssが正確に表示されました。
こちらもセーブしたら変更反映されるタイプで、うちの環境でも問題ないようです。
贅沢言うと53で書いた二つの拡張機能のように、セーブしなくてもリアルタイム更新
できるものがよかったのですが、表示の正確さには替えられないので暫くこちらを使ってみます。
色々試してこの拡張機能も表示がおかしいようであればエディタ内表示タイプは諦めて、
教えていただいたLive Serverのほうをしっかり動くようにして使いたいと思います。
リロードしないと反映されない状態でも実ブラウザでチェックするのに便利ですので、
Live ServerとLive Server Previewを併用しようと思います。
情報ありがとうございました。

**デフォルトの名無しさん** · 2018/11/22(木) 23:45:17.25

>>53-54
たぶん、Ritwick Dey の拡張機能、
Live Sass Compiler を入れたら、Live Server も入るのだろう

Vue.js, Nuxt.js などのフレームワークでも、できるかも

**デフォルトの名無しさん** · 2018/11/22(木) 23:48:54.68

>>58
>セーブしなくてもリアルタイム更新できるものが、よかった

書きかけの途中で表示されても、エラーになるだけで何にもならない。
むしろ、エラーに時間を取られるだけ

**デフォルトの名無しさん** · 2018/11/23(金) 01:15:52.64

Live Serverって良さげだけどSSIは対応してないのか

**デフォルトの名無しさん** · 2018/11/23(金) 12:24:59.12

HTML表示確認はもうnode入れてBrowserSyncした方が
後々互換性だの気にしなくていいし楽だよ。

53 · 2018/11/24(土) 00:36:41.00

>>59-60
レスありがとうございます。
一旦Live Serverを削除してLive Sass Compilerを入れると、
確かにLive Serverも一緒にインストールされました。
でもすみません、HTML初心者でプログラミング知識はまったくないので、
Live Serverだけで十分みたいです。

>>62
ググってみてみましたが、node.jsというものでしょうか。
JavaScriptはよくわかってないので自分には難しい感じです。
でも御助言ありがとうございます。

58で書いたLive Serverが、ファイル更新セーブしても
自動で反映されない原因がわかりました。
実は仮想環境上で使っていまして、htmlとcssを置いていた場所が
共有フォルダ上にあったのが原因でした。
ファイルをゲスト側にコピーしてそれを開いて更新すれば正常に動作しました。
おま環ですみません。長文失礼しました。

**デフォルトの名無しさん** · 2018/11/24(土) 05:52:41.73

>>62
これ俺もいれようとして結局わからなかった

**デフォルトの名無しさん** · 2018/11/24(土) 07:32:42.86

俺もSSIでインクルードしてるからこういうリアルタイムに変更を反映してくれるやつは入れず
XAMPとかでいちいちリロードしながらみてる。
なんか良いのあったら教えて欲しいでゲス。

**デフォルトの名無しさん** · 2018/11/24(土) 10:40:58.11

SSIって今時使われてるの…？

**デフォルトの名無しさん** · 2018/11/24(土) 11:21:07.70

>>55
アクティブバー、ファイルのエクスプローラー、エディタ2ペイン、ミニMap　を並べると1つ1つがとても小さくなる
Bracketsなら余裕ある

**デフォルトの名無しさん** · 2018/11/24(土) 14:38:53.76

>>65
SSIやPHP使ってて、それのためにXAMPPでサーバー立てても
Browsersyncのproxy機能で監視&自動リロードできるよ。ってか俺がそう使ってる。
うちはgulp経由だが素のnpm startでもどちらでも
VSCodeのタスク機能から立ち上げて管理できるし
使わない手はない

**デフォルトの名無しさん** · 2018/11/24(土) 16:43:48.21

Amazonでサイバーマンデーとかいうのやるみたいだけどキーボードとか安くなるんか？
HHKB買ってもええんか？

**デフォルトの名無しさん** · 2018/11/24(土) 21:06:03.74

>>67
ファイルエクスプローラーはアクティブバーのボタンをもう一回押せば非表示に出来る
エディタの配置はタブをドラッグしたら直感的に出来るはず
ミニマップはメニューの表示>ミニマップの切り替えで非表示に出来る

**デフォルトの名無しさん** · 2018/11/24(土) 21:10:25.84

HTML+CSSのLive Preview機能に限ってはBracketsが一番優秀な気がする

**デフォルトの名無しさん** · 2018/11/24(土) 22:19:41.83

Win10ProでVSCode入れたのだが、
Windowsのエクスプローラーでフォルダ一覧を出しておいて、
目的のフォルダを選択して右クリックメニューにVSCodeで開くというメニューは
無いの？
毎回VSCodeを起動してフォルダを開くのが面倒なのだが。

**デフォルトの名無しさん** · 2018/11/24(土) 22:20:44.64

>>72
ググれよ

**デフォルトの名無しさん** · 2018/11/24(土) 22:27:50.10

>>73
ググってここに来たんだよ。
教えれろよ。
レジストリいじるのか？

**デフォルトの名無しさん** · 2018/11/24(土) 22:33:15.92

上から目線わろた

**デフォルトの名無しさん** · 2018/11/24(土) 22:41:40.13

>>63
自分もlive serverの自動リロード？が効いてません…
調べても同様のケースが見つからず悩んでいます
ファイルはローカルに置いてあるんですが何故でしょうか…

**デフォルトの名無しさん** · 2018/11/24(土) 22:47:57.20

>>72
それは質問するまでもなく、
そうなるように、自分で実装すればいいんじゃないの？

**デフォルトの名無しさん** · 2018/11/24(土) 22:50:52.33

インストール時のオプションでコンテキストメニューに追加するかどうか選択できるよ
その部分もossだから心配ならそこから引っ張ってくれば
ググれば出るともうけど

**デフォルトの名無しさん** · 2018/11/24(土) 23:07:18.87

>>78
そう言う事か
サンキュウ

**デフォルトの名無しさん** · 2018/11/24(土) 23:09:16.40

>>70
2つのペインを分ける境界が無駄に太いですｗ

**デフォルトの名無しさん** · 2018/11/24(土) 23:39:25.53

>>69
こんなのもある。ほしいぞ。
https://www.pfu.fujitsu.com/rfkeyboard/

**デフォルトの名無しさん** · 2018/11/25(日) 00:27:54.39

ん？東プレ買収されたん？