Indentation problems in <script> tags #74

Yamakaky · 2018-04-08T10:47:08Z

Often, when I open a .vue file, the indentation in the <script> tag is broken, with new lines aligned on the left. Sometimes, the indentation is correct when I open a file, I don't know why. Are you aware of this kind of problem?

I have a big spacemacs config, I will try to bisect the problem some time.

As a quick-fix, is there a way to force vue-mode to use the js indentation mode?

The text was updated successfully, but these errors were encountered:

AdamNiederer · 2018-04-08T19:32:16Z

vue-mode already uses js-mode's indenation function via mmm-mode. Could you post a snippet in which you observe this behavior, and your installed versions of emacs, vue-mode, and mmm-mode?

Yamakaky · 2018-04-10T18:43:26Z

I did some progress.
https://0bin.net/paste/-xcYpHw9K14DhHCD#lu0DluLNFacuTV2Hcik+-C4kHA6e8cc1xxpAFzyv88E
If I "space q R" while in the <template> tag then reopen the file with "space f r", indentation works fine. If I'm in the <script> or <style> tag, the indentation is off.
mmm-mode 0.5.5
vue-mode 20180105.111
emacs 25.3.1

AdamNiederer · 2018-04-12T00:56:56Z

It looks like your paste has expired. Could you dump a minimal example in a comment here?

Yamakaky · 2018-04-14T08:29:18Z

Oops, sorry https://0bin.net/paste/6nm9WpmEwN9ecM0S#H5om5vukLPRKvV4hVVTpa5lvSw+PYkS5Wv-I2IVyAGm
I tried to trim it down, but sometimes the indentation problem is fixed...

AdamNiederer · 2018-04-14T23:15:41Z

Looks good to me; this is what I get when indenting the whole component

<script>
export default {
  data() {
    return {
      username: null,
      password: null,
      error: false,
    }
  },
  
  methods: {
    login() {
      if (!this.seems_good) {
        return false
      }
      
      const success = () => this.$router.push({ name: "root" })
      const error = () => {
        this.error = true
        this.password = null
      }
      this.$store.dispatch('reconnect', {
        username: this.username,
        password: this.password,
      }).then(success, error)
    },
  },
  
  computed: {
    seems_good() {
      return !!(this.username && this.password)
    },
  },
}
</script>

Yamakaky · 2018-04-15T11:42:35Z

Hum, did you try the instructions in my 2nd post?

AdamNiederer · 2018-04-15T18:42:02Z

Yep, still unable to reproduce.

BlindingDark · 2018-06-21T07:11:01Z

I think > in arrow function cause this problem.
seems it treat this as a tag (<>)

Yamakaky · 2018-06-23T16:20:51Z

Hum, could be it

differentMonster · 2019-01-28T04:47:38Z

i am having the same problem , the script tag and my js code is all white , sometimes it detect as js file , is there any way to fix it ?

aki-s · 2019-09-04T23:41:06Z

Hi, I had the same problem.
If I set syntax-ppss-table to nil in the buffer where this problem happens, then this problem is fixed.

My env

Emacs26.3 (Ubuntu 18)
vue-mode 20190415.231
lsp-vue 20181030.1136

felipebalbi · 2019-09-05T08:21:18Z

Same thing here. Setting syntax-ppss-table to nil solves it as well

Emacs 26.3 (Arch Linux)
vue-mode 20190415.231
lsp-vue 20181030.1136

pashinin · 2019-09-05T20:09:38Z

@aki-s, @felipebalbi How to do it automatically? Tried some hooks.. didn't work.

Edit: something like this:

(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))

felipebalbi · 2019-09-06T09:58:04Z

@pashinin should be something like so:

(add-hook 'js-mode-hook (lambda () (setq syntax-ppss-table nil)))

pera · 2019-10-02T18:26:19Z

Setting syntax-ppss-table to nil also fixed the issue to me, are there any side effects? couldn't quite understand the docs

bhanuvrat · 2019-10-05T16:03:23Z

for me syntax-ppss-table does not exist.

jcs090218 · 2019-10-07T15:46:34Z

I got indentation error in script tag with multi-line comment in here. Anyone having the same issue?

<script>
/**
 *
 */
</script>

lzhoucs · 2019-10-08T21:25:40Z

ran into the same issue on 26.3. Switching to 26.2 works, with the exact same packages and config.

Tried the following fix but it doesn't seem to work.

(add-hook 'js-mode-hook (lambda () (setq syntax-ppss-table nil)))

Tried the following and it works.

(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))

For example, it was happening in vue-mode. See: AdamNiederer/vue-mode#74 (comment)

syrkuit · 2019-11-25T18:39:39Z

no syntax-ppss-table for me either.

azzamsa · 2019-12-13T12:39:57Z

(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))

didn't work for me. Emacs 26.1

pbgc · 2019-12-13T14:27:53Z

@azzamsa The problem only occurs with Emacs 23.3 ... with 26.1 and 26.2 you should not need those lines

azzamsa · 2019-12-14T03:11:27Z

@pbgc yes. Turns out I've put wrong line (add-hook 'vue-mode-hook #'prettier-js). Everything works out-of the box after removing it.

I am using stock Emacs, and I've documented the steps here Setup Emacs for Vue.js Development

Stazer · 2019-12-19T20:48:07Z

ran into the same issue on 26.3. Switching to 26.2 works, with the exact same packages and config.

Tried the following fix but it doesn't seem to work.

(add-hook 'js-mode-hook (lambda () (setq syntax-ppss-table nil)))

Tried the following and it works.
(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))

Works for me as well with emacs 26.3 and spacemacs distribution. I just added the expression to the user-config block.

machack666 · 2020-01-22T19:08:28Z

This worked for me (Emacs 26.3):

(add-hook 'vue-mode-hook (lambda () (setq syntax-ppss-table nil)))

Note the difference in the hook name compared to some of the answers above.

sp3c73r2038 · 2020-04-03T06:15:29Z

This worked for me (Emacs 26.3):
(add-hook 'vue-mode-hook (lambda () (setq syntax-ppss-table nil)))
Note the difference in the hook name compared to some of the answers above.

Confirmed working with Emacs 26.3

srcrip · 2020-04-17T23:06:05Z

Do we know why this happens and can this be set upstream in vue-mode instead of in all our configs?

AlexDaniel · 2020-11-05T13:12:38Z

~~Doom Emacs (Emacs 27.1), the workaround does not work. When applied, indentation and syntax highlighting in <script> section starts working, but indentation breaks for <template>.~~ (Actually, it works, read the comments below!)

AlexDaniel · 2020-11-05T13:31:05Z

Ah, it seems like some kind of fix was applied in mmm-mode, but the last release (0.5.7) was in 2018. That said, if you install the latest version from the git repo, the workaround mentioned in this ticket is no longer needed, highlighting and indentation works fine in <script> sections!

However, indentation in <template> is still broken :(

AlexDaniel · 2020-11-05T15:44:02Z

Taking my words back, it's just that the issue is very intermittent and honestly vue-mode right now is completely unusable with emacs 27. Very often it doesn't even detect the scoped sections, in which case mmm-parse-buffer can help a little bit. But even then, the syntax highlighting is usually broken unless you edit affected lines, and indentation is broken but in a very intermittent way. :(

pbgc · 2020-11-05T15:48:19Z

@AlexDaniel I use vue-mode with Emacs 27 (stock emacs with custom configuration) and lsp-mode everyday without any problem!

pbgc · 2020-11-05T15:50:23Z

@AlexDaniel my conf for vue is:

(require 'vue-mode)
(add-hook 'vue-mode-hook #'lsp-deferred)

(defun vuejs-custom ()
  (setq vue-html-tab-width 2)
  (global-set-key (kbd "C-c C-l") 'vue-mode-reparse)
  (global-set-key (kbd "C-c C-e") 'vue-mode-edit-indirect-at-point)
  (add-to-list 'write-file-functions 'delete-trailing-whitespace)
  (turn-on-diff-hl-mode))

(add-hook 'vue-mode-hook 'vuejs-custom)

(setq mmm-submode-decoration-level 0)

(defun js-custom ()
  (flycheck-mode t)
  (company-mode)
  (set (make-local-variable 'tab-width) 2)
  (setq js-indent-level 2))

(add-hook 'js-mode-hook 'js-custom)

(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))

AlexDaniel · 2020-11-05T16:23:27Z

@pbgc thank you very much for your config! I think you're right. I managed to get it working more or less (but mostly more!). Knowing that it works for you, I started digging. Turns out there was a conflict with hl-todo package. I disabled hl-todo for now, and vue-mode seems to be working! Thank you!

AlexDaniel · 2021-01-16T11:14:01Z

Actually, no, it is very broken, I'd say even unusable. There's at least one very explicit issue, which is reported here: dgutov/mmm-mode#112

When using it, it constantly loses highlighting and almost always gets confused about indentation.

pbgc · 2021-01-16T13:16:49Z

@AlexDaniel I'm using:

Emacs 27.1
vue-mode 20190415.231
mmm-mode 20200908.2236

and I DON'T have those problems and use vue mode every single day!
Occasionally a little glitch but nothing major! and the experience with this setup and lsp mode for vue files is great!

AlexDaniel · 2021-01-16T15:08:25Z

Occasionally a little glitch

Yeah, it is much more often for me than just occasionally. Good to know that it is also buggy for you, so it's not just my setup.

I tried this approach and it works: #109

We'll see how it goes, but so far it is almost perfect.

AdamNiederer/vue-mode#74 (comment)

AdamNiederer added the need info label Apr 8, 2018

bhanuvrat mentioned this issue Oct 6, 2019

script tag indents everything at column 0 #97

Closed

elim added a commit to elim/dotemacs that referenced this issue Oct 18, 2019

Hack to indentation problem of JS and TS in mmm-mode

30f952f

For example, it was happening in vue-mode. See: AdamNiederer/vue-mode#74 (comment)

rickardsundin mentioned this issue Jan 7, 2020

Indentation isn't working in the <script> tag. #100

Open

Jevri mentioned this issue Aug 24, 2020

Make typescript-mode compatible with mmm-mode emacs-typescript/typescript.el#128

Closed

AlexDaniel mentioned this issue Nov 5, 2020

New release? dgutov/mmm-mode#118

Closed

tomiacannondale added a commit to tomiacannondale/dot.emacs.d that referenced this issue Dec 14, 2021

Fix indent in Vue file

8d6687b

AdamNiederer/vue-mode#74 (comment)

Indentation problems in <script> tags #74

Indentation problems in <script> tags #74

Comments

Yamakaky commented Apr 8, 2018

AdamNiederer commented Apr 8, 2018

Yamakaky commented Apr 10, 2018 • edited Loading

AdamNiederer commented Apr 12, 2018

Yamakaky commented Apr 14, 2018

AdamNiederer commented Apr 14, 2018

Yamakaky commented Apr 15, 2018

AdamNiederer commented Apr 15, 2018

BlindingDark commented Jun 21, 2018

Yamakaky commented Jun 23, 2018

differentMonster commented Jan 28, 2019

aki-s commented Sep 4, 2019

My env

felipebalbi commented Sep 5, 2019 • edited Loading

pashinin commented Sep 5, 2019 • edited Loading

felipebalbi commented Sep 6, 2019

pera commented Oct 2, 2019

bhanuvrat commented Oct 5, 2019

jcs090218 commented Oct 7, 2019 • edited Loading

lzhoucs commented Oct 8, 2019

syrkuit commented Nov 25, 2019

azzamsa commented Dec 13, 2019

pbgc commented Dec 13, 2019

azzamsa commented Dec 14, 2019 • edited Loading

Stazer commented Dec 19, 2019

machack666 commented Jan 22, 2020 • edited Loading

sp3c73r2038 commented Apr 3, 2020 • edited Loading

srcrip commented Apr 17, 2020

AlexDaniel commented Nov 5, 2020 • edited Loading

AlexDaniel commented Nov 5, 2020

AlexDaniel commented Nov 5, 2020

pbgc commented Nov 5, 2020

pbgc commented Nov 5, 2020 • edited Loading

AlexDaniel commented Nov 5, 2020

AlexDaniel commented Jan 16, 2021

pbgc commented Jan 16, 2021

AlexDaniel commented Jan 16, 2021

Yamakaky commented Apr 10, 2018 •

edited

Loading

felipebalbi commented Sep 5, 2019 •

edited

Loading

pashinin commented Sep 5, 2019 •

edited

Loading

jcs090218 commented Oct 7, 2019 •

edited

Loading

azzamsa commented Dec 14, 2019 •

edited

Loading

machack666 commented Jan 22, 2020 •

edited

Loading

sp3c73r2038 commented Apr 3, 2020 •

edited

Loading

AlexDaniel commented Nov 5, 2020 •

edited

Loading

pbgc commented Nov 5, 2020 •

edited

Loading