Indentation problems in <script> tags

[Yamakaky]

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?

[AdamNiederer]

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]

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]

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

[Yamakaky]

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

[AdamNiederer]

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]

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

[AdamNiederer]

Yep, still unable to reproduce.

[BlindingDark]

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

[Yamakaky]

Hum, could be it

[differentMonster]

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]

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]

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]

@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]

@pashinin should be something like so:

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

[pera]

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

[bhanuvrat]

for me syntax-ppss-table does not exist.

[jcs090218]

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

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

[lzhoucs]

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

[syrkuit]

no syntax-ppss-table for me either.

[azzamsa]

(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]

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

[azzamsa]

@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]

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]

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]

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]

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

[AlexDaniel]

~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]

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]

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]

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