エディタに入れてるプラグインの紹介

アバター画像 sakurai

0

こんにちは。櫻井です。
今日は僕が普段使っているAtomというエディタに入れている便利なプラグインを紹介しようと思います。

japanese-menu

インストールするだけでAtomのメニューとかを日本語に翻訳してくれるものです。
これがないと何書いてあるかわからなくて困ります。

autoprefixer

cssのベンダープレフィックスと呼ばれる「-webkit-」とかを付けないとcssがちゃんと聞いてくれないものを補完してくれるプラグインです。gulpを使っている案件の時は不要ですが全ての案件でgulpを使っているわけではないのでそんな時は使います。
使い方は「⌘(command) + Shift + p」を押して出てくるダイアログに「Autoprefixer」と打つと出てくる「Autoprefixer: Prefix」をクリックするだけです。テストアップする直前に使ったりします。

atom-beautify

人によってもエディタによってもインデントの揃い方って変わってくるのでデータを引き継いだ時などに重宝してます。
使い方は「⌃(control) + ⌥(option) + b」または右クリックして出てくる「Beautify Editor contants」クリックすれば出来上がりです。

emmet

超大事なプラグインです。これが使えないと開発にかかる時間が1.5倍から2倍に膨れ上がるんじゃないかってくらい時短に協力してくれてるプラグインです。
例えば、「!」を入力してタブキーをクリックするだけでmeta付きのhtmlを展開してくれたりします。htmlの生成に特に使っているんですがemmetの便利な機能の紹介は後日したいと思います。

local-server-express

絶対に入れて置くことをお勧めするプラグインです。
案件によっては絶対パスで組まなければならないものもあると思いますが。このプラグインを入れておけばトップページになるファイル開いて「⌃(control) + ⌥(option) + ⌘(command) + s」でエディタが仮想サーバーを構築してくれます。

file-icons

ファイルの拡張子をみなくてもファイルの種類がわかる便利なやつです。なくても困らないと言えば困らないけど、あると便利な子。

highlight-selected

自分が選択したワードで付近にあるものをわかりやすく白い枠で囲ってくれるプラグインです。「⌘(command) + f」で検索すればわかることですが、検索するより早く知覚的に場所を教えてくれます。微妙なスペルミスを見つけるときとか、タブを跨いで教えてくれるので例えば、htmlだとクラス名が「message」というのがあったとしてcssの方が「massage」になっていたとしてcssの「massage」を選択すればhtmlの方は白い枠で囲まれないのでひっそりと控えめにスペルが間違っていることを教えてくれたりするいい子です。

indent-guide-improved

インデント位置をわかりやすく縦線を引いて教えてくれます。 インデントめちゃくちゃにならないように注意するのにちょうどいいです。

show-ideographic-space

日本語打ち込んで英語に戻してって 繰り返してると半角スペース打ったつもりが全角スペース打ってたってことあるじゃないですか。これそんな全角スペースを白い四角で囲ってくれるプラグインです。

platformio-ide-terminal

atom上でターミナルを扱わせてくれるプラグインです。このプラグインの特に気に入っているポイントとして開いたプロジェクトの位置までターミナルを移動してくれているところです。

pigments

複数の色を使っているときに間違えて別の色を修正してしまったりっていうのを防ぐのにちょうどいいプラグインです。

まとめ

今回はAtomのプラグインを紹介しました。最近はVSコードが主流になってきてるみたいで僕もいつか切り替えるかもしれません。ですがもしAtomを使ってみようと思ったらご紹介したプラグインを試してみてください。

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
便利なEmmetの使い方 配列のHOW TO