前提
- プログラミング初学者が、HTMLとCSSの学習をするにあたって行った環境構築の手順の覚書です。
- 使用しているpcはMacBook Air(2020)
- macOS Monterey(ver.12.2.1)です。
実際にすること
- テキストエディタ(VSCode)のインストール
- テキストエディタの拡張機能の導入
- テキストエディタを日本語化
- HTML/CSSの自動補完機能を追加
そもそもテキストエディタとは？
-
プログラミング学習を始めるにあたって、当たり前のようにテキストエディタをインストールするよう指示されますが、これはそもそも何なのか？本当に必要なのか？と言うところです。
-
テキストエディタとは、文章を作成・編集するためのソフトウェアを指します。
開発を行なって行く際にこちらを使用してコードを記述して行くものです。
種類も様々で文書を作成するのに適したもの、メモをとるのに適したもの、今回インストールするVSCodeのようにコードを書くのに適したものなどがあります。
他にも少し調べてみただけで、Atom、Vim、Sublime、Text3、秀丸エディタ、サクラエディタなどたくさんの種類がありました。
いざインストール
- テキストエディタについてなんとなく分かったようなわからないような…ですが、インストールしないことには何も始まらなさそうなのでとりあえずインストールしてみます。
- ダウンロードページを開いてダウンロードボタンをクリック。
https://code.visualstudio.com/ - インストールできたらDockに追加しておきましょう。
使用言語を設定する
-
標準の言語設定は当然のごとく英語ですので、日本語に設定しなおします。
-
スクリーンショットは既に日本語化してあるものです、分かりづらくてすみません。
↓以下手順↓ -
起動したウィンドウ画面左側の、アイコンメニュー内にある四角が四つ集まっているアイコンをクリック
-
左上の「Search Extensions in Marketplace」に「Japanese Language Pack for Visual Studio Code」と入力
-
Japanese Language Pack for Visual Studio Codeを選択し、install（またはインストール）をクリックする(画像では既にインストール済みの為アンインストールになっています。)
-
再起動したら、完了！
HTML/CSSの自動補完機能を追加する
- 先ほど同様検索欄に「HTML Snippets」と入力
- インストール
- 画像のように「アンインストール」と表示されていれば完了！
終了
お疲れ様でした。
pcをアップデートしたら設定が全て吹き飛んで泣きそうになったので、今後のための備忘録として記録してみました。