Emmetを利用して連番テキストを作る - Qiita
<input type="text" name="hoge1" id="hoge1"> <input type="text" name="hoge2" id="hoge2"> <input type="text" name="hoge3" id="hoge3"> <input type="text" name="hoge4" id="hoge4"> <input type="text" name="hoge5" id="hoge5"> <input type="text" name="hoge6" id="hoge6"> <input type="text" name="hoge7" id="hoge7"> <input type="text" name="hoge8" id="hoge8"> <input type="text" name="hoge9" id="hoge9"> <inp
プログラマーにおすすめのATOMパッケージ
作成：2017/04/3 更新：2017/04/16 Tool > 開発環境 以前、ATOMの基本操作をAtomひと通りの使い方（Windows・Mac編）に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 エンジニア速報は Twitter の@commteで配信しています。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディックスはリンクになっていてクリックで移動できます。 document-outline マウスカーソルを垂直移動させる カーソルを垂直移動させる地味に便利なパッケージ。文章に半角と全角が入っていても綺麗に上下移動します。マークダウンなどで文章を作成する時に。 Atom のカーソル上下移動を改良するパッケージを作った -
ATOMにWebブラウザ機能を追加するプラグイン「browser-plus」
2016年 3月3日 19時10分 7年前 WebデザインやWebプログラミングをしている人はブラウザでの動作確認は必見です。 デザインであればレイアウトが崩れていないか？Javascriptであればテストユニットを使う方法もありますが、DOMが絡んでくるのであれば思った通りの挙動をしているかどうか等。 windowsであれば「alt + tab」、macであれば「command + tab」 のショートカットキーでアプリケーションを切り替える操作に慣れている人も多いのでないでしょうか。 今回は人気のテキストエディタ、ATOMにWebブラウザプレビュー機能を追加するプラグイン「browser-plus」の紹介です。 browser-plusは、ATOM本体にブラウザ( google chrome )が搭載されタブでブラウザを開いてくれるプラグインです。ATOMに搭載されるので、アプリケーシ
ATOM 全角 スペース highlight - Qiita
ATOM 全角 スペース highlight Tips と言っても、既に全角スペース表示プラグインが作られていました。 ソレを利用するだけです。 show-ideographic-space 全角スペースを□で表示してくれるプラグイン これを使って全角スペースを□に可視化します。 しかし、もっとくどい位に highlight したい！そう思っていた頃もありました。 ということでその頃の思いを胸に全角スペースの背景色もカスタマイズしてしまいましょう。 Atom起動 > File > Open Your Stylesheet
Atomがめっちゃ便利に！ Web制作者が絶対入れたいプレビュー系アドオン7選
人気エディターAtomをもっと使いやすく、生産性を高めるパッケージの紹介です。プレビュー周りの機能を強化して、コーディングの効率をアップしましょう。 この記事では、コードエディターAtomで使えるパッケージを紹介します。このパッケージを使うと、タイプしながら変更点をプレビューしたり（特にWebサイト開発向け）、エディターからコンソールやIDEに移動せずにコードをコンパイルして実行したりできます。また、メリットについても記しました。 参考：ショートカットのCtrl|Cmdは、Windowsなら「コントロール」キー、OS Xなら「コマンド」キーを指します。 変更点のライブビジュアライズ プログラムのコーディングからビジュアライズ（結果確認）へと移動するのは時間のムダなだけでなく、認知のロスを伴います。つまり、タスクの切り替えにより集中力と精神力が失われるため、生産性が低下するのです（『The
【Atom】作業効率UP！Webデザイナーに特にオススメのパッケージ19選 | KERENOR { ケレンオール }
エディタはDream Weaver→秀丸→terapad→やっぱりDream Weaver→Coda→Sublime Textという流れで使ってきて、最終的にSublime Textに落ち着いたのですが、BracketsやAtomがいいよ！という記事をチラホラ見かけるようになり、Bracketsをちょっと触ってみた後にAtomを試しているところです。 Sublime Text同様、パッケージと呼ばれる拡張機能がたくさん用意されているのですが、とにかく膨大な数で（しかも英語）調べるのも大変なので、有名どころでダウンロード数も多い「Webデザイナーにとって便利なパッケージ」を選んでみました。 この記事はMacを想定して書いていますので、Windowsで使用する場合はショートカットなどをWindows用に変えてください。 オススメのSublime Textのパッケージについては以下の記事でまとめ
Atom をMarkdownエディタとして整備
どちらも、マルチプラットフォームに対応で、共に日本語入力に対応しているものの、Windowsではフォントの表示やその他が非常にお粗末である（OSのせいでしょう）のに対し、Macで使うととても美しいレンダリングで超快適、というところも同じ。日本語を使わなければWindowsでもとても快適です。 コミュニティが作るPackageをインストールすることで機能拡張するという設計思想もまったく同じ。ただし、そのPackageのインストールが Atomのほうが初めから簡単にできるような親切設計になっています。 結論から言えば使い心地はAtomのほうがよいです。 参考 Sublime Text 3をMarkdownエディタとして整備 Packages Packageのインストールは非常に簡単。執筆時点で6,066種類のPackagesが利用可能。 Preferences... > + Install 空
[Mac] Atomの基本的なショートカットキー - Qiita
カーソル位置の単語を選択。または、選択範囲の文字列が次にマッチする箇所を選択して、マルチカーソル状態になる。
![[Mac] Atomの基本的なショートカットキー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ae12606786a69f345cf4ad75b0a31f9ecf39056/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCTWFjJTVEJTIwQXRvbSVFMyU4MSVBRSVFNSU5RiVCQSVFNiU5QyVBQyVFNyU5QSU4NCVFMyU4MSVBQSVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCQyVFMyU4MyU4OCVFMyU4MiVBQiVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBRCVFMyU4MyVCQyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWIwYzM2MzAzM2ZmMTkxOGI1NGE1ZjIxNzRlNmRhYjA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFtYWdoJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lZjVlNTIxZmRkOTU0MDkwNTkwNzI5MzQyMDljNTA5Yg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D75c56c98e3ec5dd138f4422a7b43d6f9)
[追記5個]Atomで使ってるパッケージ32個解説｜蒟蒻思考
Github製エディター Atom に入れているパッケージとテーマをGIFアニメ付きで解説します。 環境 Windows 8.1 x64 Atom 1.5.3（私の環境での安定版は1.5.3までです） パッケージ atom-beautify atom-beautify コードを綺麗にするフォーマッターです。 README にも書いてありますが、インストールするだけでは使用できずエラーが出てしまう言語があります。 例えばC言語ではRequires Uncrustifyとなっている為、SourceForgeからuncrustifyというソフトウェアをダウンロードします。 ダウンロードしたZipを解凍し、フォルダの中にあるuncrustify.exeを「C:/Users/(ユーザー名)/.atom/packages」にコピー後、環境変数のPATHに「C:/Users/(ユーザー名)/.atom/
![[追記5個]Atomで使ってるパッケージ32個解説｜蒟蒻思考](https://cdn-ak-scissors.b.st-hatena.com/image/square/2909f52669e1507370acddfeb6f6404f16b4f38c/height=288;version=1;width=512/http%3A%2F%2Fblog.suginoki.xyz%2Fimages%2FAtom%2Fplugin%2Fminimap.gif)
【超おすすめ！！】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる（※随時更新） - Qiita
この記事を読む前に… Atomの開発終了が発表されました。 良ければ下記記事を参考に別のエディターを使う事をお勧めします。 前置き 【Atom】Web開発者達によるWeb開発者の為のエディターについて 前回の投稿↑で書いた、おすすめパッケージに加えて、おすすめのテーマ、キーバインディング、設定を紹介していきたいと思います！ 下の方に一括インストール用のテキストと、説明を用意したので、気に入って頂けたなら是非それでインストールしてみて下さい。 また、「このパッケージ便利だよー」みたいなのがあれば、是非コメントで教えて下さーい。 (｀･ω･´)b ※最近はRails等のRuby関連の仕事が多いので、これから紹介するパッケージもそっち寄りの物が多いです。 追記： 凄いストックされてるーｗ Σ(´ @ ω @ ｀) ストック、はてブ、ツイート等、皆さん、ありがとうございます！ Atomを使うなら絶
Emmetの使い方 - Atom講座 - [SMART]
> でネストを作成 > を使ってULの中にLIを作成するといったネストが簡単に作成できます。 ul>li 展開後は下記のとおりです。 <ul> <li></li> </ul> + で同階層に要素を作成 同階層に複数の要素を追加したい場合、下記のように記載します。 div>h1+p 展開後は下記のとおりです。 <div> <h1></h1> <p></p> </div> 子要素を含めて作成 UL、SELECTなど子要素がある要素は + で子要素付きで作成することができます。 ul+ dl+ select+ table+ 展開後は下記のとおりです。 <ul> <li></li> </ul> <dl> <dt></dt> <dd></dd> </dl> <select name="" id=""> <option value=""></option> </select> <table> <tr>
![Emmetの使い方 - Atom講座 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
[Atom Editor] 俺の設定とプラグインをさらす - Qiita
最近すっかり Atom 使いになってきたので、設定とプラグインをさらしてみます。他の方のもぜひ見てみたいので、みんなでさらしましょう！ テーマ SublimeText で使ってたのと同じ名前の Flatland Dark Theme と Flatland Dark UI Theme があったのでこれを使っている。 キーマップ キーマップとかは特に変更なし。vim-mode 使ってる。 スタイル 色弱なのでカーソル位置が分かりやすいように Stylesheet は下記のように変更して、検索結果が目立ちやすいようにちょっと派手目に。 .editor { .current-result .region { border-color: green; } .find-result .region { border-color: yellow; } } .editor .cursor { } .vim
![[Atom Editor] 俺の設定とプラグインをさらす - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d1ec54da35af770b81f0f3c0539cd0603c5488fd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCQXRvbSUyMEVkaXRvciU1RCUyMCVFNCVCRiVCQSVFMyU4MSVBRSVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSVBOCVFMyU4MyU5NyVFMyU4MyVBOSVFMyU4MiVCMCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiU5MiVFMyU4MSU5NSVFMyU4MiU4OSVFMyU4MSU5OSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjE1N2JiMzJkZTc5NzhhODk0ODBhNjBmZjY5ZjRjODk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYWdla3RtciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDE4ZjZmZWMxNjIzYzRhYjMzNGI4OTFhMmY1Y2ZkZDA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dee8308b41921956a32cd53761b1728ad)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomでcssのコーディング間違いチェックをするlinter-csslintの使い方