IT Programming

Sublime Text3 おすすめの使い方5選!

PC,画像

 

・SublimeText3のおすすめの使い方、なんかないかなあ。便利な機能とかが知りたいなあ。

 

こういう疑問に答えます。

 

この記事を書いているぼくはSublimeText3の愛用者です。

そんなぼくがおすすめするSublime Text3の使い方を5つご紹介します。

 

記事の流れ

  • おすすめの使い方その1:Altで閉じタグ不要
  • おすすめの使い方その2:インデントでコードをきれいに
  • おすすめの使い方その3:一瞬でタグが対応しているかがわかる
  • おすすめの使い方その4:HTML構造を一瞬で書くという神技
  • おすすめの使い方その5:属性が自動入力される

 

おすすめの使い方その1:Altで閉じタグ不要

 

タグ名を入力してそのままTABキーを押すと、閉じタグも同時に入力されます。

閉じタグというのは、</div>とか、</head>のように、おしりにつけるタグのことです。

 

他にもこんなことができるよ

・「.」+「クラス名」=>Tabキー=>「クラス名」が入ったdivタグの組をつくれる

・「#」+「id名」=>Tabキー=>「id名」が入ったdivタグの組をつくれる

 

いちいち「<」から「>」まで書いていくのってめんどくさいですよね。

でもこれでコーディング速度アップ間違いなしです!

 

おすすめの使い方その2:インデント最適化でコードをきれいに

  1. インデントを改善したい箇所を指定
  2. メニューバーの「編集」をクリック
  3. 行の操作→インデント最適化

一瞬でインデントがきれいになるから、ほんと感謝です😂

 

おすすめの使い方その3:一瞬でタグが対応しているかがわかる

コードを書いて「あれ?タグの数が1個足りなくない?」となった経験はないでしょうか?

 

SublimeText3は、そんな問題を解決してくれます。

 

👇の動画をよーく見てください。

タグをクリックしたときに、対応したタグがある場合はタグの下に波線が引かれているのがわかるかと思います。

 

対応してない場合は👇のようになります。

</ul>を消して<ul>をクリックしてみると、<ul>の波線が表示されていません。

 

つまり、クリックしたタグに対応したタグがないときは、タグ名の下に波線が表示されないということです。

 

目視で「タグの数合ってるかな?」と毎回確認するのはダルいですよね笑。

このテクニックがあれば、タグが合わないという間違いはかなり少なくできます!

 

次に紹介する2つはEmmetを使ったおすすめの使い方です。

EmmetをSublimeText3に追加することで次に紹介することができるようになります。

 

Emmetをインストールしていない方はSublimeText3のインストール方法&日本語化【神機能も】のEmmetについて解説している部分をどうぞ。

 

おすすめの使い方その4:HTML構造を一瞬で書くという神技

半角の「!」を入力してTABキーを押すと、なんと一瞬でHTML構造がマークアップされます!

 

DOCTYPEheadなどのめんどくさいコードも瞬殺です笑。

これができるだけでコーディングの時間はエラく違います\(^o^)/

 

 

おすすめの使い方その5:属性が自動入力される

タグ名+Altキーで閉じタグが自動入力されるとさきほどお伝えしましたが、属性も自動入力してくれるタグ名もあります。

 

属性とはタグ名の後につけられるもので、タグの設定をする役割があるものです。

例えばclassidsrcaltなどがあります。

 

上記のように、「img」を入力してTABキーを押すとsrc属性、alt属性も入力されます。

 

Emmetがなくても、閉じタグを自動でつけてくれる機能はあります。

しかし属性も自動的に書いてくれるのはEmmetならではの機能です!

 

いろんなタグ名でAltキーを押してみると面白い発見があるかもですね(≧∇≦)b

 

さいごに:ショートカットで作業を高速化しましょう

Sublime Textのおすすめのショートカットをご紹介しました。

これらのショートカットは、知ってると知ってないとでは、コーディング速度が全然違います!

 

ぜひ活用してください(*^▽^*)

それでは。


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ