みっちゃんラボ

2016年05月08日

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

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

環境: Lubuntu Lubuntu 15.04 と Gnu Emacs 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 みっちゃん  Updated at 08 May 2016  Category editor  Tags emacs tips 

アプリ作りました

ハイフンアウトライナー ハイフンアウトライナー
アイデアをまとめておくためのアウトライン・プロセッサです。Android向けです。無料版はこちら。ウェブページはこちら
ウェブクリッパー ウェブクリッパー
表示されているウェブサイトのスクリーンショットを撮るためのAndroidアプリです。有料版はこちら。ウェブページはこちら
パットメモ パットメモ
とてもシンプルなリスト型のメモ帳アプリです。ちょっとしたメモにお使い下さい。ウェブページはこちら
フェイスチェッカー フェイスチェッカー
お化粧が崩れていないか、鼻毛が飛び出ていないかなどをチェックできるAndroidアプリです。ウェブページはこちら
テキストショット テキストショット
テキストをまるまる画像化するアプリです。画面からはみ出るくらい長い文章にも対応しています。無料。
ストロベリーパッド ストロベリーパッド
書きたくなるノート。考えるための道具として、必要最小限の機能のみを実装しました。無料版はこちら
5分間タイマー 5分間タイマー
5分ごとに振動と音が鳴るインターバルタイマーです。
ねこ紙 ねこ紙
キャンバスに線を描くと猫の鳴き声がするお絵描きアプリです。
半透明キャンバス 半透明キャンバス
好きな写真の上に半透明のキャンバスをかぶせて、なぞるように絵を描くことができます。
並び替えノート 並び替えノート
並び替えができるシンプルなリスト型ノートです。頭の中を整理整頓できます。有料版はこちら
comments powered by Disqus