Questions tagged [web-mode]

web-mode.el is a major mode for editing HTML templates containing parts (CSS, JavaScript) and blocks (server/client side engines)

Filter by
Sorted by
Tagged with
19
votes
3answers
9k views

How do I set up indentation to 2 spaces in web-mode

I just installed web-mode. It works, but the indentation seems to be set to 4 spaces by default. How does one properly set it to 2 spaces?
10
votes
2answers
5k views

Make web-mode always indent with spaces

I am using emacs web-mode, and the tabbing in JS files seems to be acting strangely. I have tab set to indent 2 spaces, but when the indent reaches 8 spaces, web-mode turns them into a tab, and then ...
9
votes
1answer
3k views

Using multiple flycheck syntax checkers in web-mode

I'm trying to configure Flycheck to use both csslint and tidy checkers in web-mode without any success. This post suggests using this code for tidy: (eval-after-load 'flycheck '(flycheck-add-mode '...
9
votes
1answer
3k views

How do I set up key bindings for modes in a specific Evil state?

I have a set of key bindings that I use for both web-mode and php-mode in insert mode (of Evil). So I cannot use set-local-map or something. Because in normal mode, the same keys will then call other ...
8
votes
2answers
3k views

no html/jsx indentation in jsx-mode

For some reason the html/jsx in my react source files always wants to indent as follows, i.e. there is almost no indentation: return ( <DateRangePicker ranges={this.state.ranges} startDate={this....
7
votes
1answer
2k views

Web mode HTML tag highlighting

First off, a picture of what I see, editing a handlebars file: My colour theme is base16-grayscale, so that blue is probably hard coded somewhere. I asked on the web-mode mailing list, but was told ...
7
votes
1answer
2k views

Formatting jsx in js files with web-mode

Say I have a function like this in a .js file: import React, { Component, PropTypes } from 'react'; const Forecast = ({ summary, details }) => { if (!summary) return <div/>; const image ...
7
votes
1answer
1k views

Change comment style in web-mode

I am using web-mode 20161003.1327 At the moment when I comment a region in web-mode, it comments like this; /* import chai from 'chai'; * import 'babel-polyfill'; * import configureMockStore from ...
5
votes
1answer
1k views

turn off auto-quotes in web-mode

Currently I have jsx in my js files but when using web-mode it is only possible to have single quotes or double quotes for html attributes with this setting the web-mode-auto-quote-style setting, e.g: ...
5
votes
1answer
619 views

Smartparens and web-mode conflict to add extra angular bracket

I am fairly new to customizing my emacs, so please be gentle. I did try to find a solution for this, but all I found was a page on git where someone asked a similar question but (as far as I can tell)...
5
votes
1answer
2k views

web-mode custom indent setting ignored

In web-mode, indentation for markup gets set to 8 when I open a new buffer. I have set web-mode-indent-markup-indent-offset via customize to 2. When I check it outside of a web-mode buffer, it is set ...
5
votes
1answer
132 views

How to stop web-mode from reindenting after yank?

I'm editing this code: callFunction({ x: somearray, }); Then I want to extract somearray to be a variable with a copy. I cut somearray and delete the colon, then enter (_ is the cursor): const ...
5
votes
1answer
291 views

Pasting text doesn't work properly in evil-/web-mode

In certain situations Emacs doesn't properly paste text. Apparently this only happens if the current buffer isn't saved and both web-mode and evil-mode are loaded. I was able to reproduce this ...
4
votes
1answer
2k views

How can I comment a block of CSS or HTML in web mode?

I am using web-mode.el to edit my CSS and HTML files. I am 90% sure that I haven't touched it but, just in case I modified it in the past, you can find the actual web-mode.el file I'm using here. I ...
4
votes
2answers
2k views

HTML tag auto open/close/expand/quote problem

I'm a novice at emacs use in general, and new to spacemacs, so I'm hoping this is just a case of missing a trick or two. I am working in a symlinked app on Mac OSX, not in the terminal. I have a ...
4
votes
1answer
979 views

web-mode not installing?

The short version of my question is how do I install web-mode? Here's what I've tried so far: I'm trying to install web-mode, so I typed in M-x package-install, followed by web-mode. At this point ...
4
votes
1answer
560 views

How to preserve code folding in emacs?

I am using web-mode to fold/unfold code. When I fold code, kill buffer and re open it, code folding disappears. How to preserve code folding even after killing and reopening buffer?
4
votes
2answers
854 views

Set web-mode engine per directory

I'm hoping this is possible. I work in a variety of environments and languages. Right now it's mostly django and Node.js, but there have been others. What I would like to do is set the web-mode engine ...
4
votes
1answer
328 views

Highlight HTML entities in Web mode

I often edit articles in web-mode (using PHP). Is there some way of fontifying HTML entities (like &#8211;, &eacute;, and so on)? I'd like them to be a lighter color so that they're easier to ...
4
votes
0answers
477 views

Configuring web-mode for Vue.js (.vue) files

It seems that web-mode has supported Vue.js since May 2017, the "Venora Release". Configuring Emacs to handle Vue.js files (extension .vue) is as easy as writing (add-to-list 'auto-mode-alist '("\\....
4
votes
1answer
616 views

How to use web-mode to edit multiline HTML inside backticks?

I often work with Angular and Typescript, and I'm fond of putting my Angular templates directly into my Typescript files. The resulting code is essentially Javascript with HTML snippets in it, like ...
4
votes
0answers
374 views

Web mode -indentation is misaligned on skipping semicolons

When i indent javascript code (inside html - web mode) that has no semicolons in it, the next statements are indented right with two extra spaces, <script> function processTemplates(){ ...
3
votes
1answer
253 views

Yasnippets for active web-mode engine

Say I have a snippets folder: snippets/web-mode/ ├── django │   ├── else │   ├── for │   └── if └── erb ├── else ├── for └── if Both engines have different syntax ({% %} and {{ }} vs <...
3
votes
2answers
1k views

How can i start web-mode at a file's startup?

I want my emacs to start .php and others web files in web mode so i copied this code which is on the web-mode webpage: (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode)) (...
3
votes
1answer
483 views

Force web-mode.el Engine

In my django project I use basic .html files for my templates. I want to force the django engine from web-mode.el so I don't have to constantly change between .html and .djhtml. I've tried the ...
3
votes
1answer
368 views

web-mode not working inside of org-mode src block

I am trying to write code snippets inside org-mode and I am not able to get the same effect from web-mode. If I write the code in a css file completely I get this: But when I write the same code ...
3
votes
1answer
125 views

Web-mode + Dust.js, no indentation?

If I go to scratch, M-x web-mode RET, type in this snippet: <script type="text/x-dust-template"> {#obj_to_iterate} {prop} <----- this should indent {/obj_to_iterate} </script&...
2
votes
1answer
1k views

How tell web-mode to use tidy syntaxchecker in flycheck?

I have tidy in my setup. When I run HTML-mode as major mode in html file, I do flycheck-verify-setup and I get tidy as syntax checker. the executable is also found. When running web-mode as major ...
2
votes
2answers
426 views

Detect missing > html emacs web-mode

Hello I am new to Emacs and I am currently using it for web development projects. I am currently using Laravel and VueJS on my development. I search online what is the best major mode for this web ...
2
votes
2answers
711 views

Encode non-html characters to html equivalent?

I must be overlooking something obvious, but I can't find a way to encode a string/region into HTML, for example "Hölle" to "H&ouml;lle". Is there anything in emacs or web-mode or any other plugin ...
2
votes
1answer
310 views

web-mode disable auto pairing mode does not work

I am having little issues with web-mode. I am trying to disable the pairing which is done automatically when I try to insert double curly braces like this: {{<CURSOR>}} , and hit space to ...
2
votes
1answer
375 views

How to detect and match indentation size of current buffer

I'm working on a javascript project that has inconsistent tab sizes 2spaces vs 4spaces on the server and client. I'm using web-mode for javascript editing. I'm looking for a feature like SublimeTexts ...
2
votes
1answer
138 views

Web-mode left arrow without the right closing angle bracket

When using Elixir html template (.eex) in web-mode, I sometimes need to type code like <%= for bid <- @bids do %> . At the moment because the opening left angled bracked is closed immediately ...
2
votes
0answers
170 views

How to set web-mode to use single-line comment style instead of multi-line for JavaScript

When commenting C-style code like C++, JavaScript etc., I use single-line comments to be able to uncomment a previously commented region selectively, i.e // This // is // a single-line style // ...
2
votes
0answers
167 views

Web-mode javascript indentation for “if” and “for”

When writing Javascript, I always put curly brackets after if in a new line, like this: if(a == 0) { .... But when I do that in web-mode, the default is like this: if(a == 0) { .... ...
2
votes
1answer
606 views

Migrate php-mode configuration to web-mode

I currently have my php-mode configuration like so: (require 'php-mode) (add-hook 'php-mode-hook (lambda () (require 'ac-php-company) (company-mode t) ...
2
votes
0answers
730 views

Web-Mode + Yasnippets + Autocomplete, error before create-php-snippet

I am trying to use auto-complete + php-auto-yasnippets with web-mode, but I can't get the snippets to work correctly. If I start typing imp, I correctly get auto-completion to implode but if I press ...
2
votes
0answers
496 views

web-mode django custom block indentions

The official style of the project I'm working on is to indent after template control statements. We're using jinja2 templates with altered open/closing tags too... <ul> {% for category in ...
1
vote
1answer
953 views

How to use web-mode engine-specific checkers in flycheck?

Flycheck seems to enable checkers based on the major mode. Meanwhile, web-mode can be used to edit a variety of different types of files (html, javascript, etc.) which would each have their own ...
1
vote
2answers
1k views

In web-mode PHP block in HTML file doesn't syntax highlight

I'm a emacs beginner, hope this not a stupid question. Here is the issue: when I open a html file that contains php block, every html thing got correct syntax highlight, but the php block. The web-...
1
vote
2answers
998 views

go to symbol in javascript with web-mode

I am using web-mode for javascript files that contain jsx: (add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.js[x]?$" . web-mode)) Is there a way to ...
1
vote
1answer
154 views

How to render html in web-mode?

I'm using web-mode within emacs to edit an html file, in html-mode I can use C-c C-v to render html, it opens the file straight to Firefox. How I do that with web-mode? Thanks a lot, P.S : Using ...
1
vote
1answer
59 views

Select Within Quotes

Supposing I have my cursor resting somewhere in a bunch of text within quotes, is there a key binding that will mark or highlight just the text within the quotes so I can delete it? This would be ...
1
vote
1answer
284 views

Why is autoheader crashing with web-mode?

I got a situation here, that I couldn't get resolved with the maintainer of web-mode. So I'm asking here, if anyone knows a good suggestion. Ok, what I have here: GNU Emacs GUI (version 24.4.51.1 (...
1
vote
1answer
444 views

Is it possible to disable aggressive indent mode per file extension?

Would it be possible to disable aggressive indent package just for some file extensions?. I know it's possible to do it by major mode, but I use web-mode for js,html,php and others. And I just want to ...
1
vote
2answers
94 views

Convert lines into list in web-mode

How can I convert a number of lines with text into a list? Input: line one line two Then I want to mark the lines and after executing a function it should be: <ul> <li>line one</...
1
vote
1answer
215 views

How does web-mode recognize the php code or html code

It looks a quite magic that the web-mode could mix with php mode. A major mode could contain another major mode. This seems amazing. (add-to-list 'auto-mode-alist '("\\.php\\'" . php-mode)) (add-to-...
1
vote
1answer
260 views

How automatically load a mode with another mode (web-mode with zencoding-mode)?

I have web-mode (which is awesome, by the way). The following line: (add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode)) every time when a .html file is loaded, web-mode will be enabled. But ...
1
vote
1answer
124 views

javscript “.” indent in web-mode

In web-mode, the indentation after "." var context = cubism.context() .step(1e4) .size(+d33.select("#using-cubism2") .style("...
1
vote
1answer
466 views

Web-mode uses 1 space indent instead of 2

I have this config in my init.el: (setq-default indent-tabs-mode nil) (add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode)) (defun my-web-mode-hook () "Hooks for Web mode." (setq web-mode-...