less
ATOM
apm

Atomでthemeを自作して登録するまでの備忘録

More than 3 years have passed since last update.

某イカのゲームっぽいsyntax作れそうな気がしてatomに作ったのでざっくりメモ。

基本的なドキュメントはこのへん。

https://atom.io/docs/v0.60.0/creating-a-theme

https://atom.io/docs/v1.0.2/hacking-atom-creating-a-theme


初期化編


普通なやり方

apmというのがあるので、npmと一緒でapm initみたいなことすると良いかなーと思ったけどもうちょっといいやり方あった。

cmd-shift-Pでコマンドパネル開いてPackage Generator: Generate Syntax Themeを選ぶ

font_scss_-__Users_inuscript_github_example-iconfont-scss_-_Atom.png

これで選択した所にテンプレートができてる。

atom-templateというのがgithubに公式っぽくあがっているが、微妙にそっちは古そうだった


既存テーマをベースにするときのやり方

「このテーマ、ここだけなんとかしたい」とか「このテーマをベースにしたい」

という時は、もうちょっと違うやり方がある。

その時はざっくりこんな感じ


  1. githubでベースとなるやつをcloneする

  2. cloneしたリポジトリの名前を変えておく

  3. ローカルにcheckoutする


  4. package.jsonnameを変えておく


    • 同じ名前では多分登録できないか、上書きされてしまう気がする




  5. $apm linkを実行



    • $npm linkとにたようなやつ。


    • ~/.atom/packages/にシンボリックリンクする




起動編

atom --dev . で開く。

既に先ほど作ったsyntaxがインストール済みになっているはずなので、設定からそのsyntaxを選ぶ

(これがわからず最初詰まった)

あとはlessファイルをいじるだけ!


lessいじるときの細かいテクニックとか


Pigmentsプラグインは入れるべき

色を背景に入れてくれるpluginはこれまでにもあったが

こいつはlessの変数までしっかり読み込んでくれる。

マジ便利。


lessのcolor functionは積極的に使う

このあたりの関数とか特に使える


atom --devだと簡単にelementをinspectできる

「あれ、ここの色どういうセレクタで調整するんだ?」ってなったら右クリックすると「Inspect Element」というのが増えている

font-awesome_css_-__Users_inuscript_github_-_Atom.png

chromeみたいにInspectorが開くので、どんなセレクタが有効になっているのかとかわかる。


【欄外】他のthemeをベースにする時のtips

割りとニッチな話。

今回、monokaiをベースにいじった。ベースがしっかりしているのだが、色名が変数化されてないという難点があるので、下記のどっちかをする必要があった。

今回は後者を選んだ。「どの色をどれにあてはめる」かを後で入れ替えたかったりしたため、@pinkなどの変数名だと都合が悪かった。なので全部@color1 @color2などと変数化してあとで置き換える事にした。

atomのPackage Generatorでは、@red,@greenなどの色が最初から定数化されている。

最初はこちらを使ったが、入れ替えの調整しているうちに@redに青色が入ったりしていってわけがわからなくなってしまった。

結果として最初の開発時には番号化してしまうほうがいっそ楽だった。


登録編

だいたいnpmと一緒。



  1. $apm loginする


    • 「APIキーを貼ってね」的なことを言われるので、貼る。




  2. package.jsonのtagにあわせて$git tag登録する


    • npm tagみたいなのはなさそうだった。

    • $apm publish patchみたいなのだけでよかった




  3. $apm publishする



    • repositoryフィールドのurlが間違ってたり、tagが編だったりすると怒られる。



  4. atom上で確認する


結果

できました

青がやたら使いづらくて困っています。