【ワレコVSCode】TypeScript・SCSSコンパイル設定、PHP・TypeScriptデバッガー使用、背景色設定も

この記事は約20分で読めます。
スポンサーリンク

ワテの場合、最近VSCodeを使い始めた。

今まではVisual Studioをメインに使っていたのだが、今後はVSCodeも併用する事にしたのだ。

その最大の理由は、Visual Studioでは標準ではPHPのデバッグが出来ないのだ。

PHP以外の殆ど全ての言語に関しては、Visual Studioは標準でデバッガーも使えるのにPHPに関しては何故か出来ない。

もしやりたい場合には、他社製の有料製品を買わなくてはならない。

まあそれでも良いのだが、VSCodeを使えばPHPのデバッグも無料で出来る事を知って、先日その環境を整えた。

その顛末は以下の記事にまとめた。

【ワレコ講座】Windows10+IIS+VSCode+PHP+XdebugでPHP開発環境を作る
写真 PHPでXDebugが動かないので困っている人 ワテの場合、Windows VPSレンタルサーバーを契約している。 ABLENET レンタルサーバー そのWindows VPSでは、各種の自作WE...

さて、当記事では、VSCodeに関してその後マスターした幾つかの小技を紹介したい。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

VSCodeのメニューにアイコンは追加出来ないようだ

ワテの場合、Visual Studioの使用経験は長い。

そのVisual Studioでは、[検索]や[置換]の機能は良く使うのでメニューに表示するカスタマイズを行っている。

図 Visual Studioのメニューに[検索]や[置換]ボタンを追加した例

その辺りの解説記事はこちら。

【ワレコの入門講座】Visual Studio2017の使い方【メニューを使いこなす】
自称プログラミングの変人のワテが、全国推定数万人(ワテの勘)くらいのVisual Studioファンの皆さんの為に、Visual Studioのメニューの使い方を解説したい。 ワテの場合、 Wareko.NET 公式サイト におい...

さて、VSCodeの場合には、メニューバーは非常に簡素であり、また上部にアイコンすら並んでいない。

でも例えば、

元に戻す (CTRL+Z)
やり直し (CTRL+Y)

などは良く使うので、一々メニューバーから呼び出して実行するのは面倒だ。

出来れば、ツールバーにアイコンを追加してマウスクリックだけでUNDOやREDOが出来れば使い勝手は良い。

それで、暫くネット検索してみたのだが、VSCodeではそれは出来ないようだ。

Add Undo and Redo buttons · Issue #25486 · microsoft/vscode
VSCode Version: 1.11.2 OS Version: Windows 10 Steps to Reproduce: There is no undo or redo button. One can use Ctrl+Z and Ctrl+Y but it is often easier to have ...

このマイクロソフト社のサイトにまさにそんな質問と回答が書いてあるので以下に引用させて頂く。

MickeySegal commented on 27 Apr 2017
VSCode Version: 1.11.2
OS Version: Windows 10
Steps to Reproduce:

There is no undo or redo button. One can use Ctrl+Z and Ctrl+Y but it is often easier to have buttons. This had been an issue but someone created a plugin as detailed at http://stackoverflow.com/questions/819846/how-to-add-undo-redo-buttons-to-toolbar-in-eclipse
It would be helpful to add Undo and Redo buttons to the interface.

MickeySegalが2017/04/27にコメントしました
VSCodeのバージョン:1.11.2
OSのバージョン:Windows 10
再現する手順:

元に戻すまたはやり直すボタンはありません。 Ctrl + ZとCtrl + Yを使用できますが、ボタンを使用する方が簡単なことがよくあります。 これは問題でしたが、誰かがhttp://stackoverflow.com/questions/819846/how-to-add-undo-redo-buttons-to-toolbar-in-eclipseに詳述されているようにプラグインを作成しました
インターフェイスに[元に戻す]ボタンと[やり直し]ボタンを追加すると便利です。

表 VSCodeにUNDOやREDOアイコンが無いので追加する方法は無いのかと言う質問

英文の翻訳にはGoogle翻訳を使った。

それに対するマイクロソフト社の人の回答は以下の通り。

stevencl commented on 25 May 2017
One of our design philosophies for VS Code is to keep the UI minimal and to only show what we think really needs to be shown. Many developers will use the keyboard shortcuts for undo and redo and so it could be counter productive to add buttons that many developers may not use. It could decrease the lightweight feel of VS Code without adding significant value.

I understand that everybody is different and that in your case you would prefer to see these buttons. But unfortunately I don’t believe that this change would add enough value for all developers who use VS Code.

So thanks very much for the suggestion, but I will close this issue for now.

stevenclが2017年5月25日にコメントしました
VS Codeの設計理念の1つは、UIを最小限に抑え、実際に表示する必要があると思う部分だけを表示することです。 多くの開発者が元に戻すとやり直しのためにキーボードショートカットを使用するので、多くの開発者が使用しないかもしれないボタンを追加することは非生産的かもしれません。 大きな価値を追加することなく、VS Codeの軽量感を減らすことができます。

私は誰もが異なることを理解しています、そしてあなたの場合あなたはこれらのボタンを見ることを好むだろうということを。 しかし残念ながら、この変更によってVS Codeを使用するすべての開発者に十分な価値が追加されるとは思われません。

それでは、この提案に心から感謝しますが、今はこの問題を締めくくります。

表 VSCodeにUNDOやREDOアイコンは追加出来ませんと言うマイクロソフト社公式回答

まあ、この回答によるとVSCodeの設計思想はミニマルなデザインと言う事なので、上部にツールバーアイコンボタンなどは追加出来ない設計との事だ。

まあ、マイクロソフト社の人がそう言うのだから出来ないのだろう。

残念。

でもなあ、自称ユーザーインターフェース設計の専門家のワテに言わせれば、それは間違った考え方だ。

エディタ画面の上部にメニューバーやツールバーが有るのは世の中の一般的なスタイルな訳だから、VSCodeの設計思想がミニマルなUIだからと言って、ツールバーすら追加出来ない構造にするのは間違っている。

正しい選択肢は、ツールバーはもちろん追加出来る構造にしておいて、必要無い人は非表示にする機能を追加しておけば良いだけだ。

それにも関わらず、設計時点でツールバーを追加出来ない構造にするなんてのは、もし将来、ツールバーを追加したくなったとしたら、大幅な設計変更が必要になるのは目に見えている。

その結果、その場しのぎ的に機能を追加して、バグが入りまくる。

まさに継ぎはぎだらけのWindows開発スタイルから抜け出せていないマイクロソフト社の開発部門の社風を象徴しているのではないのか?などと批判しても埒が開かない。

諦めよう。

あるいは、DLLインジェクションとか、ある種、裏技的手法でも使えば既存のアプリにツールバーを追加する事は出来なくは無いのかも知れない。

まあ、あまりヘンテコな事を考えるのはやめておこう。

VSCodeでSCSSとTypeScriptのコンパイル

ウェブプログラミングをやる人ならcssやJavaScriptを使うよりもSCSSやTypeScriptを好む人が多いだろう。

ワテの場合もその一人だ。

まずは、これらのファイルのコンパイル環境を整備した。

VSCodeでSCSSのコンパイル

ウェブサイトの見た目を設定出来るスタイルシート言語には、

  • SASS
  • SCSS
  • LESS
  • CSS

などがあるが、ワテの場合はSCSSを使っている。他の言語の事は良く知らない。

さて、そのSCSSをコンパイルしてCSSを生成したい。

Visual Studioの場合なら、SCSSコンパイルが出来る拡張機能が幾つかあるので、ワテはその中の一つを使っている。Web Compilerと言うやつだ。

一方、VSCodeの場合にも同様に、SASSやSCSSがコンパイルできる幾つかの拡張機能を見付けた。

その中の、

Live SASS Compiler

はインストール数も多く人気の拡張機能なので試してみた。

結論としては、使うのをやめた。

理由は、なんだか良く分からないエラーが良く出るのだ。

特に

@import "path1/path2/style.scss"

のような記述で他のscssファイルをインポートする行があると、何故かうまく行かない事があった。

エラーするとCSSファイルはもちろん生成されないが、それだけではなく、確か、拡張機能が動作不能になった。解決方法は、一旦拡張機能をアンインストールして再インストールするしかなかった。

でも再び同じエラーが繰り返すのだ。

原因は分からない。

そう言う理由でLive SASS Compilerの使用は中止した。

それで色々調べていたら、マイクロソフト社のサイトを見付けた。

CSS, SCSS, and Less support in Visual Studio Code
Find out how Visual Studio Code can support your CSS, SCSS and Less development.

VSCode公式サイトだ。やっぱり、この手の情報は公式サイトを見るのが良いだろう。

そしたら、SCSSやSASSのコンパイルに関しては、拡張機能などを使わなくてもVSCode標準のコンパイラーがあるのでそれを使えば良さそう。

VSCodeでSCSSのコンパイル設定

.vscode/tasks.json

に以下のように記述しておけば良い。

// Sass configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass my_path/styles.scss my_path/styles.css",
            "group": "build"
        }
    ]
}

特に難しい部分は無いと思う。

コンパイルしたいscssファイルと出力したcssファイルをパスを指定してcommandの部分に書き込んでおけば良い。

パスのルートは、今VSCodeに読み込んでいるフォルダのルートだ。

なお、この例だと一つのscssファイルのコンパイルの設定だが、例えば特定のフォルダの下にある全SCSSファイルを一括でcssファイルにコンパイルしたいなどと言う要望もあるかも知れない。

その辺りのやり方は未確認だ。上記のtasks.jsonファイル設定だけで出来るのかどうかも未確認だ。

さて、上のtasks.jsonの設定に従ってSCSSをコンパイルしてCSSを生成したい場合には、キーボードから

CTRL+SHIFT+B

を実行すると良い。

なお、キーボード操作で手動コンパイルではなくて、SCSSをファイル保存した瞬間に自動でコンパイルする方法に関しては未確認だ。

もし知っている人がいたら教えて下さい。

VSCodeでTypeScriptのコンパイル

VSCodeでTypeScriptをコンパイルする方法に関しても、マイクロソフト社の公式サイトの情報が役に立つ。

TypeScript Programming with Visual Studio Code
Get the best out editing TypeScript with Visual Studio Code.

このサイトによれば、ルートフォルダに置いた設定ファイル

tsconfig.json

に以下の記述をすれば良い。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "watch": true
    }
}

これで、今VSCodeに読み込んでいる全ファイルの中のTypeScriptファイル(拡張子.ts)は、その内容を編集してファイル保存した時点で自動でJavaScript(拡張子 .js)にコンパイルされる。

またsourceMapをtrueにしているのでマップファイルも自動生成される。

このマップファイルはこの後でTypeScriptをデバッグする時に必要になるので、必ず生成しておく事。

jQueryが見付からないエラーが出る対策

TypeScriptコンパイラの”Compile on Save” 動作が出来るようになって使い易くなった。

ところが、jQueryが認識されないのでエラーが出るのだ。

単純なこんなコードでも、

Query(function ($) {             ← この部分で error TS2304が出る
   var div_all = $('div');
   ...
}

以下のようなエラーが出る。

error TS2304: Cannot find name 'jQuery'.

まあ、要するにTypeScriptコンパイラがjQueryを認識出来ていないのだ。

こう言う場合には、 TypeScriptの type definitions fileをインストールするれば良いはずだ。

本家のサイト http://definitelytyped.org/

少し調べてみたら、以下のnpmコマンドで良いみたい。

npm install --save @types/jquery

早速、VSCodeで新しいターミナルウインドウを開いて実行したら無事にインストール成功し、上記エラーも解消出来た。

VSCodeでPHPとTypeScriptのデバッグ

さて、いよいよPHPとTypeScriptのデバッグだ。

VSCodeでPHPのデバッグ

VSCodeでPHPのデバッグに関しては、先日執筆した記事に詳しいので参考にして頂きたい。

【ワレコ講座】Windows10+IIS+VSCode+PHP+XdebugでPHP開発環境を作る
写真 PHPでXDebugが動かないので困っている人 ワテの場合、Windows VPSレンタルサーバーを契約している。 ABLENET レンタルサーバー そのWindows VPSでは、各種の自作WE...

VSCodeでTypeScriptのデバッグ

一方、VSCodeでTypeScriptのデバッグに関しては、以下のYouTube動画が参考になった。

この動画に従ってやると上手く行く。

Debug TypeScript with Visual Studio Code (TypeScript tutorial, #10)

まずは拡張機能、

Debugger for Chrome

をインストールする。もし他のブラウザーを使っている人は、そのブラウザー用のデバッグ拡張機能を入れれば良いと思うがワテは試していない。例えば、Debugger for EdgeやDebugger for Firefoxと言うのがある。

さて、Debugger for Chromeをインストールしたら、後は、

.vscode/launch.json

ファイルに以下の記述を追加する。

{
    //Debugger for ChromeのYouTube動画を真似した設定
    "type":"chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080"    //必要に応じて変更する
    //"webRoot": "${workspaceFolder}" //自動で出たやつ
    "webRoot": "${workspaceRoot}"     //YouTubeのサンプル
}

まあ、何となくわかるが詳しい事はワテは知らない。

例えば、webRootの部分は、VSCodeが自動生成した内容ではなく、YouTube動画の記述

"webRoot": "${workspaceRoot}" //YouTubeのサンプル

を採用した。

あとは、デバッガーを実行する時に、”Launch Chrome”を選択するとこの設定ファイルが使われるのでTypeScriptがデバッグ出来る。

実際にやってみると、Chromeが起動して、TypeScriptファイルにセットしたブレークポイントで停止するので、いい感じでデバッガーが動いた。

「未確認のブレークポイント」と表示されてブレークしない場合

今日、久しぶりにtypescriptデバッグを試みたのだが、デバッガーを動かすには、

launch.json      デバッガー設定

tasks.json    TypeScriptコンパイラ設定

tsconfig.json   TypeScriptのmapファイル設定、ファイル保存時コンパイル設定(watch)など

などのファイルが必要なのは前回YouTube動画を見て設定したので覚えていた。

前回、TypeScriptデバッグが成功したプロジェクトからこれらのファイルをコピペして、今回新たにデバッグを行いたいプロジェクトに同じ設定を書いた。

ところが、Debugger for Chromeを起動しても、

「未確認のブレークポイント」

と表示されてブレークしないのだ。

おかしい。

数十分試行錯誤したのだが、ブレークしない。

このプロジェクトはWordPressのプロジェクトなのだが、WordPress側の設定で、

CSS
HTML
JavaScript

をMinifyするようにしていた。

それを解除したら、無事にブレークするようになった。

詳しくは調べていないのだが、たぶん、JavaScriptのMinifyをするとマップファイル内容と情報の齟齬が生じるのかな。

PHPとTypeScriptの同時デバッグは出来るのか?

現状では、PHPデバッグとTypeScriptデバッグは同時には出来ない。

理由は、

.vscode/launch.json

ファイルで設定しているデバッガーの設定が、PHPやTypeScriptごとに異なっているから。

なのでPHPをデバッグする場合には、TypeScriptはデバッグ出来ないのでTypeScriptのブレークポイントで止まらない。逆も成り立つ。

まあ、個別にデバッグ出来るだけでもかなり作業効率は上がるので良いのだが、出来ればPHPとTypeScriptを同時にデバッグしたい。

Visual Studioなら、PHP Tools for Visual Studioを使えば、PHPとTypeScriptやJavaScriptの同時デバッグは容易に出来るので、VSCodeでもその環境を構築したいところだ。

引き続き調査したい。

ここまでの設定で、VSCodeを使ってPHPやTypeScriptが混在したWEBサイト、例えばWordPressのウェブサイトをデバッグする環境はほぼ整った。

以下ではもう少し使い易くする工夫をする。

VSCodeの配色を変える

ワテの場合、プログラミング環境のエディタ画面は黒色系が好きだ。

背景色が黒で文字が白色系が読み易いからだ。

ところが、Visual StudioとVSCodeをともに黒色系の設定にすると見た目が良く似ているので混乱するのだ(下図)。

図 Visual Studio 2017 Community(左)とVSCode(右)見た目が良く似ている

これでは、VS2017とVSCodeを同時起動していると、うっかり間違えて別のウインドウを選択してしまう。

VSCodeの背景色を変更する

VS2017かVSCodeかどちらかの背景色を変更すれば混乱は解消するので、今回はVSCodeの背景色を変えてみた。

ファイル

   基本設定

      配色テーマ

を開く

配色テーマの設定画面(下図)が出るので、現在選択している黒色系テーマを明色系テーマに変更してみる。

図 VSCodeでDark+ (default dark)テーマを選んだ例

ちなみに、Dark+ (default dark)(上図)以外にもDark+ (Visual Studio)と言う濃色系テーマがあるのだが、どちらも同じ色合いなので違いが良く分からない。

さて、ここでは、以下のようにしてみた

変更前 Dark+ (default dark)  上図

変更後 Light+ (default light) 下図

その結果、明るい画面になる。

図 VSCodeでLight+ (default light)を選んだ例

まあ、これだとVS2017の濃色系画面とは一目瞭然で区別出来るのだが、ワテの場合は明色系は嫌いなので、この方式は不採用とした。

VSCodeウインドウのボーダーのみ色を変える

ウインドウ全体を明色系にするのではなくて、ウインドウのボーダーのみ色を変える設定もあるのでそれを試した。

.vscode/settings.json

ファイルを作成して、以下の記述を追加する。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#003d7b",
        "titleBar.activeBackground": "#003d7b",
    }
}

その結果、VSCodeウインドウのボーダーを青色にする事が出来た。

図 Visual Studio 2017 Community(左)、VSCode(中)、VSCode(右)

さらに別のVSCodeウインドウは黄色系にしてみた。

これでVisual Studio 2017 CommunityやVSCodeのウインドウを複数画面起動していても間違える事は無くなった。

エクスプローラーに表示されるファイル、フォルダを非表示にしたい

エクスプローラー(Ctrl+Shift+E)画面には、今読み込んでいるフォルダやファイルが全部表示される。

しかし、場合によっては、不要なフィアルやフォルダは表示させないほうがスッキリする。

Visual Studioの場合ならば、それらのファイル、フォルダを右クリックして「プロジェクトから除外」を実行すれば良い。

一方、VSCodeの場合には、同じく右クリックで「削除」と言うのが有るのだが、削除を実行してしまうと、文字通りそれらのファイル、フォルダは削除されてゴミ箱行きとなるので、それは困る。

では、プロジェクトには読み込んだ状態であるが、エクスプローラーには表示させないようにするにはどうすれば良いか?

以下のようにすれば可能だ。

.vscode/settings.json

上の設定ファイルを開いて、以下のように “files.exclude”ブロックを追加すれば良い。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#003d7b",
        "titleBar.activeBackground": "#003d7b",
    },
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/wp-admin":true,        
        "**/twentyseventeen":true,
        "**/twentysixteen":true,
        "**/wp-content/upgrade":true,
        "**/wp-content/uploads":true,        
        "*.php":true,
        ".htaccess*":true,
    }
}

パスの指定は以下のように ** でやると

 "**/*.php": true,

全てのサブフォルダの中の “*.php” と言うファイルが非表示に出来る。

あるいは、

 "my_path/*.php": true,

とすると、現在読み込んでいるフォルダ(例: /root)からの絶対パス(/root/my_path/*.php)となる。

ワテがインストールしている拡張機能(参考)

参考までにワテがVSCodeにインストールしている拡張機能は以下の通り。

図 ワテがVSCodeにインストールしている全拡張機能

まあ、良く分からないままネットで評判の良さそうな拡張機能を取り敢えず入れてみた。

エディタ画面を見易くする拡張機能が多い。

まとめ

当記事では、VSCodeで

  • VSCodeにはUndoやRedoアイコンが無く追加も出来ない
  • SCSSファイルをコンパイルしてCSSファイル生成
  • TypeScriptファイルをコンパイルしてJavaScriptファイル生成
  • PHPファイルのデバッグ
  • TypeScriptやJavaScriptファイルのデバッグ
  • VSCodeの配色テーマの変更方法
  • VSCodeのボーダー部分の色変更方法

に付いて解説した。

これらの設定を行うと、VSCodeはPHPやTypeScript、JavaScript、SCSSで構成されたウェブサイトのプログラミングやデバッグで実用的な環境になるだろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

VSCode
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント