みっちゃんラボ

2016/05/08(Sun)

EmacsでCSSのインデントをスペース2つにする

EmacsでCSSを書くときにインデント幅をスペース2つ分にする方法です。

環境: Lubuntu 15.04 と Gnu Emacs 24.4.1

まず、MELPAのパッケージが入るようにします。

~/.emacs.d/init.elに以下を追加する。

;; MELPA
(require 'package)
(add-to-list 'package-archives '("melpa" . "http://melpa.org/packages/"))
(package-initialize)

書いたら、Emacsを再起動します。

次に、web-mode.elパッケージを導入します。

M-x package-installのあとにRETキーを押下。

ミニバッファがInstall package:となるので、web-modeと入力し再びRETキーを押下します。

そして、web-mode.elパッケージの設定を~/.emacs.d/init.elに追加する。

;; web-mode.el
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js?\\'" . web-mode))

;; Indent
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)

Emacsを再起動すると、CSSのインデントがスペース2つになります。

上記の設定はHTMLとスクリプトなどのコードのインデントも一緒に設定してます。

※ちなみに、タブは無効化しています。

;; タブを無効化
(setq-default indent-tabs-mode nil)

参考リンク：

  1. web-mode.el - html template editing for emacs (web-mode.org)
  2. Emacsのタブを無効化しスペースを挿入する - みっちゃんラボ (micchan.com)
Posted by (mi|o)cchan  Updated at 08 May 2016  Category editor  Tags emacs tips