#1 開発に使う武器 Visual Studio Code を手に入れよう！オススメ拡張機能の紹介あり
おはこんばんちわ。
週１、２回ブログ投稿すると言っておきながら、全然投稿しなかった人は私だよ。ごめんね、忙しかったんだ。
今日は、開発に使用する武器を手に入れるよ。
武器を手に入れよう！その名も「Visual Studio Code」
プログラミングするときに、何のエディタを使う？って話があるんだよね。これからフロントエンド開発を始める人は Visual Studio Code（VS Code） を使うと良いよ。無料だしね。
「俺はお金に物を言わせて最強の武器を手に入れたいんだよ！！！！」
って人はJetBrain社の WebStorm を使うといいかも。２年前に購入して使ったことがあるけど、けっこう快適に開発することが出来たよ。予測変換とか賢いんだよね。
購入するときには、日本の代理店となっている サムライズム さんから買うといいよ。確か、代表が山本さんというお髭の方なんだけど、OSSカンファレンスにもよくブース出してて、相談にのってくれるいい人だよ。
でもまぁ、今回は無料のVS Codeでいこうか。VS Codeでも必要十分開発できるから安心して。ちなみに、私は職場でVS Codeを使って開発しているよ。そう、これでも十分開発できるんだ。
「このエディタでしか開発出来ないカラダに調教されてしまった」
っていう、人は好きにしてちょうだい。ホント好きにすればいいと思う。エディタは宗教。ただし、SJISファイルを量産するメモ帳はやめてね。
これから開発を始める諸君は、VS Codeをインストールしよう。
VS Codeの基本的な使い方
インストールできたかな？
起動したらこんな画面が表示されるはずだよ。一部、ノイズ載っているところあるけど、これは見せたらいけないやつだから加工編集したやつだよ。気にしないでね。
あと、私のVS CodeとあなたがインストールしたVS Codeで、見栄えとか違うかもだけど、そこは許してほしい。自らカスタマイズして、これで本当に普段開発しているんだ。だから、あなたのVS Codeと私のVS Codeで違うところあっても許してね。
さぁ、じゃあこの武器の使い方を伝授しようかな・・・
と思ったけど、私が書くまでもなく、いい情報源があったのでこっちを参考に使い方を勉強してみてね。大丈夫、無料だよ。
ドットインストール：Visual Studio Code入門
んー・・・ドットインストールの人の声、なんか聞いていて眠くなるんだよね。BGMにかけながら聞くと良いよ。オススメの曲を貼るよ。超クールなメイドさん姿のゴリゴリのロックバンドだよ。大好き。
あ、そうだ。学習をすすめるに当たり、言わないといけないことがある。
ちゃんと聞きながら実際に手を動かさないとダメだよ。手を動かして学ぶことが、エンジニアリングでは大事だよ。手を動かせない、能書きばかりたれるクソ野郎になったらダメだ。
じゃあ、ちょっと勉強してきてね。私は、その間にコーヒーでも飲んで待ってるよ。
拡張機能をインストールして強化しよう
おかえり。
どうだろう？基本的な使い方が分かってきたかな？こんな良いものが無料で使えるなんてすごい時代だよね。
じゃあ、次は、私がVS Codeに入れている拡張機能を紹介するよ。実際に現場で使ってるいるのも紹介するから、参考になれば幸いだよ。
一般系
Material Theme
VS Codeのテーマを、マテリアルデザインベースに出来る。私が使用しているのは、Material Theme Darker High Construct だよ。
Material Icon Theme
エクスプローラーのファイル名の横に、マテリアルデザインベースのアイコンが表示されるようになる。拡張子を見なくても、何のファイルか一発で分かるようになったよ。
Output Colorizer
OUTPUTタブでの出力結果を装飾して、見やすくしてくれるよ。
Log File Highlighter
ログファイルを見やすくしてくれるよ。
Debugger for Chrome
Settings Sync
VS Codeの設定をGitHub Gistを使って、複数端末で共有できるようになるよ。
Clock in status bar
右下に現在時刻が表示されるようになるよ。集中していると時間を忘れることもあるから、エディタに表示されるのはいいね。
Todo Tree
// TODO: と記載している場所を確認できるようになるよ。TODO対応漏れを防げるね。
コーディング一般(HTML/JavaScript/CSS)
Auto Close Tag
自動でHTMLの閉じタグを書いてくれるよ。タイプする回数を減らしてくれるナイスな拡張機能。
Better Comments
コメントハイライトを細かく設定できるよ。チームで書き方を統一しておくと、可読性の高いソースコードになるかもね。
Bracket Pair Colorizer
{}の開始と終了が分かりやすいように色付けしてくれるよ。これで見失わないね。
Color Highlight
カラーコードを使用しているところに、実際の色が表示されるようになるよ。
EditorConfig for VS Code
エディタの設定を定義するEditorConfigを、VS Codeで使えるようにするよ。.editorconfig で異なるエディタ・IDE間で、一貫したコーディングスタイルを維持できるようになるよ。インデントタイプとか文字コードとか。
HTML CSS Support
HTMLに対するCSSのサポートを行うよ。クラス属性の補完とかID属性の補完とか。
indent-rainbow
インデントに色付けしてくれるよ。
IntelliSense for CSS class names in HTML
CSSのクラス名とかを入力補助してくれるよ。
Prettier - Code formatter
コードフォーマッターだよ。ルールに従ってソースコードを整形してくれるよ。ルールファイルを作成したら、みんな同じようにソースコードを整形してくれるから、チーム開発では必需品だよ。
TODO Highlight
TODOを書いたら塗りつぶしてハイライトしてくれるよ。
Path Intellisense
ファイルやフォルダのパスを入力補助してくれるよ。
Trailing Spaces
行末の不要なスペース文字列を強調してくれるよ。
Visual Studio IntelliCode
Python、Java、TypeScript、JavaScript の入力補助をしてくれるよ。Microsoft公式の拡張機能だから、すごく出来がいいので入れることをオススメする。
Markdown All in One
Markdownで文章を書くときに、いろいろ補助してくれるよ。
Rainbow CSV
CSVに色を付けて読みやすくしてくれるよ。
Git系
Git History
git logをグラフィカルに見やすく表示してくれるよ。
GitLens — Git supercharged
ソースコードのdiffを見たり、誰がコミットしたソースコードなのかを、分かりやすく表示するよ。
gitignore
gitの除外ルールなどを定義する .gitignore の作成を補助してくれるよ。
Angular系
私はAngular使いだから、ここらへんを入れているよ。ちなみに、次回からはAngularの使い方を説明するから、入れておいた方がいいよ。
Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
Angularを使用したフロントエンド開発に必要となる入力補助をしてくれるよ。
Angular Snippets (Version 8)
Angularを使用したフロントエンド開発に必要となる入力補助をしてくれるよ。Angular界隈で有名なジョンパパさん作の拡張機能だよ。
Angular Language Service
Angularテンプレートの入力補助をしてくれるよ。
Angular Material 2, Flex layout 1, Covalent 1 & Material icon snippets
Angular materialとかフレックスレイアウトなどの入力補助をしてくるよ。
演出系
Power Mode
入れるといいよ。テンション上がるよ。
最後に
お気に入りの拡張機能は見つけられたかな？次回は、Angularを使ってみるよ。 なぜAngular？って思うかもだけど・・・
私が普段からAngualrを使って開発しているからなんだ。あれなんだよね。VueとかReactとかあるんだけど、自分でOSSを組み合わせないといけないじゃない？今の会社はプロジェクトが始まるたびに、複数会社が集まって開発するから、フロントエンド開発に必要なものが全て詰まっているAngularの方が都合がいいんだ。SIerってやつだね。
「Angular分かる人集まれ！」
と言えば仲間を集められるメリットは大きいよね。ほぼほぼ書き方も決まっているから。
ということで、次はAngularをやるよ。
