Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.
21

According to the web-mode documentation, you can do that with the following: (defun my-web-mode-hook () "Hooks for Web mode." (setq web-mode-markup-indent-offset 2) ) (add-hook 'web-mode-hook 'my-web-mode-hook) You can also set values for web-mode-css-indent-offset for CSS, and web-mode-code-indent-offset Javascript, Java, PHP, etc.


12

Evil has the evil-define-key macro for defining commands for certain states in a specific keymap only: (evil-define-key 'insert emacs-lisp-mode-map (kbd "C-c C-c") 'butterfly (kbd "<pause>") 'zone) It is able to delay the execution of the binding (by using eval-after-load itself) and can also take more ...


11

The web-mode shortcut M-; (which calls web-mode-comment-or-uncomment) works for me in HTML, CSS, and PHP files. For the first, this command puts <!-- --> around the region, for the second, /* */, and so on. I also tried testing both comment-region and comment-dwim with web-mode enabled. Both functions had the same result: <!-- --> was placed ...


11

eval-after-load takes a single form, hence: (eval-after-load 'flycheck '(progn (flycheck-add-mode 'html-tidy 'web-mode) (flycheck-add-mode 'css-csslint 'web-mode))) If you're using Emacs 24.4 or newer, with-eval-after-load is preferable, which neatly avoids this particular source of confusion: (with-eval-after-load 'flycheck (flycheck-add-...


10

In general, if you want indentation to use spaces only, I would recommend customizing: (setq-default indent-tabs-mode nil) This forces indentation to use spaces and no tabs. I'm not sure if web-mode uses the regular methods for indentation though, so it may not respect this. Can you give an example file to demonstrate?


10

This is a known issue and as of now, it has not been fixed. I've decided to forego jsx-mode for this reason and just use web-mode. It has support for JSX and is better suited for mixed content files. Since I do work in several projects that don't all have the same convention of using the .jsx ending for JSX files (some simply use .js endings), I've also ...


8

FYI for anyone else who comes across this issue, this is because this jsx-mode project is not made to edit Facebook's React JSX templates but rather this other compiled javascript language also called JSX. That having the same name as the React templates is entirely coincidental. This is why the first commits to this repo were 4 years (pre-dating Facebook'...


7

The answer was to add the following to my init.el (setq web-mode-content-types-alist '(("jsx" . "\\.js[x]?\\'")))


6

To disable the behavior.. Programmatically: (setq web-mode-enable-current-element-highlight nil) web-mode-enable-current-element-highlight is a variable defined in ‘web-mode.el’. Its value is nil Documentation: Disable element highlight. Interactively: M-x web-mode-toggle-current-element-highlight return web-mode-toggle-current-element-...


5

Undo all that you have done in your question. Specifically unset the executable variable of handlebars again—how did you get the idea that this could possibly work? Then add the following to your init file instead: (eval-after-load 'flycheck '(flycheck-add-mode 'html-tidy 'web-mode)) That let's you use HTML Tidy for Web Mode. Be warned though that ...


5

Does adding (setq-default indent-tabs-mode nil)change anything ?


5

Auto-closing I'm not sure what's going on with (setq web-mode-tag-auto-close-style 2), but you can get auto-closing with </ as you noted, and also with the TAB key via emmet-mode (see below). Emmet-mode auto-closing You can get <div>|</div> with either divTAB div>TAB ...but not with <div>TAB Expanders To get the behaviour you ...


5

web-mode-comment-formats is a buffer local variable. Also, add-to-list may not work correctly, since there is already a mapping for javascript to /*. You can try one of the following: (setq-default web-mode-comment-formats (remove '("javascript" . "/*") web-mode-comment-formats)) (add-to-list 'web-mode-comment-formats '("javascript" . "//")) Or (setq-...


5

(setq web-mode-enable-auto-quoting nil) Add double quotes after the character = in a tag.


5

I think what's happening is that the list of packages Emacs knows about is out of date; your system thinks web-mode 15 is the latest, but web-mode 16 has been published to the package repository. Your Emacs stores the list of packages it knows about in the variable package-archive-contents, if you want to check that. But looking at that variable isn't ...


4

I've tried Vimish fold, and it seems to do what you ask. Below is my setup for the keybindings: (require 'vimish-fold) (vimish-fold-global-mode 1) ;; this registers a region for future folding/unfolding (global-set-key (kbd "C-c v") #'vimish-fold) ;; this unregisters the region under point from folding/unfolding (global-set-key (kbd "C-c d") #'vimish-fold-...


3

Your configuration works for me. You can force the engine like this: (add-hook 'web-mode-hook (lambda () (web-mode-set-engine "django"))


3

You should add (setq web-mode-engines-alist '(("php" . "\\.html\\'"))) in your .emacs. Indeed, web-mode.el can not guess the template engine with such a generic extension. You can find more informations about web-mode-engines-alist on http://web-mode.org


3

I couldn't reproduce the crash, instead my development emacs just froze. However, it froze exactly when you said yours crashed, so I'll assume the problem is the same. This is an infinite loop (i.e. bug) in web-mode-markup-indentation-origin. Here's is the basic run-down on what's going on. We have the following loop: (stripped of the code that doesn't ...


3

Please try this code in your emacs config file to force web-mode indent. I referred it from the web-mode home-page. (require 'web-mode) (defun my-web-mode-hook () "Hooks for Web mode." (setq web-mode-markup-indent-offset 2) ) (add-hook 'web-mode-hook 'my-web-mode-hook)


3

This line is in error: (add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode)) It doesn't open .tpl files and .php files in web-mode, it opens files ending .tpl.php in web-mode. Amusingly, I have that in my init file also; it came from somewhere on the web. And it doesn't work for me either. So, to fix it, add two separate lines, one for each ...


3

Have you tried adding a web-mode-hook to check if you are in a projectile project? You would also have to check if the projectile project is a django one, but I am not that familiar with django. (defun cesco/django () (if (projectile-project-p) (if (file-exists-p (concat (projectile-project-root) "manage.py")) (web-mode-set-engine "...


3

You can use the expand-region or emacs-surround packages to select the text and then delete it. Watch an intro to expand-region on: Emacs Rocks. Or take a look at the examples of emacs-surround on its README file.


3

web-mode maintainer here. I've pushed a fix to use web-mode-html-tag-unclosed-face instead of web-mode-html-tag-face as long as the tag remains unclosed. This face can be customised (e.g. adding a red background to it)


3

C-hf replace-regexp-in-string actually covers this exact requirement (or it does in Emacs 25.3, at any rate). To replace only the first match (if any), make REGEXP match up to \' and replace a sub-expression, e.g. (replace-regexp-in-string "\\(foo\\).*\\'" "bar" " foo foo" nil nil 1) => " bar foo" To replace the first match (if any) in each line of ...


3

The right place to use yas-activate-extra-mode is web-mode-on-engine-setted since that function also sets the engine specific snippets of web-mode. Pityingly there is no hook so we have to add an advice. You can put the following into your init file. After loading that init file (e.g., at emacs-restart) your engine-dependent yas-directory structure works. ...


2

Your problem appears to be only that you have not loaded both of those Lisp files. I downloaded those files and loaded them both, then did what you did, and had no problem. (require 'web-mode) (require 'zencoding-mode) (add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode)) (add-hook 'web-mode-hook 'zencoding-mode) You of course need to put the directory ...


2

I just use an external utility (recode) for that (defun my-html-entity-encode (b e) (interactive "r") (call-process-region b e "recode" t t nil "..HTML_4.0")) E.g. select a region, then M-x my-html-entity-encode Return.


2

I'm no expert in this, but taking a quick look at the code I say it's regular expressions. Web-mode seems to use regexes to search for <?|<?php tags, then it knows what comes further is php code. The same goes for html, asp, javascript and other languages. I think you should look at the code yourself (M-x describe-function web-mode). And if you're ...


2

You can use M-x web-mode-element-wrap


Only top voted, non community-wiki answers of a minimum length are eligible