背景画像

VScodeで静的サイトを作るためのおすすめプラグイン6選

2019年 8月 15日  2019年 8月 20日

VScodeで静的サイトを作るためのおすすめプラグイン6選

VSCodeで静的サイトジェネレーター用のmarkdownを書くのに便利なプラグインを紹介します。

VSCodeのプラグインは、結構かゆい所に手が届いて便利です。

VScodeで静的サイトを作るためのおすすめプラグイン6選

めんどいので一気に紹介です。

おすすめプラグイン5選

EvilInspector全角空白検知(大事)

Beautify:整形markdownにhtmlを埋め込んでいるときに重宝します

Path Intellisense:パスの補完。工夫は必要ですが・・・

Japanese Word Handler:日本語の単語ごとにカーソル移動できる便利

HTML Snippets:HTML補完ですが、ショートコードを書くときに重宝します

Hugo Snippets:Hugoのよく使う構文を補完してくれます

それぞれ詳しく見ていきますね。

VSCodeでのプラグインインストール方法

大丈夫だと思いますが、書いておきます。

VSCodeの左側のメニューからプラグインを選択します

導入したいプラグインを検索し、installを押します。

基本的に再起動なしで作用しますよ!

EvilInspector

全角スペースを強調して表示してくれます。

Hugoは結構デリケートですので、全角スペースがトラップになってエラーになることも多々あります。

ってか日本のエンジニアなら何かしらこの辺入れてるでしょ!

Beautify

Brackets(エディタ)時代から愛用しているフォーマッターです。

HTMLの整形なら一番使いやすいんじゃないかな?

markdownでもなんだろうと強制的にHTMLのフォーマットを掛けられます

ctrlshiftpを押して

Beautifyを選択します。フォーマットを聞かれるので、HTMLを選択してください。

HTMLを大量に含むmarkdownでもきっちり整形してくれます。

これでドキュメントが煩雑にならずにすみますね!

Path Intellisense

静的ジェネレーターはWordPressと違ってドラックドロップで画像を入れたりすることができない物がほとんどです。

htmlにパスを入れて画像を表示する必要があります。

そんなときに便利なのが、パスの補完プラグインです。

(ある程度は加工する必要があるんですけどね・・・)

画像を入れる場合はこんな感じで、staticフォルダから追うことができます。

(Hugoの場合は、

ビルド後のパスに変換してくれるショードコードを作成して、ビルド後のパスで書くことになります。

つまり、/staticを消してください)

Japanese Word Handler

使ってみればわかります。コードを書く方なら経験があると思いますが、

ctrl←→

を入力すると、単語ごとにカーソルが飛んで行きます。

それを日本語で再現したプラグインです。

ちょっと言い回し変えようかな♪っておもったときに重宝します。

また、shiftと組み合わせれば、単語を選択できるので、これまた使いやすいです

結構気に入っています。

HTML Snippets

え、語る?

htmlタグを予測して選択肢として出してくれます。

ファイル名がhtmlになっていれば作用するので、

markdownファイルをの拡張子を一時的にhtmlに変えて上げれば使うことができますよ。

装飾の多いサイトを作成するときに重宝します。

ってか日本のサイトの場合、装飾こだわって無いとなかなか読まれない・・・

Hugo Snippets

Hugoのテーマを作るときに重宝します(拡張子がhtmlのときに使えます)。

よく使う構文が一気に出るので、かなりストレスが軽減されますね。

例えば「h-if」と打つと以下のようにしてくれます。

どうです?便利じゃありません?

{{ if .Params.keywords }}
    
{{ end }}

サイト作るくらいならほぼIF文だけで完結するしね

まとめ

markdownで100ページくらいサイトを作っている中で、便利だと思う機能をまとめてみました!

「こんなのもあるよ♪」ってのがあれば教えていただけると幸いです。