Incorrect TypeScript comment style on Vue files

[j-a-m-l]

This is an example of how these lines are commented when the language is TypeScript:

<template lang="pug">
</template>

<script lang="ts">
import { dispatch, get } from 'vuex-pathify'
import Vue from '../config'

// const value: string = 'asa' 

// const works = {
//   only: 'value',
}

const works = {
  <!-- value -->
}

function() {
  <!-- callIt() -->
}

export default Vue.component('User', {
  // // From this line (`gc4j`)
  // otherOptions: {
  //   example: true,
  //   other: false
  // },
  computed: {
    <!-- user: get('users/current'), -->
    <!-- other: get('users/other'), -->
  },
  data: () => ({
    <!-- isFetchingUsers: false, -->
  }),
  methods: {
    async fetchUsers () {
      // This works
      // await dispatch('users/fetchAll')
    },
  },
})
</script>

I've discovered that this occur inside braces, but not in every case: if the command is triggered from a line that contains the brace, it may work correctly.

When setting the language to JavaScript, the comments are done correctly.

[tomtom]

Could you please post the output of `:echo tcomment#debug#CollectInfo()` with the cursor placed on the locations in question. Please see also `:help tcomment-debug`. Regards

[j-a-m-l]

In an example with:

    toggleModal: {
      type: Function,
      required: true
    },

Commenting each line I get:

    toggleModal: {
      // type: Function,
      <!-- required: true -->
    },

The result of your command is, on the first line:

TCOMMENT: &ft = vue.pug.html.javascript.css.typescript => vue.pug.html.javascript.css.typescript
TCOMMENT: stx = typescriptReserved => typescriptReserved
TCOMMENT: ct  = {'rxmid': '', 'rxend': '', 'commentstring': '// %s', 'commentstring_rx': '\%%(// %s\|/* %s */\)', 'mode': '', 'filetype': 'typescript', 'replacements': {'*/': {'subst': '|)}>#', 'guard_rx': '^\s*/\?\*'}, '/*': {'subst': '#<{(|', 'guard_rx': '^\s*/\?\*'}}, 'rxbeg': '\*\+'}

On the second line:

TCOMMENT: &ft = vue.pug.html.javascript.css.typescript => vue.pug.html.javascript.css.typescript
TCOMMENT: stx = vue_typescript => vue_typescript
TCOMMENT: ct  = {'commentstring': '<!--%s-->', 'mode': '', 'whitespace': 'both'}

[kuntau]

Hi. I'm just going to say second on this. Here is my debug info

TCOMMENT: &ft = vue => vue
TCOMMENT: stx = typeScriptIdentifier => typeScriptIdentifier
TCOMMENT: ct  = {'commentstring': '<!--%s-->', 'mode': '', 'filetype': 'typeScript'}

I should add that sometimes tcomment does get it right with //. Maybe if we jump frequently between sections tcomment got confused.

[smackesey]

I also have problems in Vue files, specifically with Pug. Some lines in Pug get detected as HTML and an HTML comment style is used. This has been discussed before in #176.

I attempted to debug the issues myself. The code is dense and hard to understand for an outsider, but tComment is attempting to deduce the filetype, and thus comment string to use, from the syntax groups around the cursor. I'm not sure of how this algorithm works.

Something I think would really help here is a little clarification in the docs of how embedded filetypes are detected and how exactly users can configure it to override the default mechanism. Right now the docs are pretty confusing. There appear to be many different functions for doing embedded filetype detection: tcomment#filetype#guess, tcomment#filetype#guess_X, tcomment#filetype#Guess, tcomment#filetype#GetAlt, tcomment#GuessFiletype... There is no unifying explanation of how all this stuff works together, which could probably be done in a paragraph or two.

(BTW, the tag name for tcomment#GuessFileType in docs is wrong, right now it is filed under tcomment#GuessCommentType.)

Alternatively, (and IMHO even better), just let the user provide a hook that performs the filetype detection. This is an easy solution for @tomtom that takes the burden of handling edge case embedded filetype detection off his shoulders. Shougo's https://github.com/Shougo/context_filetype.vim is a dedicated plugin for detecting embedded filetypes (it works great in Vue files). So you could just do something like this:

g:tcomment#filetype#guess = { -> context_filetype#get().filetype }

If this function were defined, it would be called in place of tComment's detection algorithm.