手軽でおしゃれな開発環境


概要

個人的な開発環境のまとめです。
少し多機能な開発環境にしたい。
でも、手軽にすぐ使えるようなものがいい。
そんな人向けです。

環境

  • ubuntu 18.04

完成図

最終的にこんな感じの画面になります。
左にエディタ、右にターミナルというレイアウトになっています。
ターミナルは上下2つに分割しています。

エディタ

vscodeを使っています。
intellisenseについて、候補の表示と選択のショートカットをカスタマイズしておくと、
使いやすくなるのでおすすめです。

Dracula Official

見やすくてかっこいいので Dracula theme で統一しています。

vim

vscode で vim のような操作が出来ます。
完全に会得できればとんでもない速度で作業できるのではないかと思い修行中です。

ターミナル

terminator

画面分割のため terminator を使ってます。
terminator は難しい操作を覚えなくても使え、手軽です。
右画面にターミナルを開き、上下に分割した状態でレイアウトを保存しておきます。
起動したときに保存したレイアウトのまま開けます。

ショートカット

Ctrl + Shift + N → ターミナル間の移動
Ctrl + Shift + O → ターミナルを上下に分割する。

Dracula theme

Dracula theme にします。
これに加え、筆者はターミナルタイトルバーの色を、
アクティブなときはピンク、アクティブでないときは背景と同じ色になるように設定しています。

カラーコード

Background #282a36
Pink #ff79c6

シェル

fish

fishを使っています。
fishのインストールについての説明は他に分かりやすい記事が沢山あるのでここでは省略します。

インストールしたら、.bashrcに以下の一文を追記します。
.bashrcはbashを起動するときに読み込まれるファイルです。

fishをデフォルトのシェルにすると環境によっては動作がおかしくなるようなので、
bashを開いてからfishを起動するという動作をするようにします。

.bashrc
fish

実際の作業の例

  1. Ctrl + Alt + T → ターミナルが開く(画面の右半分にfishが起動した状態で上下に分割されて)
  2. $ cd ディレクトリ名 → 任意のディレクトリに移動
  3. $ code ファイル名 → ファイルをvscodeで開く
  4. (コードを書き始める)
  5. Alt + Tab → ターミナルに移動
  6. Ctrl + Shift + N → 下側のターミナルに移動
  7. (試したいコードの検証をする)
  8. Alt + Tab → vscodeに戻る

といった具合に、キーボードから手を離さずに作業できます。