[Web開発]コーディング環境づくりのメモ

# 初めに
最近ページやコンポーネントの練習をしながら、快適なコーディング環境づくりが大事だと思い、今の時点でよく使うものやショートカットなどをメモしたいです。

# Personal Computing Environment
OS: Windows 10 Home
Editor/Terminal: Visual Studio Code 1.73
(Terminal: git-bash 2.35.1.windows.2)
Tool: Node.js v18.0.0

# Memo
今使っている`VS Code`の拡張機能をまとめてみました。
- **Spelling & Icon/Layout theme**
    - Code Spell Checker
    - vscode-icons
    - Atom One Dark Theme

- **Formatter & Intellisense**
    - ESLint
    - Prettier
    - HTML CSS Support
    - Auto Rename Tag

- **Development**
    - Code runner
    - Live server

- **Git (optional)**
    - GitLens

- **Others (optional)**
    - TODO Highlight
    - TODO Tree
    - Polacode-2022
    - Better Comments

- **Settings Sync**

# Spelling & Icon theme
- `Code Spell Checker`
自動に単語のチェックしたり、間違えた単語の下に線を引いて表示する。重宝しています。

- `vscode-icons`
識別子によってアイコンが変わってきます。かっこうよくてたくさんの種類があります。もちろん `Material Icon Theme` のアイコンも魅力的だと思いますが、個人的にシンプルのほうが好きなのでこちらを使っています。

- `Atom One Dark Theme`
これも個人的におススメです。ライトモードだと目が疲れやすくていつも作業台をダークモードしてます。ワードの色付けがかっこよくて作業する気分も上がりますね。

# Formatter & Intellisense
コードの整形や自動コード補完系の拡張機能です。開発環境では一番コアな部分です。
## Emmet in VS Code
- `Emmet`
まずは省略記述の`Emmet`です。`Emmet`は拡張機能ではなく標準機能ですが、コードの整形や補完とよく使うので一緒に紹介したいと思います。これらウェブ開発では使う頻度が 100％ とも言えるでしょう。

`HTML`、`CSS`、`XSL`のチートシーツはこちらです。

https://docs.emmet.io/cheat-sheet/

最初のうちにこれを意識しながらコード書くと法則性が分かればすぐに使いこなせると思います。

## Formatter
- `ESLint`
コーディングスタイルの規約（例えばセミコロンが必要など）のチェックツールです。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

- `Prettier`
コード自動整形でよく使うツールです。`tab`でのスペース数や行間では最大文字数の指定、そしてペストやセーブすることで自動整形してくれる設定ができます。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

コーディングスタイルについて前の文章では少しまとめてみましたので、ご参考になれば幸いです。

https://qiita.com/hu-yu/items/07d82d5e87ee08e2ded9

## Intellisense
自動補完系のツールはいくつを用いています。

- `HTML CSS Support`

https://www.youtube.com/watch?v=Cb3PjfD90wQ

こちら紹介映像のように、参照しているパス（例えば`CSS`）から近い単語の候補を出してくれます。自分には一番便利だと実感できたのは、`Bootstrap`など既定の`CSS`単語から候補が出て、ドキュメントから探す手間を省けるようになりました。

- `Auto Rename Tag`
ペアとなるの`HTML`タグ名を変更するとき自動的に変更できます。


# Development
- `Code runner`
名前通り即座にコード実行できる拡張機能です。
ショートカットは`Ctrl + Alt + N`実行開始／`Ctrl + Alt + M`終了／`Ctrl + Alt + J`実行言語を選択する。
一部のコードをハイライトして選択された部分だけ実行するのもできます。（選択範囲内ほかの変数が使われれば、変数宣告など参照先も選択しないと`ReferenceError`になります。）

- `Live server`
ウェブ開発ではいつも使う拡張機能です。これがないと困るというほど重要です。ファイルが変更し保存するとページに即時更新し反映される。`Node.js`などでも同じ機能できますがリフレッシュが不要で手間を省けます。

# Git (optional)
ソース管理（バージョン管理）はとても大事だと思います。自分は一か月前`Qiita`で書いた文章は内容もうそれほど覚えてなく、コードを書く当時どういう考えで書いたのかすべてが頭に留めるわけがない、と思います。ソース管理は自分も他人の書いたコードの流れが管理でき、変更の履歴やメッセージも追跡できる。

後ろに`optional`って書いたのは`Git`の使用は様々ですし、ローカルとリモート別々管理するのも聞いたことがあります。自分は`git-bash`から`GitLens`へ移行中なので、あまり語れることがないと思います...。

- `GitLens`
とても強大でパワフルな`Git GUI`です。コミット、差分、誰か、いつ、何を書いたのをファイル内提示したり、いろいろと可視化するツールです。`SourceTree`みたいな可視化`Branch Tree`をあり、本当に何もかも便利だと思いますが`CUI`から移行したばかりのでまだ慣れてないです。
（シンプルが好きなので`Git History`を使うのもいいと、これから使い比べながら自分にあうツールを見つけたいと思います。）

# Others (optional)
作業を効率化するためにやはり優先順位を明確にして確実に進めるのがいいですね。

- `TODO Highlight`
名前通りです。`TODO:`や`FIXME:`はすでに組み込んでいるが、ほかのキーワードやカスタムの配置ができます。
OS が`Windows`なら`Ctrl + ,`で`Settings`画面へ、下の参考文章のように書けばいいです。（**`User`:グローバル、`Workspace`：ローカル**）

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

https://qiita.com/__mick/items/e146979e797e9a433768

ショートカットを設置するなら、`Ctrl + S + K`で一度`Keyboard Shortcuts`の`Keybinding`を確認して衝突しないキーを設置するほうがいいと思います。

自分は導入するプラグインなども一緒に一覧表示される（例えば`Bootstrap`に大量の`TODO:`が残されてる）のがちょっと苦手意識なので`TODO Highlight`のコマンドではなく、`TODO Tree`と合わせてアイコン表示とパスを使っています。

- `TODO Tree`
デフォルトタグは`TODO`や`FIXME`がありますが、同じく`setting.json`で設定の追加や上書きができます。

下は`VS Code`が提供するアイコンです。

https://code.visualstudio.com/api/references/icons-in-labels

ガターアイコンの表示は出てこないのが`Octicons`ではないかもしれません。

>gutterIcon - set to true to show the icon in the editor gutter.
Note: Unfortunately, only octicons and the todo-tree icon can be displayed in the gutter.

https://github.com/Gruntfuggly/todo-tree#readme

自分のセッティングで`TODO Highlight`と一緒に設置した`setting.json`はこんな感じです。
```json: setting.json
{
  "todohighlight.defaultStyle": {
    "color": "#B0C4DE",
    "backgroundColor": "grey",
    "isWholeLine": false
  },
  "todohighlight.keywords": [
    {
      "text": "TODO:",
      "color": "black",
      "backgroundColor": "#FFD700"
    },
    {
      "text": "FIXME:",
      "color": "black",
      "backgroundColor": "#F08080"
    },
    {
      "text": "DEBUG:",
      "color": "black",
      "backgroundColor": "#F08080"
    },
  ],
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "DEBUG",
  ],
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "checklist",
      "iconColour": "#32CD32",
      "type": "line"
    },
    "FIXME": {
      "foreground": "#000000",
      "iconColour": "#FFFF00",
      "gutterIcon": true
    },
    "DEBUG": {
      "icon": "bug",
      "foreground": "#000000",
      "iconColour": "#F08080"
    },
  }
}
```

![todotree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2477698/ed76e2a3-a730-2944-25ea-ae78c0025ebf.png)

フィルタ使えばさらに綺麗に表示してくれます。

- `Polacode-2022`
`Polacode`の新しいバージョンです。コピペだけで画像が生成され保存できます。

https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019

- `Better Comments`
コメントの先頭文字により色付けしてくれる拡張機能です。シンプルイズベスト。

# Settings Sync
複数の端末間で同期する拡張機能です。今まで書いてきた`settings.json`の設置実は今いるパソコン環境しか適用しません。せっかくやり込んでたのにほかの端末で作業するならまた設定し直す、と考えるとやめたくなりますよね。`Settings Sync`は`Git`と`MS`と連携しているので、バージョン管理と同じ概念で今のセッティングをリモートで管理すればどのローカル環境（端末）でもセッティングをダウンロードすればすぐ作業に進めます。

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

https://code.visualstudio.com/docs/editor/settings-sync

`MS`アカウントお持ちでしたら`MS`を選んでもいいと思いますが、自分は`Git`使う頻度が高いので`Git`でこの拡張機能と連携しています。

https://qiita.com/tomokei5634/items/7a1978e5a140effa5782

```
1. Upload Key : Shift + Alt + U
2. Download Key : Shift + Alt + D

(on macOS: Shift + Option + U / Shift + Option + D)
```

全体使用の流れとしては、
`Ctrl + ,`で`Settings`画面を呼び出し、
セッティングを弄りたいアプリケーションの名前を検索、
`User`（グローバルのほう）`settings.json`を書き終わったら保存、
左下のプロフィールアイコンから`Settings Sync`を起動し、
同期終わったら`git gists`画面へ`Visual Studio Code Settings Sync Gist`をチェック、
最新のバージョンではなければ`VS Code`に戻り`Shift + Alt + U`アップロードし、
問題なければほかの端末で`Shift + Alt + D`でセッティングをダウンロードする。

作業環境を整えば効率が上がり気分もよくなりますね。心身の負担を減らせば余裕ができて、作業や勉強も楽しくなると思います。

# VS code tricks

とても便利なショートカットキーは、こちらの方の文章で取りまとめられています。

https://qiita.com/12345/items/64f4372fbca041e949d0

`VS Code`のショートカットキーは便利だけど慣れるまで時間がかかり、使わないとすぐ忘れてしまうのでいつもこの方の文章を読み返しています。そしてここでは自分のよく使うショートカットキーをいくつピックアップしてまとめてみたいと思います。

## Editor Layout
作業台画面を分割することです。
`View`→`Editor Layout`で好きな構成を選んだり、ショートカット`Ctrl + \`で必要に応じて右に画面分割するのもいいと思います。

自分の画面はこんな感じですが...。
![vscodetrickdemo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2477698/31526570-5b65-f460-e549-52b7d5d70f41.png)
デモとして最近やっている`side project`の練習を取り上げてみました。
左右分割で構造や構成など照らし合わせることができて、コード変更するたび一番右の`Live Server`ですぐ変化してくれます。
テスティングがしたくなったら`Ctrl + Alt + N`で`Code Runner`を呼び出したり、`VS Code`一番下のアウトプットで結果を読みます。
全体のテスティングが見たいなら、`DevTools`のコンソールを読んだりします。大体こんな感じですね。

## Move
マウスを使わず行間の移動のことです。

`ctrl + ↑(up)/↓(down)`：画面を上の行／下の行へ移動する。
`Alt + ↑(up)/↓(down)`：コードブロックを上／下へ移動する。

`Alt + pointer`：（マウスと合わせて）複数行にポインターで入力位置を指定したりする。

## Run/OUTPUT
`Ctrl + Alt + N`：`Code runner`を呼び出す。
`Ctrl + J`：パネルを呼び出す。

## Bar
`Menu Bar`、`Activity Bar`、`Status Bar`などすべてのバーは`View`→`Appearence`で設置できる。デフォルトではショートカットキーがないそうです。

## duplicate
`Shift + Alt + ↑(up)/↓(down)`：ポインタの止まる行、あるいはハイライトされた部分を、上／下へコピペする。

`Shift + home`：ポインタの止まるところから行頭までハイライトする。
`Shift + ↑`：ポインタの止まるところから上の行までハイライトする。
（指定行の行末から`Shift + home`→`Shift + ↑`でハイライトするのがよく使う。）

## Search/Replace
`Ctrl + Shift + H`：グローバルサーチと置き換え。
`Ctrl + H`：ローカルサーチと置き換え。

## Find the same word
`Ctrl + D`→`Ctrl + D`：ポイントの止まるところから指定された単語と、同じ単語の次へ移動し複数選択する。
`Ctrl + D`→`Ctrl + Shift + L`：指定単語を一括して選択する。

## Find the definition
変数に`右クリック`→`Go to Definition`／`Ctrl + 左クリック`：変数の宣言のところへ移動する。

# Lorem
`Lorem`とはダミーテキストのことです。
ここからよく使うリソースも一緒に紹介したいと思います。

## Text

https://www.lipsum.com/

サイトからコピペするのもいいと思いますが、`VS Code`では`Emmet`からダミーテキストを生成することもできる。

`lorem`：ダミーテキストを作る。
`lorem + number`：指定した単語数のダミーテキストを作る。
実際こんな感じ↓で使ってます。
```html: example
<!-- lorem10 -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum, nobis.

<!-- p*4>lorem10 -->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, fugit!</p>
<p>Reprehenderit vel odit maxime eveniet consequatur asperiores possimus nobis explicabo!</p>
<p>Nihil explicabo laudantium quasi maxime, minima id repellendus est ea!</p>
<p>Saepe harum perspiciatis iste possimus impedit facere quos modi cupiditate!</p>

```

## Picture
ページ作りの練習でいつも思うけど、フリー素材の画像を見つけるには時間かかり過ぎます。。

https://picsum.photos/

`https://picsum.photos/width/height`：

これを使えば指定されたサイズのダミー画像を適当にはめ込んでくれます。
（これで後で画像を見つける作業に集中できますね。）

```html: example
 <img src="https://picsum.photos/150/100" alt="Lorem Picsum">
```

# Icons & Fonts
ページのアイコン装飾ってすごく楽しいと思います。
ここでは主に`CDN`のほうを紹介したいと思います。

https://icons.getbootstrap.com/

自分の中で一番使い勝手がいいのは`Bootstrap Icons`です。
アイコン数はそこそこだけど基本コンテンツを網羅していると思います。

https://fontawesome.com/icons

アイコン数ががダントツの一位、基本サービスでは毎月の`Kits`が 1 万という制限がかけられています。

https://fonts.google.com/icons

最近よく使う`Google Icons`です。このシンプルさがとても好きです。
（ずっと`Google Fonts`が使ってるのに、もっと早く気づけばよかったな...。）

（一つ個人的な考えですが、違う領域の複数`CDN`にアクセスするというのは、ある意味サーバーに負担をかけるのではないかと。（もちろんファイルの読み込みより早かったけれど。）例えば`Bootstrap`ベースで作るサイトならアイコンも`Bootstrap Icons`一緒にしたり、あるいは`Google Fonts`だと`Google Icons`と合わせて使えばコンテンツ配信も早くなるのでしょうかな。`CDN`の仕組みはよく分からないけど、とりあえずこれもメモにしようと。）

## Practices
少しだけ無料で一通り練習できるサイトを紹介したいと思います。

https://www.w3schools.com/howto/default.asp

`Bootstrap`のコンポーネントがどうして、どうやってそんな構成になったのでしょうか。
`Functional CSS`概念の`Utilities`中心とした概念の`CSS class`を使う前に、もっと気になるのは`HTML`の構造です。（画面と`JS`、両方が直結している部分なので。）
前から`W3C`のサイトで勉強と練習してきましたが、こんなにいい模写練習ができるところもあるとは...知るのが遅かったです...！
なのでまだ知らない方にはぜひ一度行ってみてください、たくさんヒントがもらえると思います！