Atom の HTML リアルタイム プレビューの実装方法に関する簡単な説明

この記事では、Atomエディターが HTML リアルタイム プレビューを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: 「atom チュートリアル」

基本的な実装:

ショートカット キー

編集ボックスでCtrl Shift Mを押して、ネイティブ プレビューを開きます。 (CSS スタイルなし)

プラグインの実装: atom-html-preview

[ファイル]、[設定]、[インストール] の順にクリックします。 > ; atom-html-preview を検索 ->ダウンロード
編集ボックスでCtrl Shift Hを押してプレビュー パネルを開きます (CSS スタイル)

廃止されました必要です ショートカット キーを変更する必要があることは前にオンラインで説明されました

プラグインの実装: Dev Live Reload

Callingショートカット キー:CTRL SHIFT ALT R

は少し高度です。

を開きます。ブラウザでのプラグイン実装: brower-plus

Atom でブラウザを開きます

##プラグイン実装: atom-live-server

Atom の外部でブラウザを開きます

そこにありますショートカット キーが多く、デフォルトのキーと競合する可能性があります。次の記事はショートカット キーの変更について説明します。

IIS に参加する

理解できない場合は、百度百科 https://baike.baidu.com/item/ を確認してください。 iis/99720?fr =aladdin

Atom IE では、IIS Web サイトのディレクトリ内のファイルをリアルタイムで編集し、書き込み後に更新するだけです。
Chrome を使用している場合は、LivePage プラグインをインストールしてページを自動的に更新できます。

プラグインの実装: livereload

livereload プラグインを実行するための gulp タスクを作成します。これは http として設定する必要があります。 。

Gulp を知らない場合は、https://www.gulpjs.com.cn/

を使用する方法は他にもたくさんあります。ブラウザ同期

ブラウザ同期開始 --server -files "
/.html,/.css"は「最後に、atom の選択を検討しているので、最後まで試してください。特定の IDE の操作を習得するのにかかる時間コストは非常に高いので、中途半端に考えないでください。」

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上がAtom の HTML リアルタイム プレビューの実装方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。