Spacevim: TSX files set filetype to `typescriptreact` and lose syntax highlighting

Created on 31 Oct 2019  ·  3Comments  ·  Source: SpaceVim/SpaceVim

Expected behavior, english is required

I expect tsx files to have the same functionality as .ts files

When loading a .tsx file it should either support typescriptreact filetype for syntax highlighting or should use typescript.tsx filetype: https://github.com/peitalin/vim-jsx-typescript

If supporting typescript.tsx filetype the typescript language server should also be supported for this filetype.

The reproduce ways from Vim starting (Required!)

Create a new .tsx file with some JSX elements, notice the filetype is set to typescriptreact and syntax highlighting isn't present.

Debug info

The command to generate debug info isn't working for me. This is the output from :SPDebugInfo

SpaceVim debug information

SpaceVim options :

  auto_disable_touchpad = 1
  autocomplete_method = 'deoplete'
  autocomplete_parens = 1
  background = 'dark'
  bootstrap_before = 'myspacevim#before'
  buffer_index_type = 4
  checkinstall = 1
  colorscheme = 'dracula'
  colorscheme_bg = 'dark'
  colorscheme_default = 'desert'
  commandline_prompt = '➭'
  custom_color_palette = []
  custom_plugins = [['dracula/vim', {'name': 'dracula/vim', 'merged': 0}], ['vimwiki/vimwiki', {'name': 'vimwiki/vimwiki', 'merged': 0}], ['shabegom/taskwiki', {'name': 'shabegom/
taskwiki', 'merged': 0}], ['powerman/vim-plugin-AnsiEsc', {'name': 'powerman/vim-plugin-AnsiEsc', 'merged': 0}], ['farseer90718/vim-taskwarrior', {'name': 'farseer90718/vim-taskwa
rrior', 'merged': 0}], ['JamshedVesuna/vim-markdown-preview', {'name': 'JamshedVesuna/vim-markdown-preview', 'merged': 0, 'on_ft': ['markdown']}], ['vim-scripts/TaskList.vim', {'n
ame': 'vim-scripts/TaskList.vim', 'merged': 0}], ['yardnsm/vim-import-cost', {'name': 'yardnsm/vim-import-cost', 'merged': 0}], ['leafgarland/typescript-vim', {'name': 'leafgarlan
d/typescript-vim', 'merged': 0}], ['peitalin/vim-jsx-typescript', {'name': 'peitalin/vim-jsx-typescript', 'merged': 0}]]
  debug_level = 1
  default_indent = 4
  disabled_plugins = ['markdown-preview.nvim']
  enable_ale = 1
  enable_bepo_layout = 0
  enable_cursorcolumn = 0
  enable_cursorline = 1
  enable_debug = 0
  enable_googlesuggest = 1
  enable_guicolors = 1
  enable_insert_leader = 1
  enable_javacomplete2_py = 0
  enable_key_frequency = 0
  enable_language_specific_leader = 1
  enable_neocomplcache = 0
  enable_neomake = 1
  enable_os_fileformat_icon = 0
  enable_powerline_fonts = 1
  enable_statusline_bfpath = 0
  enable_statusline_display_mode = 0
  enable_statusline_mode = 1
  enable_statusline_tag = 1
  enable_tabline_filetype_icon = 1
  enable_tabline_ft_icon = 0
  enable_vimfiler_filetypeicon = 0
  enable_vimfiler_gitstatus = 0
  enable_vimfiler_welcome = 1
  enable_ycm = 0
  error_symbol = '✖'
  expand_tab = 1
  filemanager = 'vimfiler'
  filetree_direction = 'right'
  filetype_icons = {}
  force_global_config = 0
  gitcommit_issue_icon = ''
  gitcommit_pr_icon = ''
  github_username = ''
  guifont = 'FiraCode'
  hiddenfileinfo = 1
  home_files_number = 6
  hosts_url = 'https://raw.githubusercontent.com/racaljk/hosts/master/hosts'
  info_symbol = 'ⓘ'
  keep_server_alive = 1
  language = ''
  leader_guide_default_group_name = ''
  leader_guide_flatten = 1
  leader_guide_hspace = 5
  leader_guide_max_size = 0
  leader_guide_position = 'botright'
  leader_guide_run_map_on_popup = 1
  leader_guide_sort_horizontal = 0
  leader_guide_submode_mappings = {'<C-C>': 'win_close'}
  leader_guide_vertical = 0
  lint_on_save = 1
  lint_on_the_fly = 1
  max_column = 120
  plugin_bundle_dir = '/Users/shbgm/.cache/vimfiles/'
  plugin_manager = 'dein'
  plugin_manager_processes = 16
  plugin_name = 'gtags.vim'
project_rooter_automatically = 1
  project_rooter_patterns = ['.git/', '_darcs/', '.hg/', '.bzr/', '.svn/', 'package.json', '.SpaceVim.d/']
  realtime_leader_guide = 1
  relativenumber = 1
  search_tools = ['rg', 'ag', 'pt', 'ack', 'grep', 'findstr']
  sidebar_direction = ''
  sidebar_width = 30
  smartcloseignoreft = ['tagbar', 'vimfiler', 'defx', 'SpaceVimRunner', 'SpaceVimREPL', 'SpaceVimQuickFix', 'HelpDescribe', 'VebuggerShell', 'VebuggerTerminal', 'SpaceVimTabsManag
er']
  smartcloseignorewin = ['__Tagbar__', 'vimfiler:default']
  snippet_engine = 'neosnippet'
  src_root = 'E:\sources\'
  statusline_inactive_separator = 'arrow'
  statusline_iseparator = 'nil'
  statusline_left_sections = ['winnr', 'filename', 'major mode', 'search count', 'syntax checking', 'minor mode lighters', 'vcs', 'hunks']
  statusline_right_sections = ['fileformat', 'cursorpos', 'percentage']
  statusline_separator = 'arrow'
  statusline_unicode_symbols = 1
  terminal_cursor_shape = 2
  update_retry_cnt = 3
  version = '1.3.0-dev'
  vim_help_language = 'en'
  vimcompatible = 0
  warning_symbol = '⚠'
  wildignore = '*/tmp/*,*.so,*.swp,*.zip,*.class,tags,*.jpg,*.ttf,*.TTF,*.png,*/target/*,.git,.svn,.hg,.DS_Store,*.svg'
  windows_index_type = 3
  windows_leader = 's'
  windows_smartclose = 'q'

SpaceVim layers :

[[layers]]
  name="autocomplete"
  auto-completion-return-key-behavior='complete'
  auto-completion-tab-key-behavior='smart'
[[layers]]
  name="checkers"
[[layers]]
  name="format"
[[layers]]
  name="edit"
[[layers]]
  name="ui"
[[layers]]
  name="core"
[[layers]]
  name="core#banner"
[[layers]]
  name="core#statusline"
[[layers]]
  name="core#tabline"
[[layers]]
  name="shell"
  default_position='top'
  default_height=30
[[layers]]
  name="colorscheme"
[[layers]]
  name="git"
[[layers]]
  name="denite"
[[layers]]
  name="lang#html"
[[layers]]
  name="lang#graphql"
[[layers]]
  name="lang#dockerfile"
[[layers]]
  name="lang#lua"
[[layers]]
  name="lang#markdown"
[[layers]]
  name="lang#vim"
[[layers]]
  name="lang#toml"
[[layers]]
  name="lang#sh"
[[layers]]
  name="lang#javascript"
 auto_fix=1
[[layers]]
  name="lang#typescript"
  auto_fix=1
[[layers]]
  name="lang#json"
[[layers]]
  name="lang#extra"
[[layers]]
  name="lang#php"
[[layers]]
  name="lang#processing"
[[layers]]
  name="lang#ruby"
[[layers]]
  name="lang#python"
[[layers]]
  name="exprfold"
[[layers]]
  name="incsearch"
[[layers]]
  name="tmux"
[[layers]]
  name="VersionControl"
[[layers]]
  name="debug"
[[layers]]
  name="sudo"
[[layers]]
  name="tools"
[[layers]]
  name="tools#screensaver"
[[layers]]
  name="unite"
[[layers]]
  name="lsp"
  override_cmd={'typescriptreact': ['typescript-language-server', '--stdio']}
  filetypes=['javascript', 'html', 'php', 'typescript', 'typescript.tsx', 'typescriptreact', 'css']
[[layers]]
  name="tools#dash"
[[layers]]
  name="gtags"
  gtagslabel='universal ctags'
[[layers]]
  name="test"
[[layers]]
  name="-l"

As you can see I tried to setup typescriptreact as a command overrride, but it doesn't appear to work.

Most helpful comment

Ok, so I think I found a solution:

augroup SyntaxSettings
    autocmd!
    autocmd BufNewFile,BufRead *.tsx set filetype=typescript
augroup END

I removed the plugin that added typescript.tsx filetype and autocmd .tsx files to use typescript. The syntax highlighting isn't as good but is there. The language server also works now. One issue is that the first .tsx file I open throws all kinds of wrong errors, but that is livable.

I'll close this issue since I have a bandaid. Would be great to support typescript.tsx filetype in the future.

All 3 comments

I should add that I resolved the syntax highlighting problem by installing the plugins for typescript.tsx filetype, but none of the language server feature work.

Looking at autoload/SpaceVim/layers/lang/typescript.vim it looks like y'all are already loading the recommended plugins for typescript, but the filetype is only looking for typescript. I might try to open a PR with typescript.tsx. I don't really know what I'm doing with vimscript though.

Ok, so I think I found a solution:

augroup SyntaxSettings
    autocmd!
    autocmd BufNewFile,BufRead *.tsx set filetype=typescript
augroup END

I removed the plugin that added typescript.tsx filetype and autocmd .tsx files to use typescript. The syntax highlighting isn't as good but is there. The language server also works now. One issue is that the first .tsx file I open throws all kinds of wrong errors, but that is livable.

I'll close this issue since I have a bandaid. Would be great to support typescript.tsx filetype in the future.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

teemola picture teemola  ·  5Comments

zeroasterisk picture zeroasterisk  ·  5Comments

wsdjeg picture wsdjeg  ·  3Comments

keai4le picture keai4le  ·  4Comments

wsdjeg picture wsdjeg  ·  3Comments