参考動画

「iSara」模写コーディング

Webデザイナー HIRO さんによる模写コーディング動画です。

#02「iSara」模写コーディング / HTML CSS

#03「iSara」模写コーディング / HTML CSS

HIROさんおすすめ VSCode プラグインのインストール

VSCode のダウンロードはこちら。

HIROさんおすすめ VSCode プラグインはこちら。

「Japanese Language Pack for Visual Studio Code」をインストールし、下に表示される「Change Language and Restart」ボタンを押せば日本語表示に。

(View → Command Palette…) または(Ctrl + Shift + P)でコマンド パレットを表示させ → 検索窓に 「display」と入力 → 「Configure Display Language」をクリック → 「日本語 (ja)」 をクリック → 「Restart」ボタンをクリックでもいい。

Emmet の設定

(ファイル(F) → ユーザー設定 → 設定)または(左下の歯車マーク → 設定)若しくは(Ctrl + ,)→ 検索窓に 「emmet variables」 と入力
「ワークスペース」ではなく「ユーザー」が選択されているのを確認して
Emmet: Variables の「項目の追加」をクリック → 項目 lang の値 en を jp に変更して OK

settings.json ファイルを直接編集する場合は下記を追記。

"emmet.variables": {
"lang": "ja"
}

Live Sass Compiler の出力先設定

設定(Ctrl + ,)→ 検索窓に 「sass formats」 と入力
「ワークスペース」ではなく「ユーザー」が選択されているのを確認して
「Live Sass Compile > Settings: Formats 」の 「settings.json で編集」をクリック

下記を参考に settings.json ファイルを書き換える。

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",         // 出力フォーマット
    "extensionName": ".css",      // 出力ファイルの拡張子
    "savePath": "~/../public/css" // 出力先
  },
]

savePathの指定は最後に/を付けてはいけない。
また、相対パスを使用する時は先頭に~/を付ける。
最後に(ファイル(F) → 保存)または(Ctrl + S)で保存。

Highlight Matching Tag の設定

設定(Ctrl + ,)を表示させ
「ワークスペース」ではなく「ユーザー」が選択されているのを確認して
右上のアイコンで settings.json を開き、下記を追記。

// Highlight Matching Tag の設定
"highlight-matching-tag.styles": {
  "opening": {
    "full": {
      "custom": {
        "borderWidth": "0 0 2px 0",
        "borderStyle": "dotted",
        "borderColor": "#ffffcc"
      }
    }
  }
}

Prettier の設定

設定(Ctrl + ,)→ 検索窓に 「default formatter」 と入力
「ワークスペース」ではなく「ユーザー」が選択されているのを確認して
「Editor: Default Formatter」 を 「Prettier – Code formatter」にする。

settings.json ファイルを直接編集する場合は下記を追記。

"editor.defaultFormatter": "esbenp.prettier-vscode"

ファイルを保存時に自動整形させる為に settings.json に下記を追記。

"editor.formatOnSave": true

Prettier で HTML ファイルを整形させると<br>等の空タグに / が入ってしまうので HTML 用のフォーマッタを 「HTML 言語機能 vscode.html-language-features」 に変更する。
まず html ファイルを開いて右クリック → 「ドキュメントのフォーマット…」をクリック。
「既定のフォーマッタを構成…」をクリック → 「HTML 言語機能」をクリック。
scss 用のフォーマッタも変更したい人は scss ファイルを開いて上記と同様の手順で「CSS 言語機能」に変更。
settings.json ファイルを直接編集する場合は下記を追記。

"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"[scss]": {
  "editor.defaultFormatter": "vscode.css-language-features"
}

カーソルの変更

設定(Ctrl + ,)を表示させ
「ワークスペース」ではなく「ユーザー」が選択されているのを確認して
右上のアイコンで settings.json を開き、下記を追加。

"workbench.colorCustomizations": {
  "editorCursor.foreground": "#ffff00" // カーソル色
},
"editor.cursorBlinking": "expand"      // カーソル点滅方法

設定動画


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です