SANOGRAPHIX Blog

京都を拠点に活動する佐野章核 (sanographix) の個人ブログ。日記、webデザイン、読書、写真など。

トップ > Webデザイン > Sublime Text 3からAtomに移ったときの覚書

Sublime Text 3からAtomに移ったときの覚書

Webデザイン
Profile

f:id:sngrpx:20160829194525j:plain

Atom の環境をセットアップした。まえ Sublime Text 3 使っていて、最低限ST3でやれていたことはAtomでもやれるようにできた。そういう感じで1ヶ月くらい経つけど問題なく使えている。

全般

※ショートカットはMac環境です

  • 設定は ⌘ + ,
    • Sublime Textと違って設定のGUIがある
    • フォントサイズとか行間をいじったりした
  • Ctrl+Shift+M でMarkdownをプレビューできる
  • ⌘ + Shift + p でコマンドパレットを開く
    • Sublime Text でもよくやるやつ
  • ⌘ + Option + i でデベロッパーツールが開く（Chrome等と一緒）
  • コンソールで $ atom path/to/filename といったふうに入力するとAtomでファイルを開ける
  • 画面右下で改行コード・文字コード・ファイルタイプを変更できる
    • f:id:sngrpx:20160829185602p:plain

テーマ

テーマは「UI」と「Syntax」に分かれている。このへんは Sublime Textと同じ感じ

  • UI Theme
    • One Dark
      • いくつか試して結局これに落ち着いた
  • Syntax Theme
    • Railscast （5年間くらいずっとこれ）

パッケージ

インストールした Package のリストとその説明です

  • autocomplete-paths
    • パスの自動補完
  • color-picker
    • ⌘ + Shift + C でカラーピッカーを表示する
  • editorconfig
  • file-icons
    • ファイルの種類に応じたアイコンを表示する
  • highlight-line
    • 現在選択している行をハイライトする
  • highlight-selected
    • ダブルクリックで選択した単語をハイライト表示する
  • minimap
    • ミニマップを表示する
  • minimap-git-diff
    • ミニマップで差分のある行が分かりやすくなる
  • minimap-pigments
    • ミニマップにもpigmentsを反映させる
  • open-recent
    • メニューバーに「最近開いたファイル」を追加する
    • 標準でつけてほしい....
  • pigments
    • カラーコードに背景色がついて分かりやすくなる
  • project-manager
    • プロジェクト切り替えを簡単にする
  • tag
    • Sublime Text 感のある閉じタグ補完をする

キーバインド

Settings -> Keybindings に進み、説明文の「your keymap file」を押すと開く。

Ctrl + Tab を押してタブ切り替えたとき、開いた順ではなく左から順に開くようにした。これを見て作業した。

'body':
  'ctrl-tab ^ctrl': 'unset!'
  'ctrl-tab': 'pane:show-next-item'
  'ctrl-shift-tab ^ctrl': 'unset!'
  'ctrl-shift-tab': 'pane:show-previous-item'

スタイルシート

Settings -> Themes に進み、説明文の「your stylesheet」を押すと開く。スタイルは less で書いてある。

コメントのイタリックを無効にする

デフォルトだとコメントアウトがイタリックになって読みにくいので、これを打ち消す。下記に方法が載っていたので、見て作業した。

One Dark UI のフォントサイズを変更する

One Dark のドキュメント にスタイルの書き方が書いてあったので、それをもとにフォントサイズを調整した。

.theme-one-dark-ui {
   .tab-bar { font-size: 12px; }
   .tree-view { font-size: 12px; }
   .status-bar { font-size: 12px; }
}

Markdownプレビュー画面の見た目を調整する

.markdown-preview 以下にネストして書けばよい。僕は自分のブログ（このブログ）の記事本文のスタイルをコピペしている。

.markdown-preview {
     h1 {
         font-size: 170%;
     }
     ...以下省略
}

所感

  • わりと後発のエディタなだけあっていろいろと気が効いてる
    • デフォルト設定のままでも大抵問題なく使える。便利パッケージも色々プリインストールされている
  • 本体のアップデートが頻繁にある。勢いよく開発されている印象
  • Atom出始めの頃は初回起動が結構重い印象だった。現在もやや重いが、一度起動した後は快適
  • スタイルシート自分でいじれて便利
  • 現在のブランチ名が表示されるなどGitHubらしい感じ
記事一覧