Indenting html + javascript/css

Have you encountered an OS X text editor capable of indenting both the line

var x = 2;

and the lines

<it>Item A</it>
<it>Item B</it>

in the following html?

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<script>
function foo_bar() {
var x = 2;
}
</script>
</head>
<body onload="foo_bar()">

<h1>Header</h1>

<ul>
<it>Item A</it>
<it>Item B</it>
</ul>

</body>
</html>

I have tried all emacs packages purporting to do this simple task properly (through a major and a minor mode), but none is adequate. I am too heavily into emacs to abandon it altogether, but I am now looking for an editor other than emacs for this task.

Solution 1:

I've written web-mode.el (available on http://web-mode.org) because I had the same problems as you. This Emacs Major Mode for editing HTML templates (HTML with CSS/JS/PHP/JSP) is autonomous (no other major required) and syntax-highlights and indents according to the block's type.

OP Raving

With nothing more than

(require 'web-mode)

in your .emacs and storing web-mode.el in an accessible location (your home directory will do for a start), the code sample in the question will look like this out-of-the-box.

enter image description here

To get the right indentation

enter image description here

you'll need to use

;; First the (general) requisite initialization.
(package-initialize)

(require 'web-mode)

(eval-after-load "web-mode"
  '(progn 
     (add-to-list 'auto-mode-alist '("\\.css\\'" . web-mode))
     (add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))
     (add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))

     (setq web-mode-script-padding 2)
     (setq web-mode-style-padding 2)
     (setq web-mode-block-padding 2)
     ))

Solution 2:

I use Textmate heavily and love how auto indents for me when doing my Rails Developments. It is a really good text editor and totally worth the price. Has a lot of good features.

Though, most text editors usually have auto indentation. Coda 2 does and I believe Textwrangler and a few others. Shouldn't be too hard to find that works and most of them all have free trials to play with first to see if they are to your liking.

I hope that this answer helps you out.

Indenting html + javascript/css

Solution 1:

Solution 2:

Related

Recent Posts