[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のチートシーツはこちらです。

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

Formatter

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

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

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

Intellisense

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

• HTML CSS Support

こちら紹介映像のように、参照しているパス（例えば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：ローカル）

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

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

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

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

ガターアイコンの表示は出てこないのが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.

自分のセッティングでTODO Highlightと一緒に設置したsetting.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"
    },
  }
}

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

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

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

Settings Sync

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

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

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

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

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

Editor Layout

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

自分の画面はこんな感じですが...。

デモとして最近やっている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

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

lorem：ダミーテキストを作る。
lorem + number：指定した単語数のダミーテキストを作る。
実際こんな感じ↓で使ってます。

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/width/height：

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

example

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

Icons & Fonts

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

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

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

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

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

Practices

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

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