こういう疑問に答えます。
この記事を書いているぼくはSublimeText3の愛用者です。
そんなぼくがおすすめするSublime Text3の使い方を5つご紹介します。
記事の流れ
- おすすめの使い方その１：Altで閉じタグ不要
- おすすめの使い方その２：インデントでコードをきれいに
- おすすめの使い方その３：一瞬でタグが対応しているかがわかる
- おすすめの使い方その４：HTML構造を一瞬で書くという神技
- おすすめの使い方その５：属性が自動入力される
おすすめの使い方その1：Altで閉じタグ不要
タグ名を入力してそのままTABキーを押すと、閉じタグも同時に入力されます。
閉じタグというのは、</div>とか、</head>のように、おしりにつけるタグのことです。
・「.」＋「クラス名」=>Tabキー=>「クラス名」が入ったdivタグの組をつくれる
・「#」＋「id名」=>Tabキー=>「id名」が入ったdivタグの組をつくれる
いちいち「<」から「>」まで書いていくのってめんどくさいですよね。
でもこれでコーディング速度アップ間違いなしです！
おすすめの使い方その2：インデント最適化でコードをきれいに
- インデントを改善したい箇所を指定
- メニューバーの「編集」をクリック
- 行の操作→インデント最適化
一瞬でインデントがきれいになるから、ほんと感謝です😂
おすすめの使い方その3：一瞬でタグが対応しているかがわかる
コードを書いて「あれ？タグの数が１個足りなくない？」となった経験はないでしょうか？
SublimeText3は、そんな問題を解決してくれます。
👇の動画をよーく見てください。
タグをクリックしたときに、対応したタグがある場合はタグの下に波線が引かれているのがわかるかと思います。
対応してない場合は👇のようになります。
</ul>を消して<ul>をクリックしてみると、<ul>の波線が表示されていません。
つまり、クリックしたタグに対応したタグがないときは、タグ名の下に波線が表示されないということです。
目視で「タグの数合ってるかな？」と毎回確認するのはダルいですよね笑。
このテクニックがあれば、タグが合わないという間違いはかなり少なくできます！
次に紹介する２つはEmmetを使ったおすすめの使い方です。
EmmetをSublimeText3に追加することで次に紹介することができるようになります。
Emmetをインストールしていない方はSublimeText3のインストール方法＆日本語化【神機能も】のEmmetについて解説している部分をどうぞ。
おすすめの使い方その4：HTML構造を一瞬で書くという神技
半角の「!」を入力してTABキーを押すと、なんと一瞬でHTML構造がマークアップされます！
DOCTYPEやheadなどのめんどくさいコードも瞬殺です笑。
これができるだけでコーディングの時間はエラく違います＼(^o^)／
おすすめの使い方その5：属性が自動入力される
タグ名+Altキーで閉じタグが自動入力されるとさきほどお伝えしましたが、属性も自動入力してくれるタグ名もあります。
属性とはタグ名の後につけられるもので、タグの設定をする役割があるものです。
例えばclassやid、src、altなどがあります。
上記のように、「img」を入力してTABキーを押すとsrc属性、alt属性も入力されます。
Emmetがなくても、閉じタグを自動でつけてくれる機能はあります。
しかし属性も自動的に書いてくれるのはEmmetならではの機能です！
いろんなタグ名でAltキーを押してみると面白い発見があるかもですね(≧∇≦)b
さいごに：ショートカットで作業を高速化しましょう
Sublime Textのおすすめのショートカットをご紹介しました。
これらのショートカットは、知ってると知ってないとでは、コーディング速度が全然違います！
ぜひ活用してください(*^▽^*)
それでは。