プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【高機能エディタ】 ATOMが一番使いやすいかもしれない

  • 2017年6月29日
  • 2017年7月29日
  • html/css
  • 552view
  • 1件

ATOMについて

エディタは自分が使いやすいと思ったものが結局一番だが、TeraPadやさくらエディタ、Bracketsなどいろいろ使ってみた結果、GitHubが開発した無料のテキストエディタ【ATOM】が一番しっくりきた。簡単に使い方などをメモ。

ダウンロードから基本設定、基本操作まで

ダウンロード

https://atom.io/

日本語化

File>>Setting>>Install
「Japanese-menu」と入力してPackagesボタンをクリックでパッケージを検索
検索されたパッケージ「japanese-menu」をInstallボタンを押下
(Installでパッケージのインストールと有効化も行われる)

ソフトラップの設定

ファイル>>環境設定>>エディタ設定
ソフトラップにチェックを入れる
標準の【文字列がウィンドウの幅を超えた時は横スクロールさせて表示】設定を、【折り返して表示】させるように変更。

制御文字を可視化

ファイル>>環境設定>>エディタ設定
不可視文字を表示にチェックを入れる
Tabやスペース、開票の編集記号を見えるように設定

・参考サイト
http://creating-homepage.com/archives/786

Markdownプレビューを表示させる

リアルタイムでプレビューを見ながら書くことができる
【Ctrl + Shift + M】で表示

・参考サイト
http://qiita.com/tbpgr/items/989c6badefff69377da7

ATOMをさらに使いやすくするための設定

とりあえず覚えておくと便利なショートカットキー

ctrl + Shift + P コマンドパレットを開く
Ctrl + W タブを閉じる
Ctrl + Shift + T 閉じたタブを再度開く
Ctrl + \ ツリーViewの表示・非表示
Ctrl + F 現在のタブから検索
Ctrl + Shift + F プロジェクト内から検索
Ctrl + L 一行選択(押下回数に応じて複数行選択可)
Ctrl + Shift + D 行の複製(押下回数分複製できる)
Ctrl + ↑or↓ 行の入れ替え
Ctrl + クリック マルチカーソルの使用
Ctrl + D 選択した文字を一括編集
Ctrl + U 選択を解除

その他操作方法

・参考サイト
ペインやキーバインドの設定など詳しく解説されている
https://eng-entrance.com/atom-editor
ショートカットキーなどについても詳しく解説されている
http://commte.net/blog/archives/6213

おすすめのパッケージ設定

>> atom-color-highlight
カラーコードの色をエディタ上に表示してくれる
>> color-picker
ATOMエディタ上にカラーピッカーを表示してくれる
>> atom-html-preview
HTMLファイルをその場でプレビュー
>> file-icons
コードの種類ごとに違うアイコンを表示してくれる

・参考サイト
http://www.creative-web.co.jp/blog/design/1167/ https://tech-camp.in/note/1079/