HTML,CSSを記述する際は、なんだかんだでいまだにDreamweaverを使ってしまっています。
FTPもGitもそのまま使えて便利だし過去にテンプレート機能を利用して作成したサイトもいまだに稼働しているので、できることなら使い続けたいところです。
しかし、開発の止まったアプリをいつまでも使っているわけにもいかないのとJavascript・Typescriptを記述する、AI機能を利用するとなるとやはりVisual Studio Code（VSC）に軍配が上がることになります。いまは両刀ですが近いうちにVSCに完全移行することになるだろうなと思っています。
（いつの間にやらピンクに変わってしまったDWのアイコンも目に痛いし）
というわけで、ここでは数回に分けていかにVSCをWeb制作用に最適化していくか記していきます。
初回の今回はVSCの各サポート機能の設定とsetting.jsonについて。
単純にsetting.jsonの内容だけ備忘録的に残しておこうと思ったのですが、もしかしたら設定を変更できること自体知らずに「VSCはこういうもんだ」と思って不便に慣れてしまっている方もいるかなと思いましたので、各項目の簡単な説明と好みの分かれそうなところをメインに解説を入れたいと思います。
VSC設定画面
基本から行きます（設定の仕方はわかってるという方はこの項と次の項はとばしてください。）
まずCtrl + 「,」（カンマ）で設定画面を開きます。
＊macの方はCtrlはCommandと読み替えてください
上部検索窓に「HTML」と入れるとHTML関連（正確には設定名に「HTML」と入っているもの）が表示されます。
最上部に表示されている「Auto Closing Tags」はわかりやすいと思いますが「タグ入力時に自動的に閉じタグを入れるかどうか」の設定です。<p>と入れたら</p>を入れてくれるということです。デフォルトでオンになっていますが開始タグをコピーペーストするだけでも常に閉じてしまうのでオフにしている方も多いと思います。
その下の「Auto Create Quotes」は「属性」に対する「””」（ダブルクォーテーション）の自動補完です。「<p class=」と入力すると「<p class=””」と補完されます。
この手のものはチェックのオン・オフで有効・無効が切り替えられるのでわかりやすいですが、その下の「Attribute Default Value」は選択式になっています。「完了が承認された場合の属性の規定値を制御します」という日本語訳がどうにもわかりづらいですが、要は「Auto Create Quotes」の際の引用符を「”」にするか「’」（シングルクォート）にするかの切り替えです。ここは好みで変更すれば良いのですが気をつけないといけないのは選択肢に「empty（空）」があることです。これを選ぶと先の「Auto Create Quotes」をオンにしていても引用符が補完されなくなります。このように他の設定に影響を及ぼすものもあるのが厄介です。
このようにひとつひとつ意味を確認しながらチェック、選択を繰り返していいけばカスタマイズができるのですが複数の設定をまとめて行いたい際には正直めんどくさいです。
そんなときには「setting.json」を編集します。
setting.jsonで編集
変更した設定はsetting.jsonという名前のjson形式のファイルで保存されています。慣れてくるとこちらで直接書き換えることが多くなると思います。
このファイルの出し方ですが、先の画面にもリンクが下部に出ていました。ここをクリックすれば別タブでsetting.jsonファイルが開きます。
見つからない場合は、先ほど「HTML」と入力した検索窓に「setting.json」と入れると出てくると思います。
jsonなのでメモ帳などで直接書き換え可能なファイルですが、VSCのこの画面からであれば行頭にカーソルを持っていくことで選択肢が表示されますので、不用意に「,」や{}を消すなどしてファイルを壊す心配がありません。
なんの設定かわからないものが記述されている場合には、そのプロパティの上にカーソルを乗せれば説明が表示されますので確認して変更します。
VSCのHTML関連設定
編集方法がわかったところで実際にHTMLでどんな設定ができるか見てみたいと思います。
先述のように「HTML」「Tag」などで検索でして片っ端からオフにしてみた設定が以下となります。
"editor.formatOnType": false, // 入力した行を自動でフォーマット
"editor.formatOnSave": false, // ファイル保存時に自動でフォーマット
"editor.formatOnPaste": false, // 貼り付けを行ったときに自動でフォーマット
"html.format.enable": false, // 既定のHTMLフォーマッタを有効/無効にします
"html.autoClosingTags": false, //HTMLタグの自動クローズ
"html.suggest.html5": false, //HTML5の候補サポート
"html.format.indentHandlebars": false, // <head>セクションと<body>セクションをインデント
"html.format.templating": false, //テンプレート機能を使う
"html.autoCreateQuotes": false,//既定の引用符の自動挿入
"html.format.preserveNewLines": false,//改行時のフォーマット
"html.hover.documentation": false,//HTMLの説明表示
"html.hover.references": false,//HTMLのMDN参照表示
"html.validate.scripts": false,//HTMLバリデーション
"html.validate.styles": false,//HTML内のCSSバリデーション上記プロパティを全部説明すると長くなりますので各行コメントを入れておきました。こちらを参考にして必要なものはオンにしてください。基本的にオンになっているものがほとんどでしょうから実際には上記気になるプロパティでご自身のsetting.jsonに記述がないものをVSCの検索窓で検索してチェックを外す（無効にする）ということになると思います。
上から三行「editor.formatOn〜」のシリーズはHTMLの設定ではないですがどんなスクリプトを記述していても動作する設定なので当然HTMLにも影響しますので好みに応じてtrueにします。
保存時に自動フォーマットの「editor.formatOnSave」は便利なのですが「そこじゃない！」といううところに改行が入ったりするので私はオフにしておいて必要なところで自分でフォーマット（alt+shift+F）するようにしています。
「html.format.enable」はtrueにしておきましょう。これをオフにすると上記ショートカットを叩いても「フォーマッタがありません」と表示されてしまいます。その他フォーマット関連の設定全てに関わる部分です。
なお、機能拡張で別途フォーマッタを入れている方は標準装備のフォーマッタではなくそちらのほうに影響が及びます。複数フォーマッタが入っているとフォーマットのたびに選択を求められかねないのでデフォルトをどちらにするか設定しておくと良いでしょう。ここは機能拡張導入時に設定できるでしょう。
「html.suggest.html5」はタグの候補を表示してくれるのでTrue推奨ですが「html.hover.documentation」と「html.hover.references」は表示がデカくてありがた迷惑なことが多いので私はオフにしています。
「html.format.templating」はVSCでテンプレート機能を利用しなければ意味のない設定だと思います。テンプレート機能については詳細省きますが個人的にはDreamweaverのテンプレートの代替としてはPUGを使う方向なのでオフで。
他にもあるかと思いますが基本的にはこんなところを好みで設定しておけば快適だろうと思います。
他にもいい設定があるよという方は教えていただけると幸いです。
VSCのCSS関連設定
"css.hover.documentation": false, //cssの説明表示を無効に
"css.hover.references": false, //cssのMDNへの参照を無効に
"css.completion.completePropertyWithSemicolon": false, //セミコロンの自動挿入を無効に
"css.completion.triggerPropertyValueCompletion": false,// CSS プロパティを選択した後にプロパティ値の補完
"css.format.enable": false,//既定のCSSフォーマッタを有効/無効にします
"css.format.newlineBetweenRules": false,//ルール間に改行を入れる
"css.format.newlineBetweenSelectors":false,//セレクタ間に改行を入れる
"css.format.preserveNewLines": false,//改行を保持する
"css.validate": false,//cssバリデーション
"css.format.braceStyle": "expand",//セレクタと{の間に改行を強制する
"css.lint.emptyRules": "ignore",「css.format.enable」もtrue推奨です。HTML同様、オフにしておくと「フォーマッタがありません」が表示されて慌てて機能拡張をインストールするということになりかねません。（なにもしなければインストール時でオンになっているはずの設定です）
「css.hover.documentation」と「css.hover.references」はHTML同様、個人的には外しています。プロパティのサジェスチョンさえあれば十分だからです。
「css.completion.completePropertyWithSemicolon」これはかなり好みが分かれそうですが「セミコロンの自動挿入」です。便利そうなのですが意外と孤立した「；」が出来てしまいがちで個人的にはオフで。
「css.format.newline〜」のシリーズは改行の自動挿入です。ルール間での改行はあったほうが良いですがセレクタの改行については好みがあると思います。
リセットCSSなどでよく使う↓これが
h1,
h2,
h3 {
}設定のよっては↓こうなったりするので適宜切り替えましょう↓
h1, h2, h3 {
}「css.format.braceStyle」はセレクタと{の間の改行なのでこれは完全に好みでしょうね。
h1{} /* これか */
h1
{}. /*これの違い */「css.lint.emptyRules」はあれです。セレクタ書いて{}で囲って「さあ書くぞ！」ってところで「空のルールセットを使用しないでください。」とか怒ってくるやつ。
デフォルト「Warning（警告）」なので「ignore（無視）」で。
余談
以上、HTMLとCSSに絞って設定を見てきましたがいかがでしょうか。
すこしでも参考になるものがあれば幸いです。
それとはべつに最近VSCをアップデートしたらポヨポヨうるさい音が鳴るようになっていたので最後にその時の設定だけ記しておきます。
"editor.accessibilitySupport": "off"//警告音を消す（正確にはスクリーンリーダーの制御）
アクセシビリティの設定のようなので音を消す以外にもなにか影響が出ているかもしれませんが、とりあえずコード入力（とくにTS）の際にうるさいのが解消できました。
この記事はDreamweaverからVSCへの乗り換える作業の備忘録として何回か続けていこうと思いますので引き続き宜しくお願い申し上げます。
更新の際はSNSでもお知らせします。
コメント