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 ファイルを直接編集する場合は下記を追記。

  1. "emmet.variables": {
  2.   "lang": "ja"
  3. }

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 を開き、下記を追記。

  1. // Highlight Matching Tag の設定
  2. "highlight-matching-tag.styles": {
  3.   "opening": {
  4.     "full": {
  5.       "custom": {
  6.         "borderWidth": "0 0 2px 0",
  7.         "borderStyle": "dotted",
  8.         "borderColor": "#ffffcc"
  9.       }
  10.     }
  11.   }
  12. }

Prettier の設定

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

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

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

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

  1. "editor.formatOnSave": true

Prettier で HTML ファイルを整形させると<br>等の空タグに / が入ってしまうので HTML 用のフォーマッタを 「HTML 言語機能 vscode.html-language-features」 に変更する。


まず html ファイルを開いて右クリック → 「ドキュメントのフォーマット...」をクリック。
「既定のフォーマッタを構成...」をクリック → 「HTML 言語機能」をクリック。


scss 用のフォーマッタも変更したい人は scss ファイルを開いて上記と同様の手順で「CSS 言語機能」に変更。


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

  1. "[html]": {
  2.   "editor.defaultFormatter": "vscode.html-language-features"
  3. },
  4. "[scss]": {
  5.   "editor.defaultFormatter": "vscode.css-language-features"
  6. }

カーソルの変更

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

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

設定動画

コメントを残す

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