emacs on Ubuntu(WSL)のインストールと設定 #JavaScript

はじめに

qiitaテスト投稿。
2019/10時点の記事のため、古い可能性があります。

Ubuntu(WSL)のインストール

2019/10現在では、Ubuntuは18.04のバージョンである。

WSLの有効化

Control PanelのWindowsの機能の有効化」から「Windows Subsystem for Linux」のチェックを有効化する。
Windows StoreからUbuntu LTSアプリをインストールする。
インストールしたら、ターミナルを立ち上げ、ユーザー情報を初期設定する。

インストールされたソフトを更新しておく

% sudo apt update; sudo apt upgrade

nodejsをnodebrew経由で最新版をインストールしておく

Let me google.

XWindowのインストールと起動

WindowsにVcxSrvをインストールする。Install WizardはすべてDefaultのままでよい。2019/10現在は64.1.20.5.1。
デスクトップに表示されるXLaunchを起動する。すべてデフォルト設定のままNextを押してよい。
最後の画面「Configuration Complete」になったら、「Save Configuration」を押下する。任意のフォルダに設定ファイルを保存する。
初回時に「Windows ファイアウォール」の設定ウィンドウがでるが「キャンセル」をクリックする（同一コンピュータ上で通信するだけなので外部との通信を許可する必要はない）。
左下のスタートボタンを右クリックし、メニューから[ファイル名を指定して実行]をクリックするとダイアログが出てくる。ダイアログのボックスに「shell:startup」を入れてOKをクリックするとスタートアップフォルダが開くので3.で保存した設定ファイルをコピペ。これによりWindows起動時に立ち上がるようにする。

Ubuntu上でのXServerのインストールと起動

Ubuntuに必要なソフトウェアをインストールする。ターミナルで以下を実行する。

% sudo apt install  x11-apps x11-utils x11-xserver-utils dbus-x11
% cd
% echo 'export DISPLAY=localhost:0.0' >> ~/.bash_profile
% source ~/.bash_profile
% xeyes &

emacsのインストールと起動

後で使うmozc関連のモジュールも忘れなく！

% sudo apt install emacs25
% sudo apt install ibus-mozc emacs-mozc
% emacs &

「libGL error: No matching fbConfigs or visuals found」というエラーが起動時に出る場合は、「export LIBGL_ALWAYS_INDIRECT=1」を実施しておく。

emacs設定ファイル

.emacs/init.elを作成し開く。
M-x package-list-packagesで表示される一覧のデフォルトのリポジトリは ELPA のみなので、より多くのパッケージが登録されている MELPA と Marmalade を追加する。

emacs/init.el

(require 'package)
(setq package-check-signature nil)
(add-to-list 'package-archives '("melpa" . "http://melpa.milkbox.net/packages/"))
(add-to-list 'package-archives '("marmalade" . "http://marmalade-repo.org/packages/"))
(fset 'package-desc-vers 'package--ac-desc-version)
(package-initialise)

(setq package-check-signature nil)
は、パッケージリスト表示時にunsingned signatureのエラーがでることを防ぐ。

プロキシ設定

社内環境で必要な場合は以下も追記する。

http_proxy="http://username:password@ip:port
https_proxy="https://username:password@ip:port
ftp_proxy="ftp://username:password@ip:port

init.elのデバッグ方法

M-x eval-regionで選択した範囲を評価できる。

パッケージをインストールする

インストールしたパッケージは以下。

mozc
web-mode
js2-mode
company

日本語入力mozcの設定

init.el

(set-language-environment "Japanese")
;; Mozcの設定
(require 'mozc)
(setq default-input-method "japanese-mozc")
(setq mozc-candidate-style 'overlay)
;; ターミナルから呼び出したときにターミナルに渡す文字コード
(set-terminal-coding-system 'utf-8-unix)
;; 新しく開いたファイルを保存しておくときの文字コード
(prefer-coding-system 'utf-8-unix)
;; emacsをXのアプリケーションへ貼り付けるときの文字コード
(set-clipboard-coding-system 'utf-8)
;; IMEを切り替えるキーの変更
(global-set-key (kbd "C-j") 'toggle-input-method)

フォントの設定

Source Code Proのインストールとemacsの設定

~/.fontsフォルダを作成し、そこにフォントファイルを入れるだけ。

% wget https://github.com/adobe-fonts/source-code-pro/archive/release.zip
% cd .fonts; unzip release.zip

WindowsのフォントをUbuntuから使えるようにする場合は

% sudo ln -s /mnt/c/Windows/Fonts /usr/share/fonts/windows
% sudo fc-cache -fv
% fc-list : family-name

init.el

(add-to-list 'default-frame-alist '(font . "Source Code Pro-13"))

Web Modeの設定

init.el

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))
(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-markup-indent-offset 2)
)
(add-hook 'web-mode-hook  'my-web-mode-hook)

js2-mode Setting

init.el

(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))

company mode

init.el

(when (require 'company nil t)
  (global-company-mode +1)

  ;; 自動補完を offにしたい場合は, company-idle-delayを nilに設定する
  ;; auto-completeでいうところの ac-auto-start にあたる.
  ;; (custom-set-variables
  ;;  '(company-idle-delay nil))
  ;; C-sで絞り込む
  (define-key company-active-map (kbd "C-s") 'company-filter-candidates)
  ;; TABで候補を設定
  (define-key company-active-map (kbd "C-i") 'company-complete-selection)
  ;; 各種メジャーモードでも C-M-iで company-modeの補完を使う
  (define-key emacs-lisp-mode-map (kbd "C-M-i") 'company-complete))
  ;; auto-completeっぽい見た目にする
  (set-face-attribute 'company-tooltip nil
                    :foreground "black" :background "lightgrey")
  (set-face-attribute 'company-tooltip-common nil
                    :foreground "black" :background "lightgrey")
  (set-face-attribute 'company-tooltip-common-selection nil
                    :foreground "white" :background "steelblue")
  (set-face-attribute 'company-tooltip-selection nil
                    :foreground "black" :background "steelblue")
  (set-face-attribute 'company-preview-common nil
                    :background nil :foreground "lightgrey" :underline t)
  (set-face-attribute 'company-scrollbar-fg nil
                    :background "orange")
  (set-face-attribute 'company-scrollbar-bg nil
                    :background "gray40")
))
;;