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)
105
questions
0
votes
1
answer
39
views
PHP and LSP mode - code formatting?
I have setup web-mode and lsp mode for PHP programming in my config file. It is very minimal and flymake works perfectly.
I am struggling to find a way to get code formatting to work. I was told that ...
- 283
1
vote
1
answer
27
views
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 ...
- 111
0
votes
1
answer
39
views
How to create new faces for specific keywords on a webmode buffer?
Problem
In a (lsp & web-mode) buffer; "function", "if", "async" are all the same color, I tried to change "if" face with the following:
(defface xxx-font-...
- 1
0
votes
0
answers
11
views
YASnippets expand if in jsx className or html class
I use tailwindcss, and I'd like to be able to make some small (1 - 2 character) snippets for classes in either web-mode or rjsx-mode.
As they are small I'd like to avoid potential clashes, so I was ...
0
votes
1
answer
779
views
Doom - setting code formatter for specific file type
How can I change formatter used for specific file type in doom-emacs format module?
So far I've been happy with using mostly doom defaults and haven't gotten into writing custom configurations and ...
0
votes
2
answers
128
views
web-mode no syntax or color formatting with css and scss?
New user of vanilla Emacs 28.1 here, I just installed web-mode and it works great so far except for CSS and SASS / SCSS files. With those, web-mode doesn't provide any syntax highlighting or ...
- 1
0
votes
1
answer
83
views
How can I load some snippets depending of the extension of current file?
When I work on web files I usually use web-mode for javascript, php and css files, the problem I have is that yasnippet uses the current mode to find what snippets to load for that buffer ( as stated ...
- 578
1
vote
1
answer
309
views
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 ...
- 1,622
0
votes
0
answers
74
views
Why emacs makes weird indents in arrays
Often, emacs makes weird indentation in arrays: first line indented properly, but next lines are indented twice.
This behaviour found mostly in php (with web-mode):
array(
array( 'name' => 'Add'...
- 1
0
votes
0
answers
45
views
How use web-mode with elixir .ex files?
I'm using elixir-mode in the .ex file below, but I'd like to be in web-mode while inside the ~L""" inline template. How to configure web-mode to do this?
- 228
0
votes
1
answer
122
views
How to use yasnippets from js- and css- modes in html-mode?
I have latest YASnippet package installed on GNU Emacs 27.2 via MELPA. Snippets work, for example in *.js files, let expands to snippet after hitting TAB. However, when I edit HTML file (in html-mode),...
- 111
1
vote
0
answers
35
views
Emacs Mode to edit template toolkit files
Is there a mode to edit template toolkit files ?
Web-Mode works decently, but maybe some modes can be combined to proved some specific Perl-editing-Funcitonality?
- 816
0
votes
1
answer
260
views
Narrow eglot's area-of-effect in Vue.js file using web-mode?
I'd like to use eglot and web-mode to edit some Vue.js single file components. These files have top level <template> and <script> sections, with the former containing HTML.
The Eglot ...
- 471
1
vote
1
answer
198
views
Change `standard-indent` for 1 specific major mode
I author web apps with the web-mode in GNU Emacs, and I use 2 spaces for indentation.
After I examined the web-mode source, I found out that the mode defaults to the standard-indent variable, which in ...
- 111
0
votes
1
answer
215
views
No php highlighting in .blade.php using web-mode
there's no highlighting php into a .blade.php file using web-mode.
I just installed from MELPA and added this to my .emacs file:
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html?\\'&...
0
votes
0
answers
94
views
GraphQL and Styled Components syntax highlighting in web-mode?
How can I add syntax highlighting for GraphQL and Styled Components in web-mode?
Right now it doesn't work, which makes programming much less convenient, and it's surprisingly difficult to find the ...
- 101
1
vote
3
answers
457
views
The global value of a variable I set with setq in my config differs from the local value. How can I get my value to be what I want in every buffer?
I want web-mode-script-padding to be set to 0 at all times.
In my config, I have tried both
(with-eval-after-load 'web-mode
(setq web-mode-script-padding 0)
)
As well as simply,
(setq web-mode-...
- 239
0
votes
1
answer
36
views
Auto-indentation for Meteor/spacebars
How do I get Emacs to auto-indent Spacebars blocks when coding with Meteor? Right now, Emacs automatically does this:
{{#each player}}
{{name}}
{{/each}}
instead of this:
{{#each player}}
{{name}}...
- 11
0
votes
0
answers
69
views
How to have a tag replace its parent in web-mode? (Equivalent to paredit-raise-sexp in paredit)
I'm having a hard time searching for the answer to this, probably I'm using the wrong terminology. How do I have a child element replace its parent element (the parent element deleted completely and ...
1
vote
0
answers
19
views
web-mode turn off auto indent on yank [duplicate]
How to turn off auto indent on yank in web mode?
As far as I understand, I must call remove-hook with the name of the hook and the function. But how too find them?
- 1,059
2
votes
1
answer
625
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 ...
- 279
2
votes
1
answer
238
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 ...
- 227
4
votes
1
answer
1k
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 '("\\....
- 483
0
votes
2
answers
203
views
How to get current language at point?
How can i get current programming language at current cursor.
For example, if my cursor is inside script tag, then it should return js or javascript and if it is inside style tag, then it should be ...
- 1
7
votes
1
answer
578
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 ...
- 203
1
vote
0
answers
216
views
web-mode didn't work properly under Emacs
I am using Emacs 25.3.1 under MS Windows 64-bit, Everything seems working fine except the web-mode. If I try to edit an HTML file there is no syntax highlighting, when mixing PHP and HTML only the PHP ...
- 11
3
votes
1
answer
560
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 <...
0
votes
0
answers
64
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 ...
- 101
1
vote
1
answer
694
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 ...
- 103
0
votes
1
answer
170
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 ...
- 185
0
votes
1
answer
189
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 ...
- 103
4
votes
1
answer
1k
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 ...
- 659
2
votes
0
answers
574
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 ...
- 280
1
vote
1
answer
152
views
javscript "." indent in web-mode
In web-mode, the indentation after "."
var context = cubism.context()
.step(1e4)
.size(+d33.select("#using-cubism2")
.style("...
- 121
1
vote
3
answers
1k
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,442
2
votes
2
answers
583
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 ...
- 123
0
votes
1
answer
223
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 ...
- 101
3
votes
1
answer
451
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 ...
- 185
1
vote
2
answers
132
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 ...
- 495
3
votes
1
answer
544
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 ...
- 327
1
vote
1
answer
1k
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 ...
- 464
4
votes
2
answers
1k
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 ...
- 3,989
0
votes
1
answer
95
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>
&...
- 55
4
votes
1
answer
789
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 ...
- 141
1
vote
1
answer
711
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
1
answer
257
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()// ...
- 151
1
vote
0
answers
1k
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-...
- 111
0
votes
0
answers
247
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 ...
- 267
1
vote
2
answers
1k
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 ...
- 595
3
votes
2
answers
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))
(...
