Code Lab

CakePHP/Python/Swiftを勉強中... 好きなことで生きて行く!

完璧なるエディタを求めて!

f:id:natuta:20170218222543p:plain
エディタってプログラマの命だと思うんです。
だからいいものを探さないといけないんです。自分に合ったものをね


エディタの使いやすさや機能の多さによって作業時間が大幅に変わってきますよね。

1時間でHTMLとCSSを使って1ページコーディングしてって言われてemmetがないエディタではいちいちDOCTYPE htmlから書いていってたら1時間で書けるコードの量は見なくてもわかるほど差がでてきます。

無駄な時間はできるだけ作りたくない。
コードを入力する時間があるのなら、次に書くプログラムの構成などを考えたい。

と、いうことで僕のエディタに対する気持ちをわかっていただけたかとおもいます。
(エディタというより効率??)

そんで、僕が目指すエディタで必要なポイントを見ていきましょう。

  • UIが作り込まれている
  • Scssのコンパイルがめちゃ簡単(無駄なことしたくない)
  • CSSの色はカラーピッカーで簡単に選択できる
  • コード保管がすごい(dbでdisplay: block;が最低出てきてほしい)
  • gitの設定が楽。いらないエディタの設定ファイルは自動でgitignoreに書いててほしい
  • gitのコミットやプッシュができて、ツリーからgitの状態がわかる
  • プロジェクトごとに管理できる
  • 複数の言語に対応している。(個人的にはPHP,Python,HTML,CSS(Scss)は最低限。)
  • macで使える

こんな感じ。
でも、これは「PHPStorm」がほぼクリアしています。
ただ、最後の「複数の言語に対応している。」が問題。
家では勉強がてらPythonを使っていることが多く、会社でも機械学習してみたいという声もありPythonを仕事で使う日もきそうなんです。

ただ、「PHPStorm」ではPythonを扱うことができない!!!!
いや、皆さんが言いたいこともわかります。

Python使いたいなら「PyCharm」という最強のエディタがあるではないか。

わかります!その気持ちわかるのですが、なぜ悩んでいるかというと...
shota-natuta.hatenablog.com
この記事を見ていただいたらわかるのですが、Pythonを使ったwebサービスを作りたくて、HTMLとCSSが必須なんです。
「PyCharm」でも、有料版を買えば「PHPStorm」のようにHTMLとCSS、しかもScssを使う上で必要な「FileWatchers」が使える!

ただ、エディタにお金を出したくない。←これ重要

30日お試し版で有料版の機能を使用してみたのですが、「PHPStorm」を仕事で使っている僕からしたら神エディタ。
でも、PHPが使えないから結局どっちもどっち。

お試し版が切れた今、僕は「PyCharm」でPythonを書き、デザインに必須なCSSはScssで書いているので、「FileWatchers」が使える&Scssを認識してくれる「PHPStorm」で書いているんです。

正直、2個もエディタを出してると重い!Scssを使っててもコード量が多くなりがちだしね。。。
しかも、エディタを変えるたびにいちいち更新が入る。

悩みに悩んでいた時に見つけてしまった!
Visual Studio code」これはすごい!

code.visualstudio.com


gitもコミットやプッシュが楽!
でもでも、Scssのコンパイルの設定がクソめんどかった。
gulpつかったりするやつで結構時間かかりそうで断念。
Scssのコンパイルがめんどくさかったのも嫌だったのですが、カラーピッカーが使えないのもきつかった。

多分いろいろとできるようにする方法はあるかもしれないですができれば簡単に設定できるか、デフォルトで付いてて欲しかった。

f:id:natuta:20170218214947p:plainf:id:natuta:20170218214949p:plain
目指すべきカラーピッカーのイメージはこんな感じ。
行番号に右にある四角いやつをクリックするだけでカラーピッカーが出てくる!神仕様。

ふむ。VScodeは思ってたものと少し違くてがっかり。

Sublime text」もあるけど...あれはプラグインも豊富で上記の望みも叶えてくれそうだけど、がっつりプロジェクトやるにはファイル管理が貧弱貧弱...
www.sublimetext.com


次に見つけたのが今回の目玉「Atom」です!
atom.io

Githubが開発したエディタなのでgit対応はクリアだとおもう。

ただ「Atom」に関する知識はこれだけ。

とりあえずインストースしてみる。

ふむふむ。
見た目は大丈夫そう。
f:id:natuta:20170218222758p:plain

気になるはファイルのアイコン。
さて、カスタマイズしていきますか!

すぐに気になったファイルのアイコンから変えていきましょう。

File Icons

file-icons
atom.io
f:id:natuta:20170218223211p:plain

ふむ。なかなか良さげ?w

パッケージのインストールはこんな感じ。
f:id:natuta:20170218223909p:plain
「Preferences」をクリックして設定画面を表示する。
f:id:natuta:20170218223912p:plain
パッケージ検索部分にfile-iconsを入力してpackagesをクリックして検索。
f:id:natuta:20170218223915p:plain
インストールをクリックしてインストールしましょう!

f:id:natuta:20170218235520p:plain
ふむ。ちょっと見えにくいけどVScodeでもこんな感じだったので良しとします。


次はCSSでカラーピッカーがほしい。
f:id:natuta:20170218235716p:plain
デフォでは入っていなかった...残念。

pigments

pigments
atom.io
f:id:natuta:20170219002128p:plain
行番号の隣に色がでる!
ただ、これは色を表示するだけなのでカラーピッカーを別に用意する。

Color Picker

color-picker
atom.io
f:id:natuta:20170219003653p:plain
command+shift+Cでカラーピッカーが出てくるよ!
本当は、色をクリックしたらカラーピッカーが出てきてほしいけど、その機能は無いようなのでしかたなし。


まさかの!
git関連のpackageがあるようだ...
githubからでてるからその辺かなり凝ったものがあって、デフォルトでもかなり使い易いものがあるとふんだのに...
とりあえず、これを入れておいておく。

Git Control

git-control
atom.io
f:id:natuta:20170219005323p:plain
標準で使う機能が詰まっているのでこれだけあればGUIでささっと出来るでしょう。

問題のScssに関して
あった!!!便利なのあったああああ!!!
fr-br.com
ここで紹介されてたああ!!!
神!ありがとう!大好き!

Sass Autocompile

sass-autocompile
atom.io

ちょっとターミナルいじる部分あるけど、macの人は記事を見ながら進めればすぐできるし、設定もほっとんどいらない!
よかった。

でも、ちょっと気になったのがemmetなくね????
ってことで入れておこう。
普通にemmetで検索!

とりあえず、こんくらいで大丈夫そう!
git部分がちょーっと気になるからいいものみつかったらまた紹介しますね!!

長くなったのでこの辺で。
おやすみなさい!