ページ

ラベル Atom の投稿を表示しています。 すべての投稿を表示
ラベル Atom の投稿を表示しています。 すべての投稿を表示

2016年7月27日水曜日

Atomまとめ5 - おすすめパッケージ紹介 -


最近のAtom環境ですが、フロントエンドの画面周りの開発時などで
個人的にかなり捗るとベストな環境を発見したので晒してみたいと思います。

オススメなパッケージ組み合わせ

いつもRailsやPhoneGap-CLIなど開発する際には、livereloadさせながら
htmlやcss,javascriptなど実装してるんですが、そういう場合に
この3つのパッケージを入れとくと凄く捗ります😄

👇実際に使ってる様子です
gif
browser-plus
前回も紹介しましたが、さらにlivereloadを有効にするには
このアイコンをクリックします。
emmet
既に使ってる方もいるとは思いますが、例えば・・・
<div id="hoge"><a href="" class="fuga"></a></div>
と書きたい時に
div#hoge>a.fuga
と書いてタブを押せばhtmlに展開してくれます🌟便利

platformio-ide-terminal
結構ターミナル系のパッケージ色々試しましたが、
WindowsとMac両方そつなく使えるのを探していたら
platformio-ide-terminalに出会いました
使い方はシンプルでエディッタ下部の+を押すとターミナルが出現します。
また複数ターミナルを開けるので便利です。
gif
By - 0 件のコメント:
ラベル:

2016年2月11日木曜日

Atomまとめ4 - 自分流カスタム -


久しぶりのAtomネタです
最近の入れてるパッケージやstyle.lessを晒してみたいと思います。

↓現在のAtomを使ってる様子。
gif

パッケージ

現在インストールしているパッケージは以下の4つです。
あんまし入れすぎると重くなるので、よく使う5つに絞って入れてます。
  1. minimap
  2. minimap-hide
  3. highlight-selected
  4. browser-plus
  5. file-icons

minimap & minimap-hide
パネル内の左右どちらかにミニマップを表示します。
minimap-hideはパネル分割時にアクティブじゃない方のミニマップを
非表示にしてくれます。

highlight-selected
選択したキーワードをハイライトしてくれます。
自分は置換文字を選択する時にこれでハイライトにして、
command + dで選択してます。結構便利です。↑のgifで実践してます。

browser-plus
パネル内にブラウザを表示させ使うことができます。
調べながら書き物する時などに便利です。

file-icons
ファイルのアイコンの見た目をゴージャスにしてくれます。

style.less

Settings > Theme > your stylesheet を選択するとAtomの見た目を
カスタマイズできるstyle.lessが編集できます。
※ lessはスタイルシート(CSS)を動的に使えるようにしたものです
現在は↓の設定にしてます。
// 全体のフォントサイズ
* {
  font-size:14px;
}

// Markdownプレビュー時のリンク貼ってる所を見やすくなるよう追加
.markdown-preview {
  a {
    &:link { color: #1F90FF; }
    &:visited { color: #DCDCDC; }
  }
}

// 左右のパネル分割で現在アクティブなパネルが分かるように
// 明暗をつける
.vertical {
  .pane {
    opacity:0.70;

    &.active {
      opacity: 1.0;
    }
  }
  // パネル分割時の境界線を色つきにする
  .panes .pane-row > *,
  .panes .pane-column > * {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }
}
By - 0 件のコメント:
ラベル:

2014年12月29日月曜日

Atomまとめ 3 - Atom Runner導入 -

その場でスクリプトを実行してくれる「Atom Runner」パッケージを入れてみる

普段使うRubyも対応しているのでよさげ^^


















Ctrl + Rでスクリプトを実行できる。
ただ、ファイルを保存して何のスクリプトかわかるようにしてやらないと実行できない。
選択した箇所だけ実行できるようだが、自分の環境ではできないorz


次に、直接ターミナルを使えるAtom Term2を入れてみる


$ apm --version
apm  0.116.0
npm  1.4.4
node 0.10.33
python 2.7.6
git 1.9.3
$ apm install term2
Installing term2 to /Users/{ユーザ名}/.atom/packages ✗

> pty.js@0.2.4 install /private/var/folders/6b/7v871n_x0273ts_v950blc8m0000gn/T/apm-install-dir-1141129-20445-xi9xij/node_modules/term2/node_modules/pty.js
> node-gyp rebuild

  CXX(target) Release/obj.target/pty/src/unix/pty.o

・・・いきなりエラーがっ><
↑を参考に再インストール

$ apm install term2
Installing term2 to /Users/{ユーザ名}/.atom/packages ✓
$ 
無事にインストールでけました。


















Ctrl + Alt + t で新規タブにカレントディレクトリのターミナルを表示
Ctrl + Alt + → で分割ウィンドウにターミナル表示

ん〜いい感じ^^ これはRailsの時なんかに使えそう^^

By - 0 件のコメント:
ラベル:

2014年10月13日月曜日

Atomまとめ 2 - Markdown -

パッケージ追加とMarkdownを使ってみる。

・パッケージ追加
    Hex・・・ファイルをヘキサ形式で見れる
 


















やり方としては、Packages > Hex Viewでみれる。

・Markdown記法
    今までこのブログを書く際は、直接書いていたがAtomでMarkdownで書いたものを
    使用してもいいかも。
    参考サイト http://kojika17.com/2013/01/starting-markdown.html


 

















コード等を書く際に便利なpreタグを挿入してくれるのが良い^^

↓Markdownで書かれたものをコピーしてみた

Markdown


> code

a

  • a
  • b
  • c
    1. d
    2. e
a
b

b


次からこれを使って書くばい^^

By - 0 件のコメント:
ラベル:

2014年8月13日水曜日

Atomまとめ 1 - インストール & 設定 -

MacでのエディッタをAtomに決定!!

Macで使用するエディッタを点々と変えて使ってきましたが、イマイチこれという
エディッタに出会いませんでしたが、Atomは何か良さそう。

Atom







インストール後に行った設定まとめ。

1. テーマ変更
    UI ThemeをSeti-uiにSyntax ThemeをVisual Studio Darkに変更

↓こんな感じ



















2. Packageの追加
    Color-pickerとautocomplete+とOpen terminal hereを追加

キーボードショートカットまとめ

よく使いそうなやつ。
Markdown Preview                        : control + shift + m
Developer Tool                               : option + command + i
行の先頭                                        : command + ←
行の末尾                                        : command + →
パネルの分割                                : command + k の後に上下左右キー
パネルの移動                               : command + k の後に command + 上下左右キー

とりあえず、こんな感じ。

By - 0 件のコメント:
ラベル:
登録: 投稿 (Atom)