環境セットアップ
開発 TIPS - 応用編 -
INDEX
目次

1. VSCodeの便利ツール - プラグイン

VSCodeの基本的な使い方はProgateと以下の記事を参照してください。

a. VSCode使い方を確認しよう!

おすすめの記事 - VSCodeの使い方入門 -
上記の記事で押さえてほしいポイント💡

二度目の記事となるので、以下の点を確認できていれば問題ありません!

  • VSCodeのインストールができている
    ┗ VSCodeをいじる前にインストールを完了させましょう!
  • VSCodeの基本的な使い方がわかる
  • VSCodeを日本語化できる
  • VSCodeのフォルダーを開き、ファイルを作成できる
  • VSCodeの便利機能についてわかる

b. おすすめプラグイン紹介

それでは本題のVSCodeの便利なプラグインについてご紹介しましょう。

プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。
おすすめの記事 - プラグインの入れ方 -
試しにプラグイン「Open in Browser」を導入してみましょう!
 (4800)

Open in Browser のここがポイント!
  • Open in Browser:これを使用すると、上の写真のようにHTMLファイルを右クリック→「Open in Default Browser」を選択すると、簡単にHTMLファイルをブラウザで開きサイトの見た目を確認できます。
  • Comment Anchor:コードレビューの際に、REVIEWという文字を入れてコメントを記載します。その際に導入しておくと見やすいので、インストールをお勧めします。
その他VSCodeのおすすめ拡張機能(プラグイン)は以下の記事を参考にしてみてください。気になるものがあれば積極的に使用しましょう。
今後、言語ごとの便利なプラグインも導入すると良いでしょう。

Googleで「VSCode 言語名 プラグイン」で検索すると、おすすめプラグインを紹介する記事が見つかると思いますので、ぜひ参考にして導入してみてください。

2. ChromeのDeveloper Toolを使いこなす

ChromeのDeveloper Toolは特にフロントエンドの開発では必須と言っても過言ではないでしょう。
ChromeのDeveloper Toolを使用するタイミング
  • HTML・CSSでWebサイトを作り、PC・スマホ・タブレットなど様々な画面幅でデザインが崩れていないか確認したい時
  • 他のサイトのHTML・CSSを分析したい時
  • サイトでエラーが出ていないか確認したい時

学習を進めていくと、後ほどProgateでもDeveloper Toolについて学べるので、まずはそちらで学びましょう。

「今すぐ知りたい」という方向け!参考記事
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH