tags

[1]
[4]
[1]

タグ「Atom」での検索

エディタ Atom のアンインストール(再インストール)

エディタ Atom の再インストールを行いたく、まずアンインストールを行う。

アプリケーションフォルダの Atom を削除
rm -rf ~/.atom
rm /usr/local/bin/atom
rm /usr/local/bin/apm
rm ~/Library/Preferences/com.github.atom.plist
rm -rf ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom

No.116
04/21 14:34

edit

Atom

エディタ Atom で複数の環境でパッケージを自動で同期させる

MacとWindows 両方でAtomを使用している時など、パッケージをいちいちダウンロードするのが面倒です。 そこでアカウントを作って同期させる(半手動)と便利です。

1. まず apm コマンドをインストールする

Atomを起動してから

【Atom】→【Install Shell Commands】を実行

2. Atom アカウントの作成

https://atom.io/ からアカウントを作成してログインする。(GitHubアカウントがある場合はそのままログインできる。)

3. 現在インストール済みのパッケージ全てにスターを付ける

apm stars --install

これを実行すると、 Token を入力するよう促される。 Token は https://atom.io/account に表示されるのでこのページに移動してコピペ。

4. 新しい環境のAtomにパッケージをインストールする

コマンドラインから

apm stars --install

とすると、スターのついたパッケージがすべて一括インストールされる。

参考 : http://goo.gl/9RlfLT


No.94
10/07 10:31

edit

Atom

エディタ Atom の便利なおすすめパッケージ一覧

Atom

プログラミング、WEB制作や文書作成に使いやすいフリーソフトのエディタ Atom。

● エディタatomのメニューを日本語化する

【Preferences】→【Install】→【japanese_menu】をインストールすると日本語になります

● bracket-matcher

対応する括弧やHTMLタグを光らせたり、ctrl + M で対応する括弧に移動したり、cmd + ctrl + M で対応する括弧内をすべて選択したりできます。

● autocomplete-paths

ローカルのファイル名の入力補完をしてくれます。

● atom-html-preview

HTMLファイルを編集中にライブプレビューします。 ctrl + shift + H で起動します。
https://atom.io/packages/atom-html-preview

● pigments

CSSカラーコードの背景色をその色で表示します。

● autoprefixer

CSSのベンダープレフィックスを自動で追加・削除してくれます。

● EditorConfig

「プロジェクト」「拡張子」ごとにタブ幅や後ろの空白行を制御する .editorconfig に対応できるようになります。

● ighlight-selected

ある単語を選択すると同じ単語をハイライト表示します。

● script

ほとんどのプログラミング言語を即座に実行します。(セーブも必要なし)
画面右下のモードを実行したい言語に設定して cmd + A で実行します。

● show-ideographic-space

全角スペースを表示します。 インストール後にメニューの  【Atom】→【スタイルシート】から style.less を開いて

atom-text-editor::shadow {
  .highlight.ideographic-space {
    .region:after {
      color: #800000;
      background-color: #CCCCCC;
    }
}

で、好きな色に設定できます。

● Sublime-Style-Column-Selection

option を押しながらドラッグで矩形選択ができます。 # ● atom-alignment https://atom.io/packages/atom-alignment 複数行を選択して ctrl + cmd + A を押すと = の位置を揃えてくれます。 ``` var english = 'test'; var japanese = 'テスト'; ``` # ● tablr ATOMでCSVファイルをエクセルのように編集できる。便利です。 # ● linter https://atom.io/packages/linter プログラムのエラーをリアルタイムで表示します。プログラムごとに以下のパッケージを追加でインストールします。 - [linter-jshint](https://atom.io/packages/linter-jshint)(JavaScript , JSON 用) - [linter-php](https://atom.io/packages/linter-php) (PHP用) - [linter-ruby](https://atom.io/packages/linter-ruby) (Ruby用) - [linter-csslint](https://atom.io/packages/linter-csslint) (CSS用) - [linter-htmhlint](https://atom.io/packages/linter-htmlhint) (HTML用) # ● atom-beautify https://atom.io/packages/atom-beautify HTMLやJavaScriptからPHP,Rubyなどほとんどのソースをきれいに整形できます。 - ctrl + option + b
  • メニューの【Packages】>【Atom Beautify】>【Beautify】

PHPでコード整形をするには php-cs-fixer.phar http://cs.sensiolabs.org が必要です。

● symbols-tree-view

プログラムソース記述時に関数やメソッド、変数の一覧を表示します。

  • ctrl + option + o

 

● minimap

画面右にファイル全体のミニマップを表示する

● minimap-highlight-selected

minimapに「highlight-selected」結果を表示する

● minimap-bookmarks

minimapにブックマークをを表示する

● minimap-find-and-replace

minimapに検索結果を表示する

● minimap-autohide

スクロール時にのみminimapを表示させる

 

● tag

https://atom.io/packages/tag

HTML入力時に <div> を入力した後 < を入力したタイミングで自動でタグを閉じてくれます。

● emmet

https://atom.io/packages/emmet
HTML入力支援

div>div

と記述して TAB キーを押すと

<div>
  <div></div>
</div>

に展開されます。
http://docs.emmet.io/cheat-sheet/

他にも以下のようなショートカットがあります。

CommandDarwinLinux/Windows
選択した複数の行を1行にまとめるshift + + mctrl + shift + m
対応するタグに移動するctrl + alt + jctrl + alt + j
Expand Abbreviationtab or shift + + etab or ctrl + e
Expand Abbreviation (interactive)alt + + enterctrl + alt + enter
Wrap with Abbreviationctrl + wctrl + alt + w
Balance (outward)ctrl + dctrl + ,
Balance (inward)alt + dctrl + shift + 0
Next Edit Pointctrl + ctrl + alt +
Previous Edit Pointctrl + ctrl + alt +
Select Next Itemctrl + shift + ctrl + shift + .
Select Previous Itemctrl + shift + ctrl + shift + ,
Toggle Comment + /ctrl + shift + /
Split/Join Tagshift + + jctrl + shift + `
Remove Tag + 'ctrl + shift + ;
Evaluate Math Expressionshift + + yctrl + shift + y
Increment Number by 0.1ctrl + alt + alt +
Decrement Number by 0.1ctrl + alt + alt +
Increment Number by 1ctrl + alt + + ctrl +
Decrement Number by 1ctrl + alt + + ctrl +
Increment Number by 10ctrl + alt + + shift + shift + alt +
Decrement Number by 10ctrl + alt + + shift + shift + alt +
Reflect CSS valueshift + + rctrl + shift + r
Update Image Sizectrl + ictrl + u
Encode/Decode image to data:URLctrl + shift + ictrl + '
Update Tagctrl + shift + uctrl + shift + '

No.87
09/04 17:01

edit

Atom

エディタAtomの簡単な使い方

Atom(無料)

https://atom.io

エディタ「Atom」は実はプログラムをさほど書かないライトユーザー向けにもいいのではないかと思うので 簡単な設定方法を書いておきます。 Atomを実行したら最初に次のようにするといいでしょう。

1. 画面テーマを明るい色にする

メニューの【Atom】>【Preferences】>【Themes】から『Atom Light』を選択する

2. メニューを日本語化する

メニューの【Atom】>【Preferences】>【Install】から『Localization』をインストールする。
インストール後に再起動し、メニューの【Package】>【Localization】の『Setting』のところに
Current Languageの項目があるので【Japanese】と入力してAtomを再起動

Markdownのプレビューを表示するには

[command] + [shift] + p を押して preview と入力すると
『Markdown Preview: Toggle』と表示されるのでそれをクリック

参考:http://goo.gl/bai5xR


No.70
09/11 13:48

edit

Atom