エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY8.『エディタをインストールしよう』 #30DAYSトライアル

DAY8.『エディタをインストールしよう』 #30DAYSトライアルです。

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY8.『エディタをインストールしよう』課題

DAY8. 『エディタをインストールしよう』ということで、環境設定です。

 

Progate卒業!

今までは、ウェブブラウザ(GoogleChromeやSafari)の上で、Progateのウェブサイトの中の、擬似的な開発環境から開発をしていました。

ついに、それぞれのパソコンの上での開発(ローカル環境での開発)に入ります。

 

クッキングスタジオに行って料理を学んだので、今度は自宅のキッチン周りの道具を揃えて、料理をする!みたいな感じです。

 

Visual Studio Codeについての説明【課題解説】

今日はVisual Studio Codeのインストールでした。

 

メモ帳じゃ開発大変なので、開発を楽にするために使うのがテキストエディタです。

そのテキストエディタのソフトの中の1つがVisual Studio Codeです。

» 参考:Visual Studio Code - Code Editing. Redefined

 

オススメのVSCodeの拡張機能(プラグイン)

ショーへーさんオススメのVSCodeの拡張機能(プラグイン)です。

これらを入れておくと、コーディングするときに色々と便利になります。

 

自走できるエンジニアを目指す【余談】

以下、各プラグインについて説明をしますが、1つ注意です。

私がまとめた文章はあくまでも「参考」にどうぞ。

自分で調べて理解する癖を付けることが重要ですので、まだ調べていない方は自分で調べてみるのをオススメします。

 

manablogのマナブさんが言う「自走できるエンジニア」というやつです。

下記の動画の25:45あたりでの発言です。良い動画なので全編必見です

» 参考:フリーランスエンジニアになる為の完全講義【世界を旅しつつ、稼ぐ方法】 - YouTube

 

VSCodeの拡張プラグインの簡単な説明(学習メモ)

VSCodeの拡張プラグインの簡単な説明です、私の学習メモ代わりです。

Auto Rename Tag

Auto Rename Tag - Visual Studio Marketplace

  • HTMLタグは開始タグと終了タグのペアである
  • どちらかを変更したら、どちらかを変更する必要がある
  • Auto Rename Tagは開始タグ、終了タグのどちらかを変更したら、もう片方も勝手に変更してくれる

 

CSSTree validator

CSSTree validator - Visual Studio Marketplace

  • CSSTree validatorは、CSSファイルがW3Cに準拠しているかVALIDATIONしてくれる
  • W3C=ウェブの標準規格のこと(WEB世界のルール)
  • VALIDATION=入力チェック(エラーチェック)のこと

 

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML - Visual Studio Marketplace

  • HTMLファイルなどで、CSSクラスを指定するとき、入力補完する(候補を出してくれる)
  • 候補は、ワークスペースのCSSを読み込んだ情報が元になる

 

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

VSCode自体を日本語化するソフトです。

※私の環境だと、これを入れて再起動したら、日本語化されていました

 

使用法は以下の通り(一応)

インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。locale.json を編集するには Ctrl+Shift+P を押してコマンド パレットを表示させ、"config" と入力し、利用できるコマンドのリストをフィルター処理してから Configure Language コマンドを選択します。詳細については Docs を参照してください。

引用元:Japanese Language Pack for Visual Studio Code

 

HTMLHint 

HTMLHint - Visual Studio Marketplace

  • HTMLの構文チェックツール
  • 自分が設定した状態に応じて、勝手に誤りがないかチェックしてくれる
  • Lint系ツール(間違いチェックツール)のHTMLバージョン

 

zenkaku

zenkaku - Visual Studio Marketplace

  • 全角スペースを可視化する
  • 全角スペースが入っているプログラミングするときは色々と不都合あるので開発者が気づけるようにするのを助けている

 

って感じ。

 

ドキュメントも英語だし、最初は何を言っているのかよくわからないと思いますが、

  • いかに人間のミスを減らすのか(間違いを表示させる)
  • いかにコンピュータ側で自動で処理してもらうか(入力補完)

という観点のプラグインですね。

 

これらが入っているのと、入っていないのとでは、全然生産性が変わりますね~

 

以上、DAY8.『エディタをインストールしよう』というお話でした。

 

ちなみに今回インストールしたテキストエディタのVSCodeに似たソフトウェアとして、IDEというものがあります。

その違いを簡単に記事にまとめたので、お暇があればどうぞ。

» 参考:統合開発環境(IDE)とはなにか?テキストエディタとの違いは?【未経験エンジニア向け】 - エンジニアステップ

 

【関連記事】

  1. DAY8.『エディタをインストールしよう』 #30DAYSトライアル
  2. DAY9.『基本のショートカットを覚えよう+ファイルパスを理解しよう』 #30DAYSトライアル
  3. DAY10.『Chromeの検証を使ってみよう+LiveServerをインストールしよう』 #30DAYSトライアル

www.engineer-step.com