メモリルド

メモリルド

新しい見方の参考になると嬉しい

テキストエディタに最低限入れる機能(プラグインなど)

テキストエディタを入れて、次はどうしたらいいのか分からない初心者向け。

最低限入れたい機能を書いているので、他の記事も読んでどんどん自分が使いやすいようにカスタマイズしてください。

 

目次

ないと暴れたくなる

Emmet

EmmetというHTML補完機能は絶対に便利。

「!」書いてtabキー(テキストエディタによる)を押すと以下のHTMLが全て書かれる。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

超便利じゃない?

他にも「ul>li*3」って書いてtabキー押すと以下のHTMLが書かれる。

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

Emmet入れる。 

https://docs.emmet.io/cheat-sheet/

 

半角全角スペースの表示

スペースが空いているかどうかはプログラムを書く上では重要になる。

半日悩んだ挙句、たった1つの全角スペースが混じっていただけだったなんてことはよく聞くし、自分も経験した。

コードは英語で書くけど、コメントを書くときに日本語を使うし、半角と全角のスペースがそれぞれ可視化されるプラグインなり、設定なりをしておいてほしい。

以下の写真は我のテキストエディタの例。 

f:id:yuzukami1:20200119215534p:plain

絶対にいる。

 

文字色(テーマ)

我はテーマを入れて文字色と背景を以下のように変えている。

f:id:yuzukami1:20200119215729p:plain

ただランキングで上位だったから採用してみて、そのままになっている。

長時間PC画面を見るなら背景は暗めの方が目が楽。

 

CSSの色がコード上に表示されるやつ

ホームページのデザインを自分でいじることがあるなら、便利。

16進数で色を指定しても人間にはどんな色か我にはさっぱり分からないから、色を表示してくれると便利。

f:id:yuzukami1:20200119223652p:plain

 

生産性の向上

日本語化

英語のままでも別に困らない。

 

即時反映

BracketsではライブプレビューというHTML、CSSの変更を即時で反映して表示する機能がある。

あると便利ではあるが普通に画面でリロードをかけるのが癖になってる。

 

テキストエディタのショートカット

複数検索・選択とか、行複製、改行ショートカットを我は使うために覚えている。

テキストエディタによって初期状態でのショートカットキーが異なるので、ググってほしい。

慣れると、wordを触ってても不便を感じるようになる。

 

終わり

他の記事では入れるプラグインの数が多すぎて、結局どれを入れたらいいのか分からなくなることが多いので書きました。

とりあえず最低限これだけ入れておいて後から追加するように我はしています。