かざんぶろぐ

だらだらと備忘録とってます

Atomを使いだした時のメモ

Atomを使いだしたので、その時のプラグインなど諸々設定に関する超個人的な備忘録。

環境はMacBook Air(バージョン10.11.6)で構築する。

 

参考にさせていただいたサイトはこちら

コーディング作業を加速するAtom活用法 - satoyan419.com

【Atom】開発が10倍捗る!おすすめ設定・パッケージ・ショートカットをご紹介 | TECH::NOTE | プログラミングをはじめる全ての人に

Atom の minimap をより便利にするパッケージ達 | Lonely Mobiler

 

インストール

とりあえずダウンロードサイトからインストール。 

 

簡単な設定

まずは言語を日本語に設定する。

必要ない人も多いかもしれないが、なんせ英語に苦手意識のある自分なので、必須な設定である。

最初のパッケージインストールなので詳しく説明する。

 

macの場合[command]+[ , ]、Windowsの場合[Ctrl]+[ , ]でSettingsというタブが表示される。

そしてその中の「Install」を選択すると、

f:id:okuya-KAZAN:20170424152348p:plain

このように、パッケージの検索エンジンが出てくるので、ここに欲しいパッケージを入力するといった具合だ。

今回はエディタ内の言語を日本語に設定する「japanese-menu」というパッケージをインストールする。

f:id:okuya-KAZAN:20170424152714p:plain

右下の「Install」というボタンを押せばインストールができ、エディタ内は日本語化される。

 

続いて、おしゃれにフォントをRicty Diminishedに変えてみようかと。

先ほどと同様にSettingsを開き(日本語に設定した場合は設定)

その中の「Editor」を開くとあるフォントの欄にRicty Diminishedと入力

f:id:okuya-KAZAN:20170424151559p:plain

ただ、Ricty Diminishedをフォントに使う場合、ネットからこのフォントをインストールしてこなくてはならない。

詳しいやり方はこちらにわかりやすく書いてあった。

creating-homepage.com

フォント変更後

f:id:okuya-KAZAN:20170424160515p:plain

うん!悪くない!

 

次はラップの設定。

ペインの端までコードが来たら、折り返すようにする。

設定のEditorの中のソフトラップにチェックを入れる。

「ソフトラップ時のインデント幅」の欄で折り返した際のインデント幅を設定することができる。

自分的にはペインの端までコードが来た場合に折り返しをしたかっため、

Wrap Guide(折り返しの目安線)はいらないので消した。

方法としては、こんな感じ

f:id:okuya-KAZAN:20170424162140p:plain

「Packages」の中の、インストール済みのパッケージでwrap guideと検索してヒットしたコアパッケージをDisableにする。

こうすることで、エディタ内右端にある縦線が消える。

 

テーマの変更

エディタの見た目(テーマ)を変えてみる。

見た目がかっこいいとテンションが上がって、コーディングが捗ると友達が言っていた。

今回は「monokai」というテーマを採用することにした。

まずは、テーマのインストール

設定画面の「Install」の中の検索エンジンで「Themes」を選択して、「monokai」で検索し、インストール

f:id:okuya-KAZAN:20170424164012p:plain

 

続いて、テーマの設定。

設定画面で「Themes」を選択し、Syntax Themeを「monokai」に設定すれば完了。

さらにインターフェーステーマも「atom-material-ui」に変更した。

やり方は同じで、「Install」でインターフェーステーマをインストールし、設定画面の「Themes」で設定。

f:id:okuya-KAZAN:20170424164925p:plain

 

テーマ変更後

f:id:okuya-KAZAN:20170424165043p:plain

うん!悪くない!(2回目)

 

プラグイン

便利だと思ったプラグインをメモしておく。

プラグインのインストールは先ほど説明した通り、設定画面の「Install」からできる。

[ atom beautify]

ソースコードを整形してくれる。

エディタ上で右クリックをして、”Beauty editor contents”を押すか、

ショートカットキー、[Ctrl]+[Alt]+[b]で整形してくれる。

ただ、Pythonのコードを整形する時に、autopep8をインストールしていないと、

「Could not find 'autopep8'. The program may not be installed.」

とエラーメッセージが出る。

ターミナルで、[pip install autopep8]と打ってインストールすれば解決。

[autoclose-html]

HTMLの閉じタグを自動で挿入してくれる。

 [atom-html-preview]

HTMLドキュメントをタイプすると、そのプレビューを即座を表示してくれる。CSSJavaScriptにも対応。

[Ctrl]+[Shift]+[ h ]で新しくペインを作成し、そこいんプレビューを表示。

[auto-encoding]

エンコードを自動変換してくれる。

Atomはデフォルトだと自動エンコーディングをしてくれいないらしく、WindowsMacを行ったり来たりしてる自分にとってはありがたい。

[atom-runner]

[Ctrl]+[ r ]でスクリプトの実行が可能。[Ctrl]+[Shift]+[ c ]で実行中止。 

[autocomplete-paths]

パス名を自動補完してくれる。ファイルのパスを指定する時などに便利。

[browser-plus]

Atom内でブラウザを開いて、プレビューできるようにしてくれる。

右クリックして「Open browser-plus」を押すか、[Ctrl]+[Alt]+[ o ]のショートカットキーで起動。

f:id:okuya-KAZAN:20170425133055p:plain

[bracket-matcher]

HTMLなどで、対応するタブをハイライトしてくれる。

[file-icons]

コードの種類ごとにアイコンが変更される。

[highlight-selected]

単語を選択すると、ファイル内の同じ単語がハイライトされる。

単語の検索をいちいちしなくて良くなる。

[japanese-wrap]

デフォルトの設定では上手くいかない日本語の折りたたみを上手くやってくれる。

[line-jumper]

1度に数行移動まだは数行選択できる。何行移動するかは自分で設定できる(defaltは10)。

[Alt]と一緒に矢印を押すと数行移動。

[Alt]+[Shift]と矢印で数行選択。

[local-history]

エディタの変更履歴を取っといてくれる。

gitでこまめにcommitしてれば問題ないのだが、自分の性格上保険として...

エディタ上で右クリックを押すと「Show the history of the current file」という項目が出るので、こちらをクリックすると過去保存履歴が出てくる。

[minimap]

Sublime-textにデフォルトで搭載されている機能であり、ソースコードの長さが把握できたり、クリックすれば、指定の場所にジャンプできたりと、何かと便利。

画面の右に写ってるやつ↓↓

f:id:okuya-KAZAN:20170424191819p:plain

[minimap-autohide]

スロール時以外は、minimapを自動的に隠す。

エディタを広く使えるのがメリット。

[minimap-git-diff]

git diffの結果をminimap上にも表示してくれる。

[minimap-highlight-selected]

単語を選択すると、ファイル内の同じ単語がハイライトされる機能を、minimapにも適用してくれる。

[open recent]

これは意外に便利。上のメニューバーから「ファイル」を選択すると、

「Open Recent」というメニューが出てくるので、そこから最近開いたファイルとそのファイルのPathを参照できる。

[project-manager]

プロジェクトの管理ができる。

上のメニューバーの「パッケージ」の中の「Project Manager」を選択することで、プロジェクトの登録などの管理操作を行える。

[Command]+[Ctrl]+[p] で登録しているプロジェクトを開くことができる。

[platformio-ide-terminal]

Atom上でターミナル(Windowsの場合はPowerShell)が使えるようになる。

プロジェクトツリー内のフォルダ、またはファイルをターミナル上にドラッグすると、ドラッグしたもののパスが出るので、ディレクトリの移動などがかなりラクになる。

また、エディタ上のテキストを選択して、

[Ctrl]+[Enter]すると、選択したテキストがターミナル上に打ち込める。

ショートカットキーは以下の通り

  • [Ctrl]+[ ` ] -> ターミナルを出す、隠す 
  • [Command]+[Shift]+[ t ] -> 新しくターミナルを作成 
  • [Command]+[Shift]+[ j ] -> アクティブにするターミナルを変更 
  • [Command]+[Shift]+[ x ] -> アクティブブなターミナルを削除  

色彩関係のプラグイン

[color-picker]

[Command]+[Shift]+[c]でカラーパレッドを起動し、入力してくれる。

デザインの入力などに重宝するかも。

[pigments]

エディタ上のカラーコード値が表示色でハイライトされる。

ハイライトが嫌な場合、アンダーラインに変えたり、設定変更可能。

f:id:okuya-KAZAN:20170424195626p:plain