テキストエディタの Atom ではシンタックスハイライトを変更することができます。 定番のテーマから人気キャラを用いたテーマ、インストール数の少ない隠れた良テーマまで紹介していきたいと思います。 2016年12月12日追記） part2も出ました！よかったらこちらもご覧ください。 niisi.hatenablog.jp 目次 目次 入れておいて損はない人気の定番テーマ 気分を変えたい時に使いたい中堅テーマ 人気アニメや映画をイメージしたキャラテーマ 知らない人も多い？隠れたテーマ 実用性はいかに？かなり奇抜なテーマ おわりに 2016年10月13日追記 入れておいて損はない人気の定番テーマ インストール数が多い人気の定番テーマはこちら！ monokai 超有名なカラーテーマですね。黒背景にはっきりした色分け。非常に見やすくて使いやすいです。 多くの派生テーマが存在しその人気ぶりがうかがえま

Atom はカーソルがある行の末尾のホワイトスペースを削除してくれない。 どういうことか 行を編集しているときにうっかり保存しちゃった場合に備えてこうしてあると思うんだけど、自分の場合だとこれはうっかりスペースを残してコミットしちゃうことにつながっていたので解決したくなった。 解決法 Atom はホワイトスペース系の処理を whitespace で行っている。このパッケージはデフォルトで入っているパッケージで、このパッケージの設定で解決できる。 Preferences... > Whitespace > Settings > Ignore Whitespace On Current Line のチェックを外す。 まとめ よかったー

アーキテクチャから新しい！ 初めてのエディタには、21世紀生まれの「Atom」がおすすめ【続・若手エンジニア向けエディタ実践入門】 Atomは、「A hackable text editor for the 21st Century」と公式のコピーにあるように、21世紀に誕生した新しいエディタで、アーキテクチャも新しくて魅力的なものになっています。 みなさんお久しぶりです、再びエンジニアHubに帰ってきました大竹智也（@tomoyaton）です。前回はEmacsの記事1をお届けしましたが、今回はAtomというエディタの記事をお届けします（次はVimかもしれませんね）。 Atomは、WebエンジニアにはおなじみのGitHubが開発しているテキストエディタです。公式のコピーに「A hackable text editor for the 21st Century」とあるように、21世紀に誕生し

ツールバーを追加する: Atom Tool Bar(tool-bar) / Flex Tool Bar(flex-tool-bar) Atom Tool Barパッケージは Atom にツールバーを実装し、好きなボタンを追加していくことができます。 便利ではありますが、ツールバーの編集の際にコードを書く必要があるため、扱いづらいのが難でした。 それを解消するべく、JSONファイルを使ってボタンを編集できるようにしたのがFlex Tool Barパッケージです。 Atom Tool Bar Flex Tool Bar 利用するには、設定画面から tool-bar 、flex-tool-bar をそれぞれ検索し、両方のパッケージをインストールしてください。 Atom を再起動すると、コンテンツカラム上部に次のようなツールバーが表示されます。 デフォルトでツールバーの設定ボタンが追加されています

Remote-FTPパッケージのインストール Remote-FTPパッケージ は Atom から直接 FTP 接続してファイルをアップロードしたり、ダウンロードするための機能を提供します。 まずは環境設定画面（[Ctrl] + [,]）から Remote-FTP を検索し、検索結果に表示された Remote-FTP パッケージをインストールしてください。 Remote-FTPパッケージの設定 次に接続の設定を行います。 接続の設定は1接続のみなので、複数のサーバを切り替えて使いたい場合は切り替えるたびに設定を書き換える必要があります。 接続の設定はAtomのメニューから[パッケージ]-[Remote-FTP]-[Create SFTP config file]を選択します。 FTP接続の場合は[Create FTP config file]の方を選択します。 メニューを選択するとデフォルト

CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav

CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav

最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入方法を紹介したいと思います。 ESLintとはESLintは、2013年6月にNicholas C. Zakas氏によってオープンソースプロジェクトとして公開されたJavaScriptの構文チェックツールです。個別にルールをon/offできたり、独自のカスタムルールを設定できたり、公開されている様々なプラグインを組み込んで使うことができたりします。 ESLin

はじめに 今までWindows環境でatomでプログラムを書いてCygwinで実行していたのですが、 エディタ ↓ ターミナルで確認 ↓ エディタ ↓ ターミナルで確認 と、いちいち切り替えがめんどくさかったのが atomにCygwinを移植することで楽になったのでメモとして残します。 使用するターミナル atomにターミナルを移植するパッケージで有名なのが "terminal-plus" ですが、atomを最新バージョンにすると動かなくなったという 報告があります。 https://github.com/jeremyramin/terminal-plus/issues/201 そこでterminal-plusを似せて作った"platformio-ide-terminal"がIssue内で紹介されているのでそちらを使うことにしました。 platformio-ide-terminalのインス

はじめに uncrustifyは、ソースコード整形のためのツール。 今回は、プリプロセッサに関する設定について、まとめて記載する。 これだけは、注意をしておこう。 uncrustifyでプリプロセッサをインデントさせるなら、「#pragma onceとインクルードガードは併用するな」 #pragma once #ifndef __FOO_BAR_HPP_INCLUDED__ #define __FOO_BAR_HPP_INCLUDED__ #include <iostream> /* こんなふうにインデントされてしまうぞ */ #endif // __FOO_BAR_HPP_INCLUDED__

CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav

> でネストを作成 > を使って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>

1つずつインストールする パッケージを1つずつインストールする操作を説明しましょう。ここでは、例として「web-search」をインストールしてみましょう。 （1）「ファイル」をクリックし、「環境設定」をクリックします。 （2）「インストール」をクリックし、「web-search」と入力して、「パッケージ」をクリックします。 （3）「web-search」の「Install」をクリックします。 インストールが完了すると、以下のように表示されます。 一括インストールする 次は、複数のパッケージを一括インストールする方法を説明します。この手順のとおりに操作すると、この記事で紹介されているパッケージをまとめてインストールできますよ。まずは、インストールするパッケージ名を記載したテキストファイルを作成します。 （1）「ファイル」をクリックし、「新規ファイル」をクリックします。 （2）以下の内容を入

はじめに 私の端末はHTTP及びHTTPS以外は通さないプロクシを通さなければ外部に出ることが出来ない。 基本的にはHTTPとHTTPSで事足りるのだが、今回このプロクシのせいでscriptパッケージがインストールできなくなってしまった。 恐らく私と同じような問題に悩む方はそう多くはないと思うが、日本語で情報を残す。 2016/04/13 Update 正しい解決方法が判明したので編集した。 前提条件 Windows 7 32bit版 Atom 1.6.2 HTTP及びHTTPS以外を通さないプロクシが立ちはだかっている gitインストール済み 環境変数HOMEをUSERPROFILEと別の場所に設定 ← 非常に重要 発生した問題 $ apm install script Installing script to C:\Users\fkfk\.atom\packages failed np

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に搭載されるので、アプリケーシ

はじめに Uncrustifyというツールは、ソースコード整形ツールの一つだ。 人気があるという点では、Artistic Style (AStyle)というコマンドラインツールが一番人気があるようだが、それはそもそもUncrustifyがあまりにも不親切にパワフル過ぎるからであると考えている。 今回はインデント設定である。ソースコード整形ツールは、Formatter、Beautifierなどとも呼ばれるとともに、Indenterとも呼ばれる。それほどにインデントというのは重要な設定なわけである。 ちなみに、uncrustifyの中では「インデント (indent)」という用語と「位置揃え (align)」という用語がある。インデントというのは、制御ブロック '{' と '}' で囲まれた中の段を深くすることである。位置揃えというのは、インデントと似ているが、行送りの後に段を深くすることとし

atom-beautifyの導入 atom-beautifyの詳しいことは https://atom.io/packages/atom-beautify を見てください。とりあえず個人設定からインストールしちゃいましょう。 ショートカットキーは[Ctrl]+[Alt]+bです。早速やってみましょう...... Could not find ‘uncrustify’. The program may not be installed. はい、エラーが出ました。uncrustifyなるプログラムが必要なようです。ダウンロードしてインストールしちゃいましょう。 http://sourceforge.net/projects/uncrustify/files/ のhogehoge-win32.zipというファイルをダウンロードして解凍します。2016年2月6日時点ではver.0.62.0が最新なの

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/

Atom＋C言語ではなく、コンパイラ（gcc）だけをインストールしてコマンドプロンプト（Windowsの場合） or ターミナル（Macの場合）を使うというシンプルなパターンもあります。 [Win/Mac][超初心者向け]C言語の開発環境の初歩の初歩、シンプルな開発環境を作って使う むしろ、初心者の方には↑をオススメします。 WindowsでC言語の環境を手軽に作るには？ と思い、調べていました。 C言語を教えるにあたり、簡単にC言語のプログラミング環境を作れる方法が必要なのです。 なので無料がいいのです。 Visual Studio は重たいのであまりオススメしたくない。 Eclipse でもいいんだけど、ボタンが沢山あると、初めてプログラミングする方はちょっととまどうかも知れないなぁと。 できればエディタだけでコンパイルや実行ができればいいなぁと考えていました。 Emacs でならそう