公開日: 2015/08/28 | 更新日: 2017/05/29.
VSCode.
Webコーダーのわたしが普段利用しているVSCodeでの「設定」と「ショートカット」、「拡張機能」についてまとめました。 使ってないものがあれば積極的に取り入れていきましょう! 画面レイアウトの基本 個人的に基本としている画面レイアウトがこちらです。 Visual Studio CodeでHTMLを整形するには「Shift+Alt+F」キーを押します。 範囲を選択している場合は選択範囲を、選択していない場合はコード全体を整形します。 次のようなコードに対して、
Word(ワード)で理解しやすい文書を作成するには、読み手が意味を把握しやすいように体裁(レイアウト)を整えることが大切です。その際に活用できる機能として、「インデント」「タブ」「ページ区切り」の使い方を覚えておきましょう。 VSCodeは、最強のエディタ 自分は、過去に Dreamweaver → Brackets → Atom と使っていたのですが、昨年「Visual Studio Code」(以下、VSCode)に乗り換えた経緯があります。 使用環境 Mac※Winの方は「Cmd」を「Ctl」に変更してください。 おすすめ拡張機能 ... インデントの階層レベルを、背景色の違いを使ってわかりやすくします。 名前の通りデフォルト設定ではレインボーですが、ユーザ設定にて色・透明度・パターン数を変更可能 … htmlコードに適切なインデントと改行を付けて、確認しやすく整形するサービスです。ソースコードの整理、分析などにご利用下さい。 変換 Visual Studio Codeを起動して、左側の拡張機能アイコンをクリック > 検索フォームに「Live HTML Previewer」を入力 > インストールボタンをクリックします。 緑のインストールボタンが「有効になりました」と表示されたらOKです。 VSCode で "保存時に整形" を有効化する まずは Visual Studio Code を起動。 起動したら、Visual Studio Code のメニューから、[File]-[Preferences]-[User Settings] を選択。
htmlのコード整形ツール.