1. コードフォーマット
パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。
2. 行末の不要なスペースやタブの削除
Performance → Setting – User において下記を追記。
"trim_trailing_white_space_on_save": true
これでファイル保存のたびに、行末の不要なスペースやタブが自動的に削除されます。
もし自動的に消えるのが、Git管理とかでノイズになってしまうということであれば手動で削除する。その場合は、パッケージ TrailingSpaces。文末など不要なスペースに色をつけて警告してくれる。これで警告されるとコーディング中にも削除せねば。という気持ちになるのでとてもよい
3. スペースとタブの可視化
Performance → Setting – User において下記を追記。
"draw_white_space": "all",
これで半角スペースはドット、タブはラインで表示してくれる。参考は上記の画像。
と、とりあえずこんなところなのですが、他にもこの方法で自動化できる！とかコメントを自動的に入れる！とかいろいろありそうなので、コメントなどいただけると嬉しいです。なるべく整理されたコードが書けるようになりたい。
おまけ : emmetで html:5 を展開したときに en になるのを ja にする
emmet の Setting-User において
{
"snippets": {
"variables": {
"lang": "ja"
}
}
}
これで
html:5
を展開した時に
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
と開くときの <html lang="en"> が <html lang="ja"> になります。便利。
おまけ2(お願い) : Sublime Text 3 でパッケージとして emmet を入れた際の、ファイルの場所を教えて下さい。
これを Mac の Sublime Text 3 でもやりたいのですが、関連ファイルが見つからない。どこだ。。。