こんにちは、Shinyaです
今回は僕一押しの無料エディターAtomの導入と便利なショートカットの紹介を軽くやっていきます
Atomの導入
Progate内に無料会員ならだれでも見れる導入方法をまとめた記事があります
素晴らしいので(超えられる気がしないので)、そちらのリンクを貼っておきます
HTML & CSS の開発環境を用意しよう!(Windows用)
HTML & CSS の開発環境を用意しよう!(Mac用)
アカウント作成する手間を考えても、これが一番分かりやすく早いです(笑)
Atomのよく使うショートカット
人によってよく使うショートカットは違うと思いますが、僕がよく使ってて「便利~」っていうものをピックアップして紹介します
一行選択
Windows | Ctrl + l |
Mac | command + l |
一行削除
Windows | Ctrl + Shift + k |
Mac | control + Shift + k |
インデント(複数行一斉に可能)
追加
Windows | Ctrl + ] |
Mac | command + ] |
削除
Windows | Ctrl + [ |
Mac | command + [ |
タブ閉じる
Windows | Ctrl + w |
Mac | command + w |
マークダウンプレビュー機能
Atomにはマークダウン機能が初めから入っており、プレビューを見ることもできます
注:マークダウンとは簡単に見出しやリストやコードを含むテキストを作成できる記法です
プレビュー表示
Windows | Ctrl + Shift + m |
Mac | command + Shift + m |
おすすめパッケージ
パッケージというのは追加でAtomにインストールして、機能を拡張するものです(よく言うプラグインと同じ意味合い)
マークダウンをPDFに変換
拡張機能:マークダウンで作ったテキストをPDFに変換できます
メニューから「Packages → Setting View → Open」 を開く

開いた画面の左メニューの「Install」を選択し、「markdown-pdf」というパッケージを検索してインストールする

インストール後はメニューから「Packages → Markdown to PDF → Convert」を選択すると、その時開いてるファイルがPDF化される
ちなみに「Ctrl + Shift + c」のショートカットでも変換可能です
HTML閉じタグ自動入力
拡張機能:HTMLの開始タグを打つと自動で閉じタグが入力されます
メニューから「Packages → Setting View → Open」 を開く

開いた画面の左メニューの「Install」を選択し、「autoclose-html」というパッケージを検索してインストールする
(下記画像ではインストール済み)

インストール後は左メニューの「Packages」から設定を変更したり削除したりできます
************************************
以上が便利エディターAtomの導入とショートカットの軽い紹介でした
ショートカットは他にもたーくさんあります
Atomは非常に使いやすい優れモノなので、エディター悩んでる方はぜひ使ってみてください
それでは、また