More than 5 years have passed since last update.

Bracketsでライブプレビューが動作しない

Posted at 2019-09-26

この記事の要旨

Bracketsを使っていて、ライブプレビューが動作しないという事案が幾度となく発生しました。
色々調べて解決したので、同じことでつまずく人がいないように記事にしておきます。（こんな初歩的な事でつまずくのは私だけだ、なんて話は気にしない方向で）

記事に誤りがあれば、コメント下さい。

Chromeとの連携がうまくいっていない

Bracketsをctrl + F5,F5で読み込みなおす。

その後もう一度ライブプレビューを起動

シンタックスエラーが発生している

シンタックスエラーとは

文法的な間違いです。下記のような例が挙げられます。

example.html

<!-- 正 -->
<a href=“http://example.com#1”>URL</a>

<!-- 誤 -->
<a href=“http://example.com”#1>URL</a>

<!-- ""の中に#1が入ってないのが誤り -->

他にも、誤字のせいでシンタックスエラーになることもあります。
大体は何てことないミスなので、かえって見つけづらいです。

シンタックスエラーを探してなくす。

＊ただし、探すのは大変です。後述の拡張機能を入れることをお勧めします。

拡張機能　：　Interactive Linter　を導入する

この拡張機能はシンタックスエラーを見つけてくれます。

導入方法はこちらから(ほかにも便利な拡張機能が紹介されています)↓