CBC 入門1# (VSCodeで環境構築) 攻略法

タップで読みたいところにジャンプします

CRI BOOT CAMPで初心者 から Webプログラマ を 目指そう。

いろいろ手を出しては挫折しまくっている「あまうが」。

そんな時にツイッターで流れてきたCRI BOOT CAMP

このサイトは、株式会社クリエイティブリソースインスティチュート( 略称CRI)が運営している無料オンラインプログラム学習サイトだよ。

このCRIは広告・Web制作プロダクション・デジタルソリューションを手掛けている会社。

スクールではない分、無料という嬉しい企画をしてくれている。

でも、ぶっちゃけ、 CRI BOOT CAMP ってちょっと難しい…。
たぶん説明してくれているのは熟練者の皆さん。
だから、初心者過ぎる疑問・質問ってたぶん思いもつかないはず…。
「あまうが」も初心者なので、調べたことをフィードバックする形で、 CRI BOOT CAMP の皆さんや の立勉強し始めた皆さんのお役に立てたらなぁと思って書いてるよ。

少しでも早く環境整えてコード書きたいよね!

Visual Studio Code のインストールしよう。

無事「Visual Studio Code(VSCode)」のインストールを済ませた皆さん、お疲れさまでした。

「あまうが」はドットインストールも齧っていたので、 VSCodeのインストールは終わってた。
この単元だけならユーザー登録をしなくても見られるので、 VSCodeのインストール で手こずっている人はドットインストールの「VSCodeエディタを用意しよう」を参考にやってみよう。

ちょ、待てよ!(木村拓哉風に読んでね。)
「Chrome」もダウンロード出来てねぇんだよ!という方は…。

同じくドットインストールの「Chromeブラウザを導入しよう」を見るといいと思うよ。

CBCで指定されている拡張機能を検証してみる。

これで皆さん無事にVSCodeを入れられたと思う。

CRI BOOT CAMP で 案内されている拡張機能は以下の通り。
VSCodeの検索窓で出てくるけど、最後にリンクを貼っておくよ。

参考文献:VisualStudio

Japanese Language Pack for VS Code日本語にする。これは絶対必要(英語に自信がない「あまうが」笑)
Auto Close Tag自動的にタグを閉じる。VS Code 1.16から組み込まれている。
(設定不要)
Auto Rename Tag自動的にタグの名前を変える。 VS Code 1.44から組み込まれている。
( 設定必要)
Bracket Pair Colorizer
Bracket Pair Colorizer2
()、{}等の色を変える。バージョンアップしてるみたいだよ。
Color Infocssの色に関するクイック情報を提供。後で必要になってくるかもしれないけど、「あまうが」は未導入。
Highlight Matching Tag対応するタグにハイライトする。もともと基本的なタグには対応しているようなので、「あまうが」は未導入。

うーん、教えてもらっているのに喧嘩を売っているようだ…。
ただ、拡張機能を入れるとソフトが重くなるような気がしてあまり入れたくないんだよね。
そのくせ楽しくなるような拡張機能もいくつかあって、それは慣れてきたら入れるかも…。

Code Spell Checkerスペルミスを検出してくれる。タイプミス多いから、たぶん助かる。
CSS PeekHTMLのidやclassへジャンプできる。クラスを探さなくていいから楽そう。
Color Highlight色をカラーコードの上に表示してくれる。デフォルトでもついているけど、こちら方が分かりやすい。

拡張機能を入れよう。

初心者
初心者

拡張機能を入れるということはわかった。
でもどこから入れるのかわからないんだよー。

拡張機能の画面を3つの方法で開く。

CBC(CRIBOOTCAMP)には記載がないけれど、開発が楽になる設定をしておこう。

1)「ファイル」→「ユーザー設定」→「拡張機能」

2)左下の「歯車マーク」→「拡張機能」

3)「ctrl」+「Shift」+「x」で設定画面を開く。←一番楽

拡張機能を探す。

拡張機能が見つかったらあとは「インストール」を押せば大丈夫。

参考:拡張機能の一覧をみてみよう。

どういうアイコンかわかっていた方が安心できると思うので、リンク張っておくね。
リンクの先は、日本語なので安心してたも!

Japanese Language Pack for VS Code

あわせて読みたい
Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace Extension for Visual Studio Code - Language pack extension for Japanese

Bracket Pair Colorizer2

あわせて読みたい
[Deprecated] Bracket Pair Colorizer 2 - Visual Studio Marketplace Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

Code Spell Checker

あわせて読みたい
Code Spell Checker - Visual Studio Marketplace Extension for Visual Studio Code - Spelling checker for source code

CSS Peek

あわせて読みたい
CSS Peek - Visual Studio Marketplace Extension for Visual Studio Code - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Color Highlight

あわせて読みたい
Color Highlight - Visual Studio Marketplace Extension for Visual Studio Code - Highlight web colors in your editor

VSCodeの設定を変更しよう。

拡張機能を入れなくても「設定」を変更するだけで使いやすくなることがあるよ。

おすすめ:設定を変更しよう。

CBC(CRIBOOTCAMP)には記載がないけれど、コードをかくのが楽になる設定をしておこう。
奥は深いみたいだけど、さらっと以下の項目だけ設定すればよさそう。

項目設定名規定値変更値説明
FilesAuto SaveoffafterDelayファイル編集後自動保存する。
EditorFont Side1416これはただ単に目が悪いから表示を大きくした。
Editor Font FamilyConsolas,’Courier New’,monospaceRicty Diminished全角の空白が入っていた時にしっかりわかるフォント(インストール必要)
Editor Tab Size42スペースの節約のため
EditorRender Whitespaceselectionallこれは好みかな?
Editor Word Wrapoffon長い行を折り返して表示
EditorLinkedEditing無効有効一方のタグを変えると対応するタグも自動的に変わる。
FIlesTrimTrailingWhitespace無効有効ファイルの保存時に末尾の空白をトリミングする。

設定画面を3つの方法で開く。

1)「ファイル」→「ユーザー設定」→「設定」

2)左下の「歯車マーク」→「設定」

3)「ctrl」+「,」で設定画面を開く。←一番楽

設定項目の探してみよう。

設定を変えても元に戻せる。

既定の値には、きちんとしるしがついているから安心だよ。

フォントをインストールしよう。

「Ricty Diminished」 を使うとこんな感じに全角空白がよくわかるよ。

ただ、以下のようにこのフォントを使うのは進めていない人もいる。

  • 標準機能で半角空白を表示可能。その印が無ければ全角空白。
    (一発でわかる方が嬉しい。)
  • 拡張機能で対応した方が良い。例)「ZENKAKU」

パット見て全角空白が分かる方がいいし、拡張機能は少ない方が良いのではないのかな…。
これの答えわからないけど。

フォントをダウンロードする。

「RictyDiminished」のダウンロードサイトはこちら。

ずいぶん古いフォントだけど、古かったら危険というものでもないので安心して使う。

種類があるけど、「Regular」を選ぶよ。

「Ricty Diminished」をGitHubから「RictyDiminished-Regular.ttf」をダウンロードするよ。

VSCodeの設定を変更しよう。

名前にスペルミスがあったりや全角空白になっていたりするとうまく表示されないよ。

これにて準備完了だよ。

記事を書くのに時間がかかってしまった。
他の皆さんに追いつけるようがんばるぞー!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

タップで読みたいところにジャンプします