こんにちは、藤本です。
最近、コーディングをする機会が多く、コーディングで時間をかけ過ぎてしまうことも
しばしばあります。
そこで、コーディングのスピードを上げるための方法を調べました。
調べた方法を実践してみて、スピードが上がりそうだと感じた方法をご紹介します。
htmlとcssで、ソースコードを簡略化して書け、変換してくれるものです。
Visual Studio Codeなら、標準で機能が入っています。その他のエディターでもプラグインなどで使用できます。
htmlでは、基本は『要素(h1)』 + 『Tabキー』で変換ができます。
cssでは、 基本は『要素(h1)』 + 『Tabキー』で変換ができます。
タイピングする回数を大幅に減らすことで全体のコーディング時間を大幅に減らすことができます。
また、肩や腕も疲れにくくなりますし、タイプミスも減ると思います!!
コーディングをするという人は、ほとんどの人が使用していると思います。
スニペットとは、ソースコードをまとめて、テンプレートとしてエディターツールの中に保存しておけるものです。
コーディングの際によく使うソースコードの書き方があると思いますが、その時に使えます。
Prettierは、コードのスタイルがバラバラで見にくい時に自分のスタイルに整理してくれるプラグインです。
自分のスタイルやコードのルールみたいなものを決めることで自分にあったスタイルで整理してくれます。
コーディングのルールに個人差があると思いますが、複数人でコーディングを行う場合にも、自分のスタイルに整理してくれるので便利です。
HTMLのコーディング中に、CSSのクラス名を打ち込む時に、クラス名を覚えていなかったり、長いクラス名だったりする場合に補助してくれるプラグインです。
IntelliSense for CSS class names in HTMLで事前に何回も使うCSSのClassファイルを作成しておけば、HTMLのコーディング中にClass名を補助入力してくれます。
CSS Peakは、HTMLコーディング中にclass名の部分に適応されているCSSをHTMLコード上で表示してくれるプラグインです。
HTMLコーディング中にCSSのclassの値を忘れた場合に毎回CSSファイルを開く必要がなく効率的にコーディング出来ます。
Path Intellisenseは、パスの補完をしてくれるプラグインです。
コードが分からない場合にヒントを出してくれます。
Color Highlightは、CSSで設定しているカラーコードに、実際に色を表示してくれるプラグインです。
カラーコードに表示される色をコード上で見れるので、カラー確認がすぐできます。
CSSTree validatorは、CSSのコードをチェックしてくれるプラグインです。
コードの下線部に波線を表示してくれるので、すぐにエラー部分がわかります。
また、エラーログも表示してくれます。
CSSのエラー確認時に一目で解決でそうです。
テキスト校正くんは、日本語の間違っている箇所をチェックしてくれるプラグインです。
タイプミスや変換ミスを防げる可能性アップです。
日本語や専門用語の間違いなどをなくすことができます。
もっとはやくコーディングがしたいと思うことは、大切かなと思います。
さらに便利な機能を使って、効率化を目指していきたいと思います。
さらに向こうへ、レッツコーディング!!、、