Visual Studio Codeの初期設定と触った感想

DWを継続してもいいんだけど。

導入経緯
拡張機能
1. 日本語化
2. テーマ変更
軽く触ってみて
HTMLを新規作成する
1. Emmetのショートカット周りについて
置換について

導入経緯

以前MS謹製のエディタを触ったことがあるんだけど、インストールも起動も重くて触ってられなかった。Adobeで作業することが多くなったからDWを使うようになって、Emmetにも慣れて、それで簡潔かと思ったらいつかのバージョンアップでめちゃくちゃ重くなったり、たまにバグったりがあって不満が募ってた。バージョンダウンとか再起動すればなんとかなるけども。

エディタの流行りはたまになんかしらの記事で読んだりしてて、でも有料で乗り換えてめんどくなるのもやだなって感じがあって、そんなこんなでVisualStudioCodeが人気になってて、無料で、だから入れてみた。

拡張機能

拡張機能を追加して環境を構築する感じのやつ。
インストール→有効化の手順があるんで、そこは間違えないように。

そもそもあまり機能追加は好きじゃないところに、元々の機能を踏まえて抑えとくといいと思うのは以下の内容。

日本語化

そのまま使える日本人はあんまりいないんじゃないかな。

【エンジニア入門】Visual Studio Codeを日本語化する方法 | .NETコラム
https://www.fenet.jp/dotnet/column/environment/5400/

記事によっては現行と違うものがある。
とりあえず、現状はここの通りやれば大丈夫。

テーマ変更

テーマ自体元々複数入ってるけど、これも拡張機能から増やせる。

VSCodeThemes — Preview Visual Studio Code Themes.
https://vscodethemes.com/

WEBサイト上から直接VSCodeに反映するから導入簡単。

軽く触ってみて

大したことしてないけど起動の時点で既にDWよりも軽快な感じがある。
ファイル内のリンクからCSSとかJSとかの外部ファイルを展開できるし、プレビューはファイルを直接ブラウザに読ませてるからエディタからのどうのこうのは使ってないし、Emmet使えるし、CSSとかで候補出てくれるし、これが無料って出来すぎだなと思った。

コーダーはこれで十分じゃないのか。
アカウント作成もログインも求められなかったからめっちゃ手間がない。

ショートカット周りは面倒かも。
DWの場合EmmetとDWそれぞれのやつをまぜこぜで使ってて、何が使えて何が使えないかがわからない。

インデントは元の書式に倣うっぽい。Tabで作ってあるデータは自動的なインデントはTabで追加されてる。

HTMLを新規作成する

DWでは新規作成でフォーマットを選んだとき、それに沿った宣言とかが予め記載された状態で始まる。VSCodeは新規作成したらまっさらなものが表示されるだけ。保存するまでファイル形式は確定しないって感じになってる。

「Ctrl + N」で新規作成する
html形式（phpも可）で保存する
「！」を入力する
「Emmet Abbreviation」とかが表示されるのを確認する
「Tab」もしくは「Enter」を入力する
出る

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

viewportが入ってるのが地味に嬉しい。

lang=”en”は変えないとだわ。
「settings.json」でいじる。

コマンドパレット表示（Ctrl+Shift+P）して、「settings.json」と入力、Enterを押す。

{
    "workbench.colorTheme": "Minone"
}

こうなってるのを

{
    "workbench.colorTheme": "Minone",
    "emmet.variables": {
        "lang": "ja"
      },
}

こうする。
追記の際、手前の内容の最後に「,」がついてなければつけること。

保存したらそのまま反映されるので、また「!」からの表示を試す。

Emmetのショートカット周りについて

チートシートを覚えたらとりあえず大丈夫って感じね。
https://docs.emmet.io/cheat-sheet/

DWの「Ctrl+D」とか「Shift+Enter」とか便利だったんだけどなぁ。
決別しなきゃいけないですね。

どうしても使いたいならショートカットを登録する必要がある。
https://qiita.com/ASA3lN/items/b1dbd8e2d7681c2264b7

置換について

割と頻繁に使うので欠かせない。
「Ctrl + H」で置換ウィンドウが開く。

検索と置換 - Visual Studio Code - [SMART]

ファイル内検索 Visual Studio Codeはテキスト検索の際に、その範囲をファイル内、選択テキスト内

ウィンドウがとでもなくシンプルで、アイコンで完結されてるので何があるのか、どれが何なのかはカーソルを合わせて説明文表示させて確認する必要がある。