コーディング速度を高めるために行っているアプローチ (VSCode拡張機能編)
こんにちは、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 など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！関連リンク
