search

sainnhe / everforest

🌲 Comfortable & Pleasant Color Scheme for Vim
MIT License
2.95k stars 132 forks source link

Proper Syntax highlighting is not there for react js files #58

Closed athuld closed 3 years ago

athuld commented 3 years ago

Operating system/version

Arch Linux

Terminal emulator/version

ST ( simple terminal )

$TERM environment variable

st-256color

Tmux version

tmux 3.2a

Feature matrix

floaterm: health#floaterm#check
========================================================================
## common
  - INFO: Platform: linux
  - INFO: Nvim: NVIM v0.6.0-dev+513-ga5d6f36fc
  - INFO: Plugin: 9716765

## terminal
  - OK: Terminal emulator is available

## floating
  - OK: Floating window is available

lspconfig: require("lspconfig.health").check()
========================================================================
  - INFO: flow: configuration checked.
  - INFO: cssls: configuration checked.
  - INFO: tsserver: configuration checked.
  - INFO: go: configuration checked.

nvim: health#nvim#check
========================================================================
## Configuration
  - OK: no issues found

## Performance
  - OK: Build type: RelWithDebInfo

## Remote Plugins
  - OK: Up to date

## terminal
  - INFO: key_backspace (kbs) terminfo entry: key_backspace=\177
  - INFO: key_dc (kdch1) terminfo entry: key_dc=\E[3~

nvim-treesitter: require("nvim-treesitter.health").check()
========================================================================
## Installation
  - OK: `tree-sitter` found  0.20.0 (parser generator, only needed for :TSInstallFromGrammar)
  - OK: `node` found v16.11.1 (only needed for :TSInstallFromGrammar)
  - OK: `git` executable found.
  - OK: `cc` executable found. Selected from { vim.NIL, "cc", "gcc", "clang", "cl", "zig" }
    Version: cc (GCC) 11.1.0
  - OK: Neovim was compiled with tree-sitter runtime ABI version 13 (required >=13). Parsers must be compatible with runtime ABI.

## Parser/Features H L F I J
  - python         ✓ ✓ ✓ ✓ ✓ 
  - lua            ✓ ✓ ✓ ✓ ✓ 
  - go             ✓ ✓ ✓ ✓ ✓ 
  - json           ✓ ✓ ✓ ✓ . 
  - php            ✓ ✓ ✓ ✓ ✓ 
  - typescript     ✓ ✓ ✓ ✓ ✓ 
  - css            ✓ . ✓ ✓ ✓ 
  - java           ✓ ✓ . ✓ ✓ 
  - bash           ✓ ✓ ✓ . ✓ 
  - vim            ✓ ✓ . . ✓ 
  - tsx            ✓ ✓ ✓ ✓ ✓ 
  - javascript     ✓ ✓ ✓ ✓ ✓ 
  - html           ✓ ✓ ✓ ✓ ✓ 
  - scss           ✓ . . ✓ . 

  Legend: H[ighlight], L[ocals], F[olds], I[ndents], In[j]ections
         +) multiple parsers found, only one will be used
         x) errors found in the query, try to run :TSUpdate {lang}

provider: health#provider#check
========================================================================
## Clipboard (optional)
  - OK: Clipboard tool found: xclip

## Python 2 provider (optional)
  - WARNING: No Python executable found that can `import neovim`. Using the first available executable for diagnostics.
  - ERROR: Python provider error:
    - ADVICE:
      - provider/pythonx: Could not load Python 2:
          /usr/bin/python2 does not have the "neovim" module. :help |provider-python|
          /usr/bin/python2.7 does not have the "neovim" module. :help |provider-python|
          python2.6 not found in search path or not executable.
          /usr/bin/python is Python 3.9 and cannot provide Python 2.
  - INFO: Executable: Not found

## Python 3 provider (optional)
  - INFO: `g:python3_host_prog` is not set.  Searching for python3 in the environment.
  - INFO: Multiple python3 executables found.  Set `g:python3_host_prog` to avoid surprises.
  - INFO: Executable: /usr/bin/python3
  - INFO: Other python executable: /bin/python3
  - INFO: Python version: 3.9.7
  - INFO: pynvim version: 0.4.3
  - OK: Latest pynvim is installed.

## Python virtualenv
  - OK: no $VIRTUAL_ENV

## Ruby provider (optional)
  - INFO: Ruby: ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux]
  - WARNING: `neovim-ruby-host` not found.
    - ADVICE:
      - Run `gem install neovim` to ensure the neovim RubyGem is installed.
      - Run `gem environment` to ensure the gem bin directory is in $PATH.
      - If you are using rvm/rbenv/chruby, try "rehashing".
      - See :help |g:ruby_host_prog| for non-standard gem installations.

## Node.js provider (optional)
  - INFO: Node.js: v16.11.1
  - WARNING: Missing "neovim" npm (or yarn) package.
    - ADVICE:
      - Run in shell: npm install -g neovim
      - Run in shell (if you use yarn): yarn global add neovim

## Perl provider (optional)
  - ERROR: perl provider error:
    - ADVICE:
      - "Neovim::Ext" cpan module is not installed

rnvimr: health#rnvimr#check
========================================================================
## OS
  - OK: Name: Linux

## Ranger
  - OK: Version: ranger 1.9.3

## Python
  - OK: Version: 3.9.7 (default, Oct 10 2021, 15:13:22) [GCC 11.1.0]

## Pynvim
  - OK: Version: 0.4.3

## Ueberzug (optional)
  - OK: Ueberzug is ready

## RPC
  - OK: RPC echo: Neovim send "Give me five!" and receive "Give me five!"

telescope: require("telescope.health").check()
========================================================================
## Checking for required plugins
  - OK: plenary installed.
  - OK: nvim-treesitter installed.

## Checking external dependencies
  - OK: rg: found ripgrep 13.0.0
  - WARNING: fd: not found. Install [sharkdp/fd](https://github.com/sharkdp/fd) for extended capabilities

## ===== Installed extensions =====

vim.lsp: require("vim.lsp.health").check()
========================================================================
  - INFO: LSP log level : WARN
  - INFO: Log path: /home/athul/.cache/nvim/lsp.log
  - INFO: Log size: 632 KB

vim.treesitter: require("vim.treesitter.health").check()
========================================================================
  - INFO: Runtime ABI version : 13
  - OK: Loaded parser for bash: ABI version 13
  - OK: Loaded parser for css: ABI version 13
  - OK: Loaded parser for go: ABI version 13
  - OK: Loaded parser for html: ABI version 13
  - OK: Loaded parser for java: ABI version 13
  - OK: Loaded parser for javascript: ABI version 13
  - OK: Loaded parser for json: ABI version 13
  - OK: Loaded parser for lua: ABI version 13
  - OK: Loaded parser for php: ABI version 13
  - OK: Loaded parser for python: ABI version 13
  - OK: Loaded parser for scss: ABI version 13
  - OK: Loaded parser for tsx: ABI version 13
  - OK: Loaded parser for typescript: ABI version 13
  - OK: Loaded parser for vim: ABI version 13

Minimal vimrc that can reproduce this bug.

call plug#begin('~/.vim/plugged')
    Plug 'sainnhe/everforest'
    Plug 'nvim-treesitter/nvim-treesitter', {'do': ':TSUpdate'}
call plug#end()

set background=dark
let g:everforest_better_performance = 1
let g:everforest_background = 'medium'
let g:everforest_diagnostic_text_highlight = 1
let g:everforest_diagnostic_line_highlight = 1
let g:everforest_enable_italic = 1
let g:everforest_diagnostic_virtual_text = 'colored'
colorscheme everforest

lua <<EOF
---Nvim Treesitter
require'nvim-treesitter.configs'.setup {
  highlight = {
    enable = true,
  },
  indent = {
    enable = false,
    disable = {},
  },
  ensure_installed = {
    "tsx",
    "javascript",
    "json",
    "html",
  },
}

local parser_config = require "nvim-treesitter.parsers".get_parser_configs()
parser_config.tsx.used_by = { "javascript", "typescript.tsx" }
EOF

Steps to reproduce this bug using minimal vimrc

Open up any react file and proper highlighting won't be there in any return statements

Expected behavior

image

The above image is from the everforest plugin in vs code and it has proper syntax highlighting

So i thought maybe it's my fault because of my neovim config but when i tried out another theme plugin proper syntax hightlighting was there.

image

The above image is from onenord theme on the same neovim configuration

Actual behavior

Below shows the actual behavior i'm getting from everforest theme on neovim with no proper syntax highlighting

image

P.S This is the same behaviour i'm getting from all your other themes also like edge and sonokai

Could you please look into this issue it would be a great help as everforest is the only theme my eyes are comfortable with

sainnhe commented 3 years ago

Unlike semantic highlighting in vscode which can modify colors in a specific file type

  "semanticTokenColors": {
    "operatorOverload": "#e78a4e",
    "memberOperatorOverload": "#e78a4e",
    "variable.defaultLibrary:javascript": "#d3869b",
    "property.defaultLibrary:javascript": "#d3869b",
    "variable.defaultLibrary:javascriptreact": "#d3869b",
    "property.defaultLibrary:javascriptreact": "#d3869b",
    "class:typescript": "#89b482",
    "interface:typescript": "#89b482",
    "enum:typescript": "#d3869b",
    "enumMember:typescript": "#7daea3",
    "namespace:typescript": "#d3869b",
    "variable.defaultLibrary:typescript": "#d3869b",
    "property.defaultLibrary:typescript": "#d3869b",
    "class:typescriptreact": "#89b482",
    "interface:typescriptreact": "#89b482",
    "enum:typescriptreact": "#d3869b",
    "enumMember:typescriptreact": "#7daea3",
    "namespace:typescriptreact": "#d3869b",
    "variable.defaultLibrary:typescriptreact": "#d3869b",
    "property.defaultLibrary:typescriptreact": "#d3869b",
    "intrinsic:python": "#d3869b",
    "module:python": "#7daea3",
    "class:python": "#89b482",
    "macro:rust": "#89b482",
    "namespace:rust": "#d3869b",
    "selfKeyword:rust": "#d3869b"
  },

the highlighting in nvim-treesitter will affect all file types and can't be changed only for a specific file type.

https://github.com/sainnhe/everforest/blob/f8b8490774ca75a98ddc51e571dfebee069d89b5/colors/everforest.vim#L388-L443

That's said, I can't optimize the highlighting in react js while NOT affecting the highlights in other file types.

So modifying tree-sitter highlights is not a good idea, this will cause many side effects.

I'd suggest you installing vim-polyglot and disable tree-sitter for react js and other file types that doesn't have a good overall highlighting, fall back to use the classic vim highlighting in these file type instead.

The classic vim highlighting has been carefully optimized for most of common file types, it should work fine in general, but the highlighting may not be as precise as it is in tree-sitter, this is restricted by the classic vim highlighting engine.

Another solution is that if you are using coc.nvim, you can try semantic highlighting provided by language server, it's very precise, but currently only a small amount of language servers support this feature.