yuezk/vim-js

💯The most accurate syntax highlighting plugin for JavaScript and Flow.js

vim-js

A Vim syntax highlighting plugin for JavaScript and Flow.js

Pros.

• Better support for modern JavaScript features (decorators, private members, numeric separators, optional chaining, etc.)
• Better support for Flow.js syntax
• Better support for JSDoc syntax
• More accurate syntax groups, for easy colorscheme customization

Install

1. Choose your favourite plugin manager (e.g. vim-plug)
2. Install it with Plug 'yuezk/vim-js'

Highlight JSX Syntax

Please use vim-jsx-pretty to highlight the JSX syntax. It's another plugin I currently maintain.

Plug 'maxmellon/vim-jsx-pretty'

License

MIT License

vim-js's Issues

Syntax color problem for a comment inside a complex Flow type

I've just seen a similar problem to #13, but this time with ' inside a comment, and the comment itself inside some complex Flow typing:

export type GeckoSamples = {|
  schema:
    | {|
        stack: 0,
        time: 1,
        responsiveness: 2,
      |}
    | {|
        stack: 0,
        time: 1,
        eventDelay: 2,
      |},
  data: Array<
    [
      null | IndexIntoGeckoStackTable,
      Milliseconds, // since profile.meta.startTime
      // milliseconds since the last event was processed in this
      // thread's event loop at the time that the sample was taken
      Milliseconds
    ]
  >,
|};

Gives

I think the comment itself isn't found as a comment, and that's the real source of the problem here; and this is arguably a complex piece of syntax here :-)

Broken if-else without braces

This code

if (condition) statement;
else statement;

produces incorrect highlight for else.

Highlight broken when using flow generic types

const pick = <O: Object, K: { [string]: 0 }>(obj: O, ks: K): $Pick<O, K> => {
  const result: any = {};
  const keys = Object.keys(ks);
  for (let i = 0, n = keys.length; i < n; i++) {
    const key = keys[i];
    result[key] = obj[key];
  }
  return result;
};

const FormRow = styled.div`
`;

const FormCaption = ({ children }) => (
  <FormCaptionInner>
    <strong>{children}</strong>
  </FormCaptionInner>
);

const FormCaptionInner = styled.div`
  text-align: right;
`;

jsParensError with stage-3 "Class field declarations"

Sorry if this is out of scope or maybe to soon to implement, for reference look: tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals, with a minimal init.vim:

call plug#begin('~/.config/nvim/plugged')
Plug 'yuezk/vim-js'
call plug#end()

And the following JavaScript file:

class Foo {
  foo = async x => {  
    try {
      console.log(x)   
      return x || {}
    } catch (e) {
      console.error(e)
    }
  }
}

There are some jsParensError syntax errors:

Just letting you know in case you want to check it, maybe we can wait until this gets in a official ES release, although currently is a wide supported feature:

Babel 7.0+
Node 12
Public fields are enabled by default in Chrome 72 / V8 7.2
Private fields are enabled by default in Chrome 74 / V8 7.4
Public instance fields are enabled by default in Firefox 69
Public static fields are enabled in Firefox Nightly 75 as of Febraury 22, 2020
Public instance fields are shipped behind a flag in Safari Technology Preview 101
Moddable XS
QuickJS
TypeScript 3.8

Thanks!

Regex syntax highlighting issue

Hello - thank you for making this plugin! Overall it works great.

However, I've run into a syntax issue with / being incorrectly identified as the start of a regex when it is in fact being used as a division operator. Below is a a contrived example - typically I run into this with Prettier formatting lines with the division operator and long variable names.

Code for reference:

const test = /alskjdf/i;

const math = 5 /
 2;

let thisSyntaxIsBroken;

const asdflkjasdf = 432432 / 23432;

const fixed;

Syntax coloration is wrong when there's "::" in a string

This code gives a wrong color output for me:

          switch (marker.name) {
            case 'Navigation::Start':
              color = 'var(--grey-40)';
              break;
            case 'Load':
              color = 'var(--red-60)';
              break;
            case 'DOMContentLoaded':
              color = 'var(--blue-50)';
              break;
            default:
              if (marker.name.startsWith('Contentful paint ')) {
                color = 'var(--green-60)';
              }
          }

It starts to be wrong with the first case:

comment within flow function type parentheses

hi, thanks for the plugin. looks like // and /* */ comments aren't detected when inside of the argument parens for a function flowtype definition

Thanks

TypeScript Support

Hello, the plugin is the best in vim javascript syntaxes. It would be nice to have a syntax plugin for TypeScript too. What do you think about this?

Highlights in `<script type="text/x-template">` don't become HTML

Thank you for a great plugin.

The highlight when the <script> tag type is text/x-template is not as expected.
In the above case, I want to highlight HTML instead of JavaScript.

Is this fixable?

> gvim.exe -u min_vimrc sample.html

min_vimrc

set encoding=utf-8
scriptencoding utf-8

syntax enable
filetype plugin indent on

set nocompatible

call plug#begin('~/vimfiles/plugged')

Plug 'othree/html5.vim'
Plug 'yuezk/vim-js'

call plug#end()

sample.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>fruits-list</h1> 
    <script type="text/x-template" id="fruits-list">
      <h1>fruits-list</h1>
    </script>
  </body>
</html>

Incorrect syntax highlighting when specifying return value type

const x = (): number => {
    const test = 1; // Incorrect syntax highlighting
};