Visual Studio Code / VSCode Part5
■ このスレッドは過去ログ倉庫に格納されています
ビルド設定だけで頭痛くなっちゃうぜ、おまけにだいたいの参考サイトが個人設定とかが多くて参考にならないし phpコードを整形して綺麗にインデントしたいのだが、
Prettierと言うのを試したのだが動かない。
なぜよ？ >>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の実力を判断しないでほしいね。 そのPrettier phpプラグイン、まだアルファ段階だから様子見してる。もう安定してるのかな？
うちは php cs fixer 使ってるわ。
HTMLも Prettier対応したな こういうのを聞くとgoのエコシステムは素晴らしいと思うわ。
tsもどうせならコード整形を言語機能側にぶち込んで強制してくんないかな。
別に俺はこだわり無いけど、どのプロジェクトでも同じ一貫性がほしい <p>The quick brown fox jumped over the lazy dog.</p>
HTMLのマークアップで、たとえば上のような既存の p があって、
この中の brown を span でマークアップしたい場合、
マークアップ対象を先に選択しておいて、次に目的のタグを選んで
くくるような操作ってできますか？ 別に拡張入れなくても
標準で入ってるemmetのWrap with Abbreviationでいける >>6
>プラグイン入れた？
Prettier formatter for Visual Studio Code
と言うのを入れたのだが、それだけじゃダメなん？ ついでに聞きたいんだが
<p>The quick brown fox jumped over the lazy dog.</p>
このpを例えばh1に変更したいと思った時に前後のタグをいちいちカーソル合わせて変更するのではなく
パッとかえる方法はありますか？ >>14
拡張機能あるよ。
htmltagwrapだったかな？ >>14
それも拡張機能とか入れなくても標準機能のemmetである。
editor.emmet.action.updateTag （タグの更新） emmetがとても便利なのは認めるが反応しない時あるよね Emmet、 h1>div.hoge みたいなやつの展開以外にもいろいろ便利機能あるので
html作業メインならショートカットキー割り当てておくといいよ
>>9 の選択文字列を指定したタグで囲む
>>14 のタグを更新
の他に、たとえば、 <div><p><span>hoge</span></p></div> でhogeにカーソルがあるとき
一番内側のタグ（この場合<span></span>）のタグだけを削除
→ もう一回実行すると <p></p>が消える
→順にタグをだけを次々と削除可能 とか、
タグの内側（hoge）だけを選択
→ <span>hoge</span> を選択
→ <p><span>hoge</span></p> を選択、と選択範囲を拡張（逆方向も可）とか、
・複数行を1行にマージ（標準機能と違って改行位置にスペースが入らない）
・タグ上にカーソルがあるとき、一致するペアタグとの相互移動
・数値上にカーソルがあるとき、数値の 0.1 1 10 刻みでの上下
とか他にもいろいろある 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
開始終了タグを、同時に変更する 神アプデｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!! >>33
それが1.29で更新されたやつの話じゃないの？
リリースノートにリストビュー用の小さいアイコンって書いてあるけど。 Visual Studio Codeのスニペット登録が分からない MSのC/C++っていうextensionはC11も対応してる？ 選択行数表示のオプションどこ？、って探したら見当たらなくて、
ググったら要望上がっててcloseしてたから、指定の仕方がわかると思ったら
「本体じゃなくてアドオンでやるモンだからこの件はclose」
そうじゃないだろ、おい
選択行数表示機能が無いとかガッカリだよ……
ともあれ、Select Line Status Bar は便利に使わせて頂きます 年末近づいてくるし、次のアップデートは12月の前半くらい、1月のアップデートは無しで2月になるって言ってるな。 使い込むと良さそうなんだが、敷居高い 上級者向けエディタ
Sync Settingよくわからない
画面が広く使えない これもきっとカスタマイズ可能なんだろうけどやり方不明 最近ATOKと相性が悪い気がするんだが、そんなことない？
ATOKは月額の最新版、VSCodeも更新なし。
IME OFF時の入力、ONも半角の時は問題なし。
全角の時だけ、入力するとカーソル左側の文字が1文字消える。
MS-IMEに切り替えると起きないから、ATOKとの相性問題だと思うけど…。
「入力中の文字を最適化する」とか「未確定文字列を高速化する」は未チェック。 vscode立ち上げると、なんとなくPCが重くなるような気がするのですが、そんなことないですか？
拡張機能をできるだけdisableにしても。 >>49
atom同様メモリ食いだからスワップが発生していると思われ。
メモリ増設しる 矩形選択など、visual studioとキー操作が異なるので使いにくいのよね。
何かの設定でvisual studioと完全互換に出来ないかしら？ 質問させてください。
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のプレビューでは正確な表示は無理なのでしょうか。
それともやり方が悪いのか、もしくは正確に表示できる拡張機能があれば教えてください。 >>46
むしろVSCodeは高機能な割に敷居はめちゃ低いと思う
vimとかは設定書かないとマトモに使えた物じゃないし敷居が高い
Sync Settingは複数PCで設定を共有するためのプラグインだから単一PCなら必要ない
あと「画面を広く」ってのはどういう感じのことを言ってる？ プレビューはLiveserver使いやすくていいぞ >>49
プロセス間通信でIOがボトルネックになってるだけだろ。
chromeやelectronの仕組み上つき纏う。 >>54 >>56
レスありがとうございます！早速インストールして使ってみました。
実ブラウザで表示させるタイプなんですね。
ボタン一つでデフォルトブラウザに表示されて簡単でした。
しかしなぜかうちの環境では、説明GIFのようにセーブしてすぐ変更反映とはいかず、
ブラウザをアクティブにしてリロードしないと変更が反映されないようです。
あとで詳しくググって原因を調べてみます。
教えていただいたLive Serverを検索したときに候補にでた別の作者さんの、
Live Server Previewという拡張機能を試しにいれたところ、
エディタ内表示タイプで53のhtml+cssが正確に表示されました。
こちらもセーブしたら変更反映されるタイプで、うちの環境でも問題ないようです。
贅沢言うと53で書いた二つの拡張機能のように、セーブしなくてもリアルタイム更新
できるものがよかったのですが、表示の正確さには替えられないので暫くこちらを使ってみます。
色々試してこの拡張機能も表示がおかしいようであればエディタ内表示タイプは諦めて、
教えていただいたLive Serverのほうをしっかり動くようにして使いたいと思います。
リロードしないと反映されない状態でも実ブラウザでチェックするのに便利ですので、
Live ServerとLive Server Previewを併用しようと思います。
情報ありがとうございました。 >>53-54
たぶん、Ritwick Dey の拡張機能、
Live Sass Compiler を入れたら、Live Server も入るのだろう
Vue.js, Nuxt.js などのフレームワークでも、できるかも >>58
>セーブしなくてもリアルタイム更新 できるものが、よかった
書きかけの途中で表示されても、エラーになるだけで何にもならない。
むしろ、エラーに時間を取られるだけ Live Serverって良さげだけどSSIは対応してないのか HTML表示確認はもうnode入れてBrowserSyncした方が
後々互換性だの気にしなくていいし楽だよ。 >>59-60
レスありがとうございます。
一旦Live Serverを削除してLive Sass Compilerを入れると、
確かにLive Serverも一緒にインストールされました。
でもすみません、HTML初心者でプログラミング知識はまったくないので、
Live Serverだけで十分みたいです。
>>62
ググってみてみましたが、node.jsというものでしょうか。
JavaScriptはよくわかってないので自分には難しい感じです。
でも御助言ありがとうございます。
58で書いたLive Serverが、ファイル更新セーブしても
自動で反映されない原因がわかりました。
実は仮想環境上で使っていまして、htmlとcssを置いていた場所が
共有フォルダ上にあったのが原因でした。
ファイルをゲスト側にコピーしてそれを開いて更新すれば正常に動作しました。
おま環ですみません。長文失礼しました。 >>62
これ俺もいれようとして結局わからなかった 俺もSSIでインクルードしてるからこういうリアルタイムに変更を反映してくれるやつは入れず
XAMPとかでいちいちリロードしながらみてる。
なんか良いのあったら教えて欲しいでゲス。 >>55
アクティブバー、ファイルのエクスプローラー、エディタ2ペイン、ミニMap を並べると1つ1つがとても小さくなる
Bracketsなら余裕ある >>65
SSIやPHP使ってて、それのためにXAMPPでサーバー立てても
Browsersyncのproxy機能で監視&自動リロードできるよ。ってか俺がそう使ってる。
うちはgulp経由だが素のnpm startでもどちらでも
VSCodeのタスク機能から立ち上げて管理できるし
使わない手はない Amazonでサイバーマンデーとかいうのやるみたいだけどキーボードとか安くなるんか？
HHKB買ってもええんか？ >>67
ファイルエクスプローラーはアクティブバーのボタンをもう一回押せば非表示に出来る
エディタの配置はタブをドラッグしたら直感的に出来るはず
ミニマップはメニューの 表示>ミニマップの切り替え で非表示に出来る HTML+CSSのLive Preview機能に限ってはBracketsが一番優秀な気がする Win10ProでVSCode入れたのだが、
Windowsのエクスプローラーでフォルダ一覧を出しておいて、
目的のフォルダを選択して右クリックメニューにVSCodeで開くというメニューは
無いの？
毎回VSCodeを起動してフォルダを開くのが面倒なのだが。 >>73
ググってここに来たんだよ。
教えれろよ。
レジストリいじるのか？ >>63
自分もlive serverの自動リロード？が効いてません…
調べても同様のケースが見つからず悩んでいます
ファイルはローカルに置いてあるんですが何故でしょうか… >>72
それは質問するまでもなく、
そうなるように、自分で実装すればいいんじゃないの？ インストール時のオプションでコンテキストメニューに追加するかどうか選択できるよ
その部分もossだから心配ならそこから引っ張ってくれば
ググれば出るともうけど >>70
2つのペインを分ける境界が無駄に太いですｗ >>82
節子それ東プレやないリアフォのHHKB仕様や もともとPFUは東プレのキースイッチ使ってHHKB作ってるから。
今回ようやく表立ってコラボしただけ。 >>84
ものはリアフォR2だけど販売はPFU。コラボ製品で仕様はHHKBになってる。
PFUは東プレのOEM先。 >>81
> 販売価格：¥28,500（税抜）（¥30,780（税込））
グエーッ！ >>76
63ですが私はVSC使い始めたばかりの初心者なので見当つかないですすみません。
環境や経緯の詳細書いて質問しなおされたほうがいいと思いますよ。 ファイル保存する時にエンコーディング指定する方法を教えてくれ >>91
困ったらとりあえず Ctrl(Cmd) + Shift + P で encoding とかキーワード入れてみろ >>93
出来たよ。ありがとう。
もう一つ教えてくれよ。
Ctrl(Cmd) + Shift + P
で開いた入力欄で何故かマウス右クリックメニューが出ないので
コピーペーストで貼り付けられない。
でもキーボード入力は受け付けるのでCTRL+Vでは貼り付けられる。
なぜマウス右クリは効かないの？
Windows10よ そんなところでマウスに手を伸ばすアンポンタンが使うことを想定していないからだろうな >>95
パソコン操作の８割をマウスでやる
俺を馬鹿にしているのか。
もう一つ教えてくれよ。
VSCodeウインドウのボーダーが目立たないので分りにくい。
Visual Studio 2017みたいにボーダーを強調表示する設定はないの？ キーボードの操作を覚えると楽だよ
vim使えとは言わないがショートカットキーを壁に貼って暗記しよ >>81
これめっちゃ良いな
俺リアフォもHHKBもどっちも持ってないけどこれはリアフォ名義のHHKBってこと？ ■ このスレッドは過去ログ倉庫に格納されています
