タグ: VS Code

VS Codeのデフォルトでは、HTML JSのフォーマッターは、入っているようです。
その他の言語には、各言語に対応したフォーマッターを追加してあげないといけません。

以下に追加したフォーマッターをメモとして、残しておきます。

• JS：Prettier
• PHP：PHP Intelephense
• Markdown：markdownlint

適宜、追記します。

Autoprefixer

VS CodeのAutoSaveをafterDelayで使用する場合、AutoprefixerのFormat On Saveにすると保存される度にカーソルが末尾に移動してしまい不便なので、Autoprefixerは、手動でコマンドパレット（shift + command + P）から使います。
SassのコンパイラーをEasy Sassではなく、Autoprefix機能のあるLive Sass Compileにするのも手かもしれません。

Work Space

VS CodeのWork Spaceには、編集するDirを直接設定する。複数ある場合、個々のDirを指定する。

EassySassの出力先

親のDirを指定するとEassySassの出力先が指定のパスと合わないのでエラーになってしまう。

EasySass出力先：sass/css（workspaceに指定されたDir/sass/cssに出力）

パネルの出し方

command + J

VS CodeでMarkdownのプレビュー

サイドバイサイドにプレビューを表示

［Command］＋［K］→［V］

同一エディタに別タブとしてプレビューを表示

［Shift］＋［Command］＋［V］

エンコーディングを指定して表示する

開いたファイルで文字化けが発生していたら、画面下部にあるステータスバー右側にエンコーディング情報が表示されているので、クリックする。
画面上部に［アクションの選択］から［エンコード付きで再度開く］をクリック、エンコードを選択して再度開く。

随時追記

VS Codeにプラグインmarkdownlintを入れました。
同じ見出しをつけるとこのルールにより注意を受けてしまいます。

でも、複数の親見出しの中に同じ名前の子見出しをつけたいこともあると思います。
こんな場合。

# 果物
    ## みかん
        ### 色
        ### 個数
    ## りんご
        ### 色
        ### 個数

このケースですと、色と個数に警告が出ます。
同じ名前を付けられない訳ではないのですが、警告の対象になって、気持ちが悪いです。

この警告を回避するためには、VS Codeのsetting.jsonに以下を設定します。

"markdownlint.config": {
    "MD024": {
        "siblings_only": true
    }
}