コーディング速度を高めるために行っているアプローチ (VSCode拡張機能編)

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

少し前の記事でも書きましたが、今の自分はHTMLやCSSのコーディング速度を伸ばすのを重要視して自習を行っています。

今回はコーディング速度を上げるために試しているアプローチとして、今VSCodeに導入している拡張機能をいくつかまとめたいと思います。

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTMLの開始タグまたは終了タグを書き換えると、自動で対応するもう一つのタグも書き換えてくれる拡張機能です。

これ無しの作業はもう考えられないほど、基本的な拡張機能として重宝しています。

htmltagwrap

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

HTMLタグで囲みたい文字列を選択してAlt + W(デフォルト)を押すと、p タグで自動的に文字列を囲んでくれる拡張機能です。そのままで例えば span とキーを打てば span となります。

前述の Auto Rename Tag や、 Emmet と併用するとマークアップの速度が非常に速くなる印象です。

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

行末にある不要なスペースをハイライト表示してくれる拡張機能です。ショートカットキーで行末スペースを一括削除することもできます。

行末スペースは非常に気づきにくく、前に行末にスペースがあったことで少しハマったことがありましたが、これを使うようになってからそういうことは一切無くなりました。

Incrementor

https://marketplace.visualstudio.com/items?itemName=nmsmith89.incrementor

CSSなどの数値をショートカットキーを操作して変更できる拡張機能です。こちらは独自の辞書を用意することによって文字列も操作できるのが特徴的です。

まとめ

今回はHTMLやCSSのコーディング速度を高めるために行っているアプローチとして、今使っているVSCodeの拡張機能で特にコーディング速度を上げるのに役立っているものをまとめました。

まだまだ模索している最中なので、これからも色々とツールを試していけたらと思っています。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

関連リンク


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。