Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit 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)

2
votes
1answer
83 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 <...
12
votes
2answers
5k 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?
0
votes
0answers
21 views

unexpected long indent after colon in web-mode

I have some trouble locating the source of 8 tabs and 3 spaces more than the previous indentation when I'm inside js inside web-mode. These appear after a line that ends with a colon. Example (note ...
2
votes
1answer
455 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) ...
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 ...
1
vote
1answer
350 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 ...
0
votes
1answer
87 views

How to auto highlight buffer or region in web-mode?

I'm using web-mode 13.1.25, but was until today on 12.x with the same issue. It seems I need to continually choose Highlight buffer (C-c C-h) as otherwise, certain functions misbehave. These steps ...
3
votes
1answer
105 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&...
0
votes
1answer
427 views

Enable JSX folding in web-mode

I'm using web-mode to edit jsx files and I'm wondering what minor-mode can I use to add folding support. Is there anything out there that works? Thanks
0
votes
1answer
135 views

Switch syntax highlighting of open buffer from web-mode (freemarker) to sql

we use web-mode (freemarker engine) to edit source files that contain freemarker directives and a lot of SQL. Editing in web-mode (freemarker engine) works fine. It would be very helpful if we could ...
1
vote
2answers
665 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
167 views

CSS classes autocomplete not working with web-mode

I'm struggling with a problem with Spacemacs and I don't know what I'm doing wrong (maybe a lot of things). I have created a TAG file for my project. The tags seem to work well because I can navigate ...
0
votes
1answer
33 views

How to exclude or remove certain modes from major mode?

I tried to use column-enforce-mode but I don't want it on web-mode I tried to disable it but without success. (global-column-enforce-mode t) (remove-hook 'web-mode 'column-enforce-mode nil) The code ...
0
votes
1answer
35 views

Toggle major mode with a custom key binding

I currently have 2 key bindings for switching between two major modes: (global-set-key (kbd "<f12>") 'js2-jsx-mode) (global-set-key (kbd "<f13>") 'web-mode) How would I reduce that to a ...
2
votes
1answer
197 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 ...
4
votes
1answer
279 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 ...
5
votes
1answer
223 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 ...
1
vote
1answer
59 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
0answers
115 views

Correct web-mode syntax-highlighting in org-mode src blocks

When adding source blocks in a org-mode document (usually with the shortcut <s TAB), it usually works fine, but specifically with web-mode, if I edit any snippet with the special editor (C-c-'), it ...
0
votes
3answers
62 views

Help with `replace-regexp-in-string`, to replace only first instance in every line

I have the following string: // const asdf = 'asdf' // // comment // const asdf2 = asdf And I want to run a regexp replace to make it look as follows: const asdf = 'asdf' // comment const asdf2 = ...
2
votes
2answers
197 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 ...
0
votes
1answer
114 views

How to make web-mode handle HTML inside <script> element?

I have elements that contain various things. Some contain HTML; web-mode does not realize that so it messes up the indentation. Some contain CSS; same issue. My first preference is, can I somehow ...
2
votes
1answer
98 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 ...
1
vote
1answer
37 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 ...
0
votes
1answer
66 views

Why am i getting extra indentation-steps on react-router render function?

I am trying to write a school project in React with react-router v4 in web-mode. When i try to write the render props function web-mode inserts 4 spaces instead of the desired 2. <Switch> &...
0
votes
1answer
358 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 ...
3
votes
1answer
455 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 ...
1
vote
1answer
333 views

args-out-of-range error with ac-html

I tried using ac-html recently since I'm an auto-complete user and I'd like to have HTML completion in html-mode and web-mode buffers. However, it has been acting somewhat strangely and throws an ...
0
votes
2answers
203 views

How to Debug Javascript in HTML in Webmode.el

I am new to Emacs webmode. I was wondering how to debug javascript embedded into my html page using webmode.el. The script is in the <script> tag. I'd like to see break lines and see the values ...
1
vote
1answer
247 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-...
0
votes
1answer
117 views

how to get web-mode to ignore alignment in favor of indentation during method chaining?

when I write code (Javascript, specifically) in a web-mode buffer which chains methods across newlines: object.foo() .bar() web-mode seems to want to align it like this: object.foo() .bar()// ...
1
vote
0answers
746 views

spacemacs, web-mode, cannot indent

I am using spacemacs. When writing .html file, it shows that it is in web-mode. I want to indent, press TAB, but nothing happened. So I can only use SPC to indent. I added (setq web-mode-markup-...
1
vote
2answers
83 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</...
0
votes
0answers
154 views

web-mode-indentation wrong

Using web-mode and evil I get a really strange behaviour when pressing return after curly braces: let StubMapsService = Ember.Service.extend({ getMapElement(location) { (RET) } }); let f ...
6
votes
1answer
1k 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 ...
3
votes
2answers
693 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)) (...
2
votes
0answers
82 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 // ...
0
votes
0answers
40 views

bug with web-mode and paredit

I have paredit configured to work on javascript files. I also have web-mode enabled It seems to cause a bug in certain situations. Here is a stack trace I got by trying to clear all the text in an ...
1
vote
1answer
534 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: ...
1
vote
1answer
198 views

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 &...
7
votes
1answer
603 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 ...
3
votes
1answer
232 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 ...
1
vote
1answer
290 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 ...
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 ...
3
votes
2answers
1k 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 ...
2
votes
1answer
408 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 ...
7
votes
2answers
2k 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....
1
vote
0answers
127 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) { .... ...
0
votes
1answer
484 views

Getting proper indentation for Python Flask templates

I've started using the Flask Python framework, and I'm having trouble getting indentation to work properly in the template .html files. I use web-mode, and it seems to really not want me to indent ...
1
vote
2answers
823 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-...