Atomエディタ 初期設定

IT関連

Atom初期設定の覚え書きです。内容はドットインストール様の抜粋+αです。

 

起動直後

起動するとWelcome/Welcome Guide/Telementry Consentなどのタブが開いています。

WelcomeはShow Welcome Guide when opening Atomのチェックを外してXボタンで閉じる。

Welcome Guideはそのまま閉じる。

TelementryはNo,I don’tで閉じておけばいいでしょう。

 

RictyDiminishedのダウンロード&インストール

プログラミングフォントのRicty Diminishedを採用します。

これにしておくと、見やすいフォントというだけでなく、半角スペースと全角スペース、ゼロとオーなどの判別しにくい文字が判別しやすくなります。

具体的には、全角スペースは〇のような記号で表示され、ゼロは0に斜め線が入ったフォントになります。

 

ダウンロードは下記GitHubから行います。

RictyDiminished

アクセスすると緑色のボタンで「Clone or download」というのがあるのでクリックして「Download ZIP」をクリックします。

するとダウンロードが始まりやがて終わります。終わるとZIPファイルを開きます。

RictyDiminishedのフォルダがあるのでそれを開き、その中にある「RictyDiminished-Regular.ttf」をダブルクリックしてインストールします。

後はインストールまで適当に。

 

もろもろ設定します。

設定画面を開きます

設定していくので設定画面を開きます。

Windowの場合は、左上の「File」をクリックし、「settings」をクリックし開く。

Macの場合は、左上の「Atom」をクリックし、「Preferences」をクリックし開く。

 

プログラミングフォントRictyDiminishedを適用する

フォントはインストールしただけなので、Atomで使うように設定しなければいけません。

武器は買うだけじゃなくて装備しないといけないのと同じですね。

Settingsの画面に、「Editor」というのがあるのでそれをクリックします。

「Font Family」のところに、「Ricty Diminished」と手で一字一句間違わずに入力します。

何かファイルを開いて、全角スペースを入力してみて、〇みたいな字が表示されればOKです。

きちんとやったはずがうまく行かない場合はAtomを再起動すると設定が定着するかもしれません。お試しください。

 

字下げや改行を記号を使ってわかりやすく表示してくれる設定

同じく「Editor」タブの真ん中より少し下にある、「Show Invisibles」にチェックを入れる。

これをすると改行した箇所に解りやすく印が付きます。

 

文字を画面端で折り返しさせる設定

同じく「Editor」タブの真ん中より少ししたにある、「Soft Wrap」にチェックを入れる

これをするとウインドウの端で文字が折り返しされます。

これをチェック入れていないとウインドウ枠をはみ出して文字はスクロールしないと見えません。

好みなのでどちらでも大丈夫。

 

Alt+Shift+iキーでインデントを補正できるようにする。

Atomにはネスト構造が見やすいように自動でインデントを入れてくれる機能があります。

しかしたまにおかしいときがあります。それを手動で実行できるようにする設定です。

 

Windowの場合は、左上の「File」をクリックし、「keymap」をクリックし開く。

Macの場合は、左上の「Atom」をクリックし、「keymap」をクリックし開く。

 

keymap.csonというファイルが開くので、下記コードを追記する形で一番下に貼り付けます。

'atom-text-editor':
  'alt-shift-i': 'editor:auto-indent'

貼り付けた後は、「Ctrl」+「S」で保存します。Macの場合は「Cmd」+「S」です。

 

MarkDownPreviewのキー指定をする

上記の設定に続き、keymap.csonに追記する。

'.editor:not(.mini)':
  'ctrl-shift-M': 'markdown-preview:toggle'

MarkDownプレビューは「Ctrl」+「Shift」+「M」でオンオフするのだが、後で導入する「emmet」パッケージを導入すると、そっちにキー設定が持っていかれるので使えなくなる。

それをkeymap.csonに設定することで、そちらを優先する仕組み。

「emmet」を入れないのであれば設定する必要なし。

 

コメントの色を変更する

別記事にしています。デフォルトのコメント色は見にくいので変更したほうが無難です。

Atomエディタ コメントの色を変更する
Atomのコメントの色を変更する方法です。 Atomのコメントはデフォルトでは灰色で見にくいので変更したほうが無難です。目が疲れます。 調べてみるとやり方は簡単に出てきたのですが、ある人はlimeにしていて眩しくて見にくかったり、コメントの...

 

Dotinstall-Paneを導入する

プログラミング学習をするときに愛用しているドットインストールですが、授業動画をみながらコーディングをしたいときが多いです。

そういうときに、Atom画面の半分にドットインストールの授業動画を表示してくれる機能がありますので、必要な場合はそれを入れていきます。

 

Windowの場合は、左上の「File」をクリックし、「settings」をクリックし開く。

Macの場合は、左上の「Atom」をクリックし、「Preferences」をクリックし開く。

「Install」の項目をクリックし、上の方にある「Search packages」の枠に、「dotinstall」と入力すると、「dotinstall-pane」が一覧に出てきます。

「Install」ボタンをクリックしインストールします。

 

emmetパッケージを導入する

emmetパッケージとはWebデベロッパー用のツール。あまり使い道は知らないが、HTMLタグ一式を自動で書ける仕組み。

最初は楽をせず覚えるくらいHTMLは書くべきだけど、時間が無い時は楽に打てるので便利は便利。

 

Windowの場合は、左上の「File」をクリックし、「settings」をクリックし開く。

Macの場合は、左上の「Atom」をクリックし、「Preferences」をクリックし開く。

 

「Install」をクリックし、上の方にある「Search packages」の枠に、「emmet」と入力すると、一覧に表示されます。

あとは「Install」ボタンをクリックしインストールする。

 

後は

初期設定は以上です。別でショートカットキーのまとめもあります。

Atomエディタ ショートカット Mac/Windows
Atomの便利なショートカットの備忘録です。 ファイルの新規作成 Web開発ではエディタを開いているときに新規でファイルを作りたくなることって以外にあります。ショートカット一発でいけるのは楽ですね。 Windows 「Ctrl」+「N」 M...

 

コメント

タイトルとURLをコピーしました