今まで使っていたのはDreamWeaver
htmlを書くようになって使っていたのはAdobeのDreamWeaverでした。
こちらも使い勝手がよく好きだったのですがAtomエディタが便利とのことで変えてみました。
Atomは無料で使えるので気軽に試すことができるのも魅力です
おすすめのパッケージ
メニューを日本語化[japanese-menu]
やっぱり日本語メニューがわかりやすい！
タグが簡単に書ける[emmet]
普段コードを書く時に一番目に見えて便利なのがこれ。
省略して書いたタグ+ショートカットキーでコードを展開してくれます。
例えばpタグ。普通ならカッコが必要ですがemmetならp+ショートカットキー。カッコを書く必要がありません。
pタグのような簡単なタグならそんなに気になりませんが、例えばhtmlの宣言なども簡単です。
<!--こう書くと-->
html
<!--こう展開してくれる-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
class名があるリストとかもこんなふうに簡単に。何度もコピペしなくていいのが便利！
<!--こう書くと-->
ul.list>li.list-item*5
<!--こう展開してくれる-->
<ul class="list">
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
<li class="list-item"></li>
</ul>
省略文字を覚えるまでに少し時間がかかるかもですが、慣れたらコード書くのが早くなるのでとてもおすすめです。
emmetのチートシートでよく使うタグは覚えましょう。
Emmet cheat-sheet
FTP接続するなら[remote-ftp]
FTP接続情報を保存してエディタ上でファイル更新できるパッケージ。決まったサイトをさわるなら必須！
プロジェクト管理が簡単[project-manager]
その名の通りプロジェクト管理パッケージ。
よく使うフォルダのパスを保存してプロジェクトとして登録しておくと「フォルダを開く」からわざわざたどってから開かなくても一発でフォルダが開けます。さらに、remote-ftpでFTP情報も保存しておくとAtomエディタを開くだけでファイルの更新ができるので便利です
DreamWeaverを使っていた人は馴染みのある機能ですよね。
コードを見やすく！[atom-beautify]
ソースコードをきれいにしてくれます。
HTML,CSS,JavaScript,PHP Python,Rubyなどなど、いろいろな言語に対応してます
コードのチェックをしてくれる[linter]
コーディングの際のミスをチェックしてくれるパッケージです。エラーが有ると教えてくれます。
PHPのチェックがしたい時はlinter-phpを入れます。
よく使う機能をツールバーに表示[tool-bar]
プロジェクトフォルダを開く、とかリモート接続とか、とにかくよく使う機能をボタンで表示してくれるので便利です。
別のパソコンにも同じ設定を追加できる[sync-settings]
パソコンの入れ替えをした際に使ったパッケージ。
一から設定しなくてもGitHub経由で同期してくれます。
Githubあまり使ったことないけどググって出てきた手順にそって進めればできました。
ちょっと検証してないので分かりませんが一部移行できない部分もあるかも？
sassのコンパイルも[sass-autocompile]
sassが使ってみたくて導入しました。
あぁ、もともとsass使うならAtomが便利だよというところからAtomを使い始めたのかもしれない。以前はkoalaとかのコンパイラというやつを使っていたのでそれに比べると便利です。
sassに関しては書き方を少し勉強して便利さは分かったものの、実務であまり使う機会がないのでいつか使いたいな。複数編集に便利そうなのでぼっちの私にその機会があるかどうかは分からないけど。
ちなみにwordpressもsassが使えるプラグインみたいなのあります。
ただ、ファイルの更新とかが間に1～2手間入るので面倒です。普通にstyle.cssのやり取りするのが便利。
