30DAYSトライアル VScode お勉強 ツール

【デイトラ】VScodeのインストール【30DAYSトライアル DAY8】

30DAYSトライアル

『エディタ』がなんなのかピンとこなかったから調べたら『何かを編集するためのソフト』なんですね。

VSCodeをダウンロードし終わった後、

「うわ。英語やん...」

と思わず引いてしまった(笑)。
そういえば英語もマスターした方がいい、んですよね...。
言語をマスターするためには、

  • 話す
  • 聞く
  • 読む
  • 書く

といったことがありますが。
個人的にこの中だと『話す』ことができたらいいな、と思っているけど、エンジニアとしての優先事項はどれになるんだろう?

ちなみに学生時代~現在までTOEICは一度も受けたことなし!
昔ネットで「もしTOEICを受けたら○○点だよ!」みたいなテストをプレイしたら200点台だった記憶があるから私の英語力は相当ヤバいと思う(笑)。
業務でソースコード読んだり書いたりするぐらいは大丈夫だけどね。

本業ではEclipseをメインに使っているけど、入社してからのセットアップとか全部先輩にやってもらったし、こういうソフト系の最初の設定とかもし独立して一人でやる。ってなったらもう不安でしかないんだが(笑)。
エラー食らったり、うまくいかなかったときに頼れる人がいないからね。

オススメの拡張プラグインをインストール

それぞれどんな拡張機能なのか、公式から読む or 日本語サイトをググってみてください( ^ω^ )

と言われていたので、インストールする前にどんな拡張機能なのか調べてからインストールしました!
公式サイトが英語で再び絶望しましたが()
拡張機能名で検索して最初の10サイトぐらいはそれぞれざっと読んでみました!

①Auto rename tag

開始タグ名を変更したら閉じタグ名も自動で変わる。
ただし、開始タグと閉じタグがペアになっていないと別のタグが変更されてしまうので注意!

②Auto Close Tag

開始タグを入力すると自動で終了タグが入る。

こちらは東フリサイトでは紹介されていなかったけど、「Auto rename tag」を検索する中で『合わせて入れておくと便利でいいよ!』という意見が多かったのでインストール。
自動で閉じてくれるのは確かに便利!
閉じ忘れ防止にもなるし!

③CSSTree validator

CSSファイルをW3Cでチェックしてくれる。
と、あったのですが「なんのこっちゃ?」

そもそもW3Cってなにー??と思って調べてみたら、
「World Wide Web Consortium」の略。
Web技術の標準化を行う非営利団体。
HTMLやCSSなどを標準化して品質にばらつきが出ないようにする、ってことですね。

W3Cのバリデーションサイトにいちいち行ってチェックするのはめんどくさいので、CSSTree validatorの拡張機能を入れてVSCode内でチェックできるようにする!と。
CSSTree validatorは、CSSの文法をチェックしてくれて、間違ってると指摘してくれる拡張機能です。

④Visual Studio Code CSS Support for HTML Documents

日本語での検索結果が東フリメンバーの学習サイトで笑った。
公式サイトをGoogle翻訳で見てみると、

・クラス属性の補完。
・ID属性の補完。
・クラスおよびid属性のZenコーディング完了をサポートします。
・cssおよびscssファイルのワークスペースフォルダーをスキャンします。
・リモートcssファイルをサポートします。

正直あまりピンときてませんが(←)、おそらくCSSを書く上できっと便利な拡張機能なんでしょう!!!
「補完」ってことは一回使ったクラスとかが保存されて、2回目以降使う時にショートカットみたいに便利になる、みたいな感じですかね?予測変換的な。
(こういう時に英語サイト読めるといいんでしょうね...)

あと、VScodeでのプラグイン検索での名前が記載されているのと違っていたので参考までに。
インストールするのはこれ!↓

VScode HTML CSS Support プラグイン 拡張機能

⑤IntelliSense for CSS class names in HTML

HTMLなどででクラス指定する時に、定義したCSSの中から候補を教えてくれる。

ちょっと④Visual Studio Code CSS Support for HTML Documentsと似てるかな?

⑥Japanese Language Pack for Visual Studio Code

VSCodeを日本語にできるみたいです!やったぜ!!

⑦HTMLhint

HTMLの文法をチェックしてくれます。

⑧zenkaku

全角スペースを可視化してくれます。

VScodeのEmmet機能

Emmetという機能が標準で付いてるっていうのも調べてみたのですがかなり便利ですね!
作業が短縮できて重宝しそうです!
これは自分で登録していくのかな?
それとも既に登録済み??

実際にコーディングする時に改めて確認してみようと思います!

-30DAYSトライアル, VScode, お勉強, ツール
-,

© 2021 文系女子とプログラミング