Emacs Stack Exchange
Emacs Stack Exchange

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)

web-mode.el is a major mode for editing web templates, i.e. HTML documents with embedded client-side (CSS, Javascript, …) and server-side (PHP, JSP, ASP, ERB, Twig, Django, JSX, …) blocks.

107 questions
25
votes
2 answers

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?
Boris Stitnicky
  • 573
  • 2
  • 5
  • 10
10
votes
1 answer

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: (setq web-mode-auto-quote-style 2) ; use single…
dagda1
  • 615
  • 1
  • 4
  • 17
8
votes
1 answer

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
; const image =…
dagda1
  • 615
  • 1
  • 4
  • 17
8
votes
1 answer

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 'redux-mock-store'; * import thunk from…
dagda1
  • 615
  • 1
  • 4
  • 17
4
votes
1 answer

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 '("\\.vue\\'" . web-mode)) in one's .emacs file. But…
Calaf
  • 483
  • 3
  • 16
4
votes
1 answer

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 this: showModal() { return modalService.open({ …
tom
  • 141
  • 1
3
votes
1 answer

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 following (setq web-mode-engines-alist '(("django"…
Adam Thompson
  • 547
  • 3
  • 14
2
votes
0 answers

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...
    {% for category in categories %}
  • ...
    • {% endfor %} …
Shaun
  • 177
  • 8
2
votes
2 answers

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-mode version is 12.2.10, and emacs is 24.5.1. And…
Jasondf
  • 43
  • 6
1
vote
1 answer

In web-mode: how can I identify matching tags?

I'm using web-mode for PHP. When I'm navigating through tags, it would be helpful if I could visually identify a matching half of a tag pair. Something like this exists for other modes, so I'm guessing that there's a way to configure for this in…
bob
  • 111
  • 2
1
vote
1 answer

web dev environment setup

I wish to setup a web dev environment with emacs, I search it and some post looks like a little bit old. I do not want it very professional but basic web dev is enough such as edit javascript and update output to browser, and see debug console from…
lucky1928
  • 1,666
  • 10
  • 28
1
vote
2 answers

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 enable go to symbol with web-mode?
dagda1
  • 615
  • 1
  • 4
  • 17
1
vote
1 answer

How do I enable/disable flycheck when changing buffer content-type of web-mode

I am using emacs daemon, and with the default config for js, jsx: (flycheck-add-mode 'javascript-eslint 'web-mode) When I edit *.html.erb files, I have an error: Parsing error: Unexpected token at <%= or <% on ruby code block. I think…
Hue Minh
  • 13
  • 3
1
vote
2 answers

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:
  • line one
    • line two
I know I can use…
Tom
  • 45
  • 5
1
vote
2 answers

Indentation of conditional comments in web-mode.el

I want to set the indentation of conditional comments to 2 space, like this: