[WIP] sublime text + Emmet でフロントエンドのコード書くメモ

WIP sublime-text Emmet HTML エディタ

完全に個人的なメモです( ´ ▽ ` )

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

逆引き

よく使うショートカットキー

書き始め

  • 書き出し部分（HTMLのテンプレート的な）

! とエディタに書いて展開（tab) する

以下の内容が自動で作成されます！超便利

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

ただ言語部分のデフォルト設定が"en"になっているので、lang=“ja"になるよう設定

メニュー>Preferences>Package Settings>Emmet>Settings - User

ここに以下の内容をコピペ

{
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
            "charset": "UTF-8",
            "indentation": "\t",
            "newline": "\n"
        }
    }
}

もう一回 “!"と入力して展開（tab）をしてみると、以下の通り

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

できたー！

コメントの文字を変更する

環境によりけりですが、こちらに設定ファイルがありました！

~/Library/Application Support/Sublime Text 3/Packages/User

手順はこちらを参考に、とってもわかりやすい、感謝感謝

qiita.com