Web開発者向けAtomパッケージ

Sunsetting Atom | The GitHub Blog

We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

Web開発にはこのエディタを使っています。マークアップエンジニアには必須でしょう。マルチカーソルがかっこいい。

text editor Atom + EMMET

インストールしているのはこのパッケージ。

atom-beautify

control+option+bできれいに整形してくれます。

autoclose-html

＜li＞と入力すると＜li＞＜/li＞と勝手に返しタグまで入れてくれる。スピードアップしますよ。

emmet

!>>+tabキーで

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

と一括で入力してくれます。

ul>>li*5>>+tabキーで

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

と一括変換。恐ろしいくらいの効率化です。

linter-tidy

まずはこれをインストールすると依存関係でいろいろとインストールされます。さらにtidy-html5をインストール。Mac内のtidyをHTML5に対応させるためにHomebrewを使ってインストール。

brew install tidy-html5

これをしておけばエラーチェックが完璧に出来ます。

その他のパッケージ

あとはm5stackやESP32そしてArduinoなどをいじくるためにPlatform IO IDEを入れています。若干重くなるので、Web関連の仕事をするときはdisableにしています。パッケージ管理はとても楽なのでたまに気になるものがあればとりあえずインストールしてみる。要らなければ即削除してしまえるのがいいですね。