# Console について

## VSCode のプラグインについて

これらのプラグインをインストールしてください：

- johnsoncodehk.volar
- esbenp.prettier-vscode
- syler.sass-indented

※注意:

1. **必ず**VSCode の拡張機能: _Volar_ をインストールし、有効にしてください。
2. VSCode の拡張機能: _Vetur_ がインストールされている場合、**必ず** _Vetur_ を無効にしてください。

## 環境構築

これらの components には Google Font の material icons を使用するものがあります。使用の際は head タグに以下の link タグを配置してください

```html
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
  rel="stylesheet"
/>
```

## 配色について

この components では以下のカスタムプロパティで共通のメインカラーなどを設定しているものがあります。
プロジェクトごとにメインカラーなどが決定した際は以下の記載に合わせた設定を行ってください:

- --q-primary : メインカラー
- --q-secondary : アクセントカラー（タブのバッジなどの色）
- --q-positive : その他必要な配色があった際
- --q-negative : キャンセルボタンなど否定的な場合
- --q-warning :エラー時の input の背景色(基本は赤)

ex) 以下のように設定してください(sass でも設定可)

```html
<style>
  :root {
    --q-primary: blue;
    --q-secondary: green;
  }
</style>
```

### Git hints

Github で消されているブランチをローカルから自動的に削除するコマンド。

```
git checkout dev
git fetch origin --prune
git branch --v | grep "\[gone\]" | awk '{print $1}' | xargs git branch -D
```