SWITCH BLOG

みなさん超絶お久しぶりです。
スイッチの新米コーダーの藤本です。(｢ﾟДﾟ)｢ｶﾞｳｶﾞｳ
最近は、仕事の効率化も含めて成長しないといけないなと思うこの頃です。

で、コーダーとしてよく使用するVScodeを少しでも業務を早く、効率化するためさまざまな記事を漁っています。

そんな中で、今日はプラグインを紹介しようと思います。

1、HTMLのimgタグのwidth,hightを自動指定！！
これは、プラグインとかではないですが、下の画像にある通りVScodeの

・基本設定→キーボードのショートカットキーを選択 ・キーボードショートカットのところの検索欄にeditor.emmet.action.updateImageSizeを入力する ・あとはキーバーインド(ショートカットキー)を入力して完了です！！

ちなみに、僕のショートカットキーは” Ctr+I “です。意外と他のショートカットキーと重なることがあって大変でしたが、今はこれがしっくりきています。

使い方は、HTMLタグのimgの画像パスを洗濯した状態で、ショートカットキーを入力するだけ！！ widthとheightが勝手に表示されましたよね！！

さらに！！！！！！！！！！

これのすごいところは、cssでも同様に使えることでした！！

使い方は、上記と同じで、widthとheightの指定をしたい画像のパスでショートカットキーを押すだけ！！

はい、おしまい。 今までの苦労はなんだったのでしょうか？(ぴえん🥺超えてぱおん)

2、Project Manager

これは、コーダーのみならず多くの技術者が使っているのではないでしょうか？

Project Managerは何者なのか！？ 仕事でフォルダごとに案件を管理していると思います。 それをVSCodeでファイル→開く→ファイル選択していたら面倒なので、 下記の画像の①を選択すると②にProject Managerに登録しているプロジェクトが表示されます！！ (僕の画像の赤で塗りつぶしているところです。ここは”あかん→”赤ん””ものが入っているので塗りつぶしてます…)

使い方は、

Project Managerをインストールします、 すると 1、①のアイコンが出ます。 2、②ファイル→ファイルを開く(Cmd + Oのショートカットキーでも可)から登録したいフォルダを選択します。 3、開いたら③のボタンを押します。 4、④のフォルダ名(登録したいフォルダ名が表示される)が表示されるのでEnterキーを押すと登録できます。

どうですか？簡単ですよね…！？ これでいちいち面倒臭かったフォルダの管理がVSCodeで一括管理できます！！

3、Color Highlight

これはcolor指定をした際に(background-colorも含めて)色を表示してくれます。

これが意外と便利なんですよね〜 色を目視で、大きく表示してくれるので”あれ？どの色指定したかな？”とかすぐこのフォントやbackground-colorの指定を確認できるので作業効率も上がりますよね！！(皆さんは入力したことをすぐ忘れないとは思いますが…笑)

今回は、3つご紹介しました〜

今後も需要があれば、私のパソコンの中身をご紹介できればなと思っています。

では、またの機会に〜〜〜〜　　　(｢ﾟДﾟ)｢ｶﾞｳｶﾞｳ