まえおき
ウェブサイト制作の開発環境をVite版・package.json.scripts版で作ってみた。
ところでVisual Studio Code（VS Code）はIDE、すなわち統合開発環境である。
テキストエディタ機能だけでなくソースファイルをビルドしたりデバッグしたりする機能を元々持っているので、タスクランナーを導入しなくてもVS Code単体でHTMLやCSSなどを書き出すことはできるのだ。
ウェブサイトだけに特化している訳ではないので少々心もとないが、できなくもない。
VS Codeさえインストールしていれば実行できるので、Node.jsやローカルサーバを用意しなくてもできるのはお手軽メリット。
言語はPug・Sass (SCSS)・Javascript。
ファイルとフォルダ作成
Viteの時に作ったphewを今回も流用するよ。
プロジェクトフォルダを作る
フォルダ名をphewとして新規作成。
VS Codeを新しいウィンドウで開き、フォルダをドラッグ・アンド・ドロップ。
今回はパブリッシュを行わないのでphew3というフォルダ名で仮作成した。
mkdir src
mkdir src/html
mkdir src/css
mkdir src/js
mkdir src/public
mkdir src/public/img
mkdir dist
mkdir dist/img拡張機能
拡張機能➡入力欄「Marketplaceで拡張機能を検索する」で、次の[**1]以外の拡張機能をインストールする。
- File Watcher (Author: @Appulate)
- Live Sass Compiler (Author: @Glenn Marks)
- Live Pug Compiler2 (Author: hadukinei) [**1]
- Live Server (Author: @Ritwick Dey)
Live Pug Compiler
Marketplaceで公開されているこれは、GitHubで公開されているものよりも古い。
メンテナンスもされておらず、必要な機能が全然たりていないのでアップデートした拡張機能を配布しますよ。
【ダウンロード】
Zipファイルを解凍するとVSIXファイルが出てくる。
この状態で拡張機能➡…（ビューとその他のアクション）➡VSIX からのインストール➡ファイルを開く、の手順でインストールする。
settings.jsonの編集
.vscode/settings.jsonがあれば上書き保存、なければ新規作成。
以上。
環境整備はこれだけ。
拡張機能は一度インストールしてしまえば今後は不要な手順なので、フォルダを作って.vscode/settings.jsonを書き換えるだけなので大変シンプル。
GitHubリポジトリの作成
プロジェクトフォルダをGitHub Desktopのウィンドウにドラッグ・アンド・ドロップしてリポジトリを新規作成する。
「create a repository」「Create repository」「Publish repository]」「Publish repository」と4回クリックすれば制作前の準備は全て完了。
制作
開発モードあり〼。
VS Codeのステータスバーにある3つのボタンを押す。
- Watch Sass
- Start Pug Compiler
- Go Live
ボタンを押すだけで自動的にブラウザの新しいタブで開発モードが開く。
srcフォルダ以下のファイルを更新すると、自動的にdistフォルダへ書き出される。
3つのボタンを再び押すと、開発モードは勝手に終わってくれる。
publicフォルダの挙動が少し怪しいので、自分で該当のフォルダへコピペしてもよい。
編集するファイルは次の通り。
- src/*.pug
- src/js/*.js
- src/css/*.scss
- src/public/*.*
- src/public/img/*.*
開発モード・ローカルサーバ・レンタルサーバ・GitHub Pagesと、書き出しを行うディレクトリパスは.envファイルに設定を書き込んでいた。
今回はsrc/_variable.pugに設定を書いている。
またアナリティクス関連の出力を行うか設定も同じくsrc/_variable.pugのisPublish変数で管理している。
【おまけ】VS Code拡張機能の作り方
拡張機能を自作なりカスタマイズなりしようとする場合はNode.jsが必須になる。
それと意外な落とし穴だが、VS Codeのバージョンが最新版でない場合は確実にエラーになる。
Windows版VS Codeはインストール中のバージョンは確認可能だが、自動的にアップデートしてくれないので何が原因か分からず途方に暮れることがある（数時間ほどのロス）
初期化
プロジェクトフォルダを作って、VS Codeの新しいウィンドウにドラッグ＆ドロップ。
npm init -ynpm i -g yo generator-codeyo code拡張機能の初期化時に発生する設問に対する回答は次の通り。
- What type of extension do you want to create?
- New Extension (TypeScript)
- What's the name of your extension?
- （拡張機能の名前を入力する）
- What's the identifier of your extension?
- （空欄のままエンターキー押下）
- What's the description of your extension?
- （何か適当な説明文を入力）
- Initialize a git repository?
- N
ここでGitHubリポジトリを作ってもいいが、後回しにしてもいいのでN (No)にしておいた。
ちなみにリポジトリ登録をしておかないと、拡張機能のところが名無しさんになってしまうので要注意。
- Which bunder to use?
- none
- Which package manager to use?
- npm
- Do you want to open the new folder with Visual Studio Code?
- Open with `code`
開発
これで初期化が完了。
VS Codeの新しいウィンドウが開くので、そちら側でコーディングを行う。
詰まったポイント。
assertパッケージが必要だった。
npm i @types/asserttsconfig.jsonの編集
- "types": ["mocha"]を追記する
- "lib"が["ES2022"]などとなっているなら、["ES2022", "DOM"]のように追加設定を行う
コーディング中はF5キーを押すとデバッガモードになり、新しくVS Codeのウィンドウが開かれる。
開いたウィンドウを閉じればデバッガモードは終了。
デバッガを起動する時にエラーが度々出るのだが、無視して進める場合と、無視するとエラーになって起動できない場合とがある。
書き出し
開発が終わったらVSIXファイルの書き出しを行う。
npx vsce package- リポジトリを登録していないとコンパイル時に注意される
- LICENSEファイルが存在しない場合はコンパイル時に注意される
- README.mdファイルが初期状態から編集していない（拡張機能の説明書きを行っていない）場合はコンパイル時に注意される
エラーなどの問題がなければVSIXファイルが作られる。
インストールしてみて、ちゃんと動作するようなら完了。
意図しない動作をしているなら開発まで１マス戻る。