slides.vroom

# This is a sample Vroom input file. It should help you get started.
#
# Edit this file with your content. Then run `vroom vroom` to start
# the show!
#
# See `perldoc Vroom` for complete details.
#
---- config
# Basic config options.
title: JavaScript on Vim
indent: 5
auto_size: 0
height: 25
width: 78
vim_opts: '-u NONE'
skip: 0

vimrc: |
  set nowrap
  map Q <Nop>
  map <CR> :N<CR>:<CR>gg

  set guicolors
  colors jellybeans
  autocmd BufEnter * redraw!
  autocmd VimEnter,BufRead *.help set ft=help
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideLink        "http[^ ]\+"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideStar        "^\s*\zs\*"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideStar        "^\s*\zs•"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideStar        "★"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimTag      "<.\{-}>"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimCommand  " :[a-zA-Z-]\+\>" skipwhite nextgroup=slideVimCommandArg
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimCommandArg  "[.:0-9a-z_-]\+" contained
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideCommand     "`.\{-}`"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideStringQuote "'.\{-}'" contains=slideString
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideStringQuote '".\{-}"' contains=slideString
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideString      '[^'"]*' contained
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideEnhanced    "\*\w\+\*" transparent
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideShipName    "\(*\s\|\.\s\+\|^\s*\|•\s\|^\s•\|:\)\@<!\zs\<\u\h\+"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideShipName    "\(\u\l\+\)\{2,}"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideShipName    "\<\u[A-Z0-9_]\+\>"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideShipName    "Tern\|Vimball\|Vim [0-9.]\+\|Vim\|\.vimrc\|Language"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideShipName    "Learn Vimscript the Hard Way"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimPlugin   "\<[a-zA-Z]\+\/[a-zA-Z-.]\+\>"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimPlugin   "\<[A-Za-z-0-9]\+\.vim\>"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimPlugin   "\<vim-[a-z-0-9]\+\>"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimPlugin   "Syntastic\|neocomplcache\|AutoComplPop\|SuperTab\|Vundle\|NeoBundle"
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideTitle       "\%^\_[ ]* \{10,}\S.*" contains=slideTitleFix
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideTitleFix    "_"
  autocmd VimEnter,BufRead \d\+\l\= syntax keyword slideWord      Gentlemen
  autocmd VimEnter,BufRead \d\+\l\= syntax match slideVimComplete    "[a-z0-9]\{3,}\zecomplete"
  hi Normal ctermfg=231 guifg=#fffffc
  hi slideTitle ctermfg=172 guifg=#FFA319
  hi slideVimPlugin ctermfg=82 guifg=#6df567
  hi slideLink cterm=underline ctermfg=33 guifg=#48f5f1
  hi slideString cterm=underline
  hi slideStar ctermfg=226 guifg=#f1ea5f
  hi slideEnhanced cterm=bold ctermfg=231 guifg=#1f9ef4
  hi slideShipName cterm=bold ctermfg=123 guifg=#1f9ef4
  hi slideVimTag ctermfg=4  guifg=#1dbffd
  hi slideVimCommand ctermfg=33 guifg=#1f9ef4
  hi slideVimCommandArg ctermfg=39 guifg=#1dbffd
  hi slideCommand ctermfg=4 guifg=#1f9ef4
  hi slideTitleFix ctermfg=16 guifg=#1b1b1b
  hi slideVimComplete ctermfg=33 guifg=#1dbffd

---- center

JavaScript on Vim


othree@COSCUP

---- center

This is a Vim Talk

----
== Slide Source


• https://github.com/othree/javascript-on-vim-slide/

----
== me


• othree

+• @ Github, Flickr, Twitter

+• F2E at HTC

+• Maintains some Vim plugin

----
== My Vim Repos
 

• https://github.com/search?q=%40othree&type=Repositories&l=VimL

+• html5.vim

+• javascript-libraries-syntax.vim
+• vim-javascript-syntax

+• jslint.vim
• coffee-check.vim

+• eregex.vim
• AutoComplPop


----
== html5.vim


• 300 ★

• Build this for personal need

• But no more need when I alomost complete it

+• Not dead
+   Looking for contributor add more new Web Standards

---- center

Let's Begin

----
== I Will Talk About


+• Plugins I am using as a F2E

+• Big problem about JavaScript syntax

+• The eco system of Vim user community

+• Get familiar with Vim Document


----

----

1st

---- center
Syntax

----
== Syntax File for JavaScript


• Have built in version

• Vim 7.3 introduce SyntaxComplete

+• Not work with JavaScript... Why?

---- center
  
Look Into SyntaxComplete

---- viml,i4

while ftindex > -1
    let ft_part_name = matchstr( &filetype, '\w\+', ftindex )

    " Syntax rules can contain items for more than just the current
    " filetype.  They can contain additional items added by the user
    " via autocmds or their vimrc.
    " Some syntax files can be combined (html, php, jsp).
    " We want only items that begin with the filetype we are interested in.
    let next_group_regex = '\n' .
                \ '\zs'.ft_part_name.'\w\+\ze'.
                \ '\s\+xxx\s\+'
    let index    = 0
    let index    = match(syntax_full, next_group_regex, index)

    if index == -1 && exists('b:current_syntax') && ft_part_name != b:current_syntax
        " There appears to be two standards when writing syntax files.
        " Either items begin as:
        "     syn keyword {filetype}Keyword         values ...
        "     let b:current_syntax = "sql"
        "     let b:current_syntax = "sqlanywhere"
        " Or
        "     syn keyword {syntax_filename}Keyword  values ...
        "     let b:current_syntax = "mysql"
        " So, we will make the format of finding the syntax group names
        " a bit more flexible and look for both if the first fails to
        " find a match.
        let next_group_regex = '\n' .
                    \ '\zs'.b:current_syntax.'\w\+\ze'.
                    \ '\s\+xxx\s\+'
        let index    = 0
        let index    = match(syntax_full, next_group_regex, index)
    endif

---- center

How About JavaScript Syntax

---- viml,i4

if version >= 508 || !exists("did_javascript_syn_inits")
  if version < 508
    let did_javascript_syn_inits = 1
    command -nargs=+ HiLink hi link <args>
  else
    command -nargs=+ HiLink hi def link <args>
  endif
  HiLink javaScriptComment              Comment
  HiLink javaScriptLineComment          Comment
  HiLink javaScriptCommentTodo          Todo
  HiLink javaScriptSpecial              Special
  HiLink javaScriptStringS              String
  HiLink javaScriptStringD              String
  HiLink javaScriptCharacter            Character
  HiLink javaScriptSpecialCharacter     javaScriptSpecial
  HiLink javaScriptNumber               javaScriptValue
  HiLink javaScriptConditional          Conditional
  HiLink javaScriptRepeat               Repeat
  HiLink javaScriptBranch               Conditional
  HiLink javaScriptOperator             Operator
  HiLink javaScriptType                 Type
  HiLink javaScriptStatement            Statement
  HiLink javaScriptFunction             Function
  HiLink javaScriptBraces               Function
  HiLink javaScriptError                Error
  HiLink javaScrParenError              javaScriptError
  HiLink javaScriptNull                 Keyword
  HiLink javaScriptBoolean              Boolean
  HiLink javaScriptRegexpString         String

---- center

'javaScript' vs 'javascript'

---- javascript

// Are they the same?
print('javascript' === 'javaScript');

---- i-4
== Which One is Correct?


• :help 44.12

---- help,i0

Choose a good, descriptive name for your syntax file.  Use lowercase letters
and digits.  Don't make it too long, it is used in many places: The name of
the syntax file "name.vim", 'filetype', b:current_syntax and the start of each
syntax group (nameType, nameStatement, nameString, etc).

---- center

( #｀Д´)........

---- 
== _______上樑不正下梁歪


+• Almost all other JavaScript syntax use 'javaScript'

+• TypeScript syntax use 'typeScript'

---- 
== More Worse


+• I'm writing javascript-libraries-syntax.vim

+• Hard use automation to port my syntax to CoffeeScript and LiveScript

    Language          FileType         Group Name Prefix  
   -------------------------------------------------------
    CoffeeScript      'coffee'         'coffee'
    LiveScript        'ls'             'ls'
    JavaScript        'javascript'     'javaScript'

----
== To Solve This


+• Contact to author of SyntaxComplete

+• Contact to author of TypeScript syntax file

+• Ask on vimdev mailing-list

+• Walk around for my libraries syntax

---- center
The Walk Around Solution

---- sh,i4

> ls javascript-libraries-syntax.vim/autoload/syntax/*
+
angularjs.coffee.vim
angularjs.javascript.vim
angularjs.ls.vim
angularjs.typescript.vim
jquery.coffee.vim
jquery.javascript.vim
jquery.ls.vim
jquery.typescript.vim
postprocess.coffee.vim
postprocess.javascript.vim
postprocess.ls.vim
postprocess.typescript.vim
prelude.coffee.vim
prelude.javascript.vim
prelude.ls.vim
prelude.typescript.vim
update.sh

----
== Responses


+• SyntaxComplete author David Fishburn build a new version (13)

+• User can assign custom rule for syntax group name
   Great for my libraries syntax project

+• TypeScript syntax author say he will take a look
+   Not fix until present day

+• Response from vimdev:
+   • Report to the author of the syntax file
+   • No response from the author

+• So I start host my vim-javascript-syntax

----
== othree/vim-javascript-syntax


• Fix group name issue

+• Add new HTML5 features

+• Better JSDoc support

+• Fix lots of bugs

---- center

CoffeeScript?

----

• kchmck/vim-coffee-script
+   :echo b:current_syntax 

+   'javascript'

---- viml,i4

" This is used instead of TOP to keep things coffee-specific for good
" embedding. `contained` groups aren't included.
syn cluster coffeeAll contains=coffeeStatement,coffeeRepeat,coffeeConditional,
\                              coffeeException,coffeeKeyword,coffeeOperator,
\                              coffeeExtendedOp,coffeeSpecialOp,coffeeBoolean,
\                              coffeeGlobal,coffeeSpecialVar,coffeeSpecialIdent,
\                              coffeeObject,coffeeConstant,coffeeString,
\                              coffeeNumber,coffeeFloat,coffeeReservedError,
\                              coffeeObjAssign,coffeeComment,coffeeBlockComment,
\                              coffeeEmbed,coffeeRegex,coffeeHeregex,
\                              coffeeHeredoc,coffeeSpaceError,
\                              coffeeSemicolonError,coffeeDotAccess,
\                              coffeeProtoAccess,coffeeCurlies,coffeeBrackets,
\                              coffeeParens

if !exists('b:current_syntax')
  let b:current_syntax = 'coffee'
endif

---- center

(ノ｀Д´)ノ彡┻━┻

---- viml,i4

" Language:    CoffeeScript
" Maintainer:  Mick Koch <kchmck@gmail.com>
" URL:         http://github.com/kchmck/vim-coffee-script
" License:     WTFPL

" Bail if our syntax is already loaded.
if exists('b:current_syntax') && b:current_syntax == 'coffee'
  finish
endif

" Include JavaScript for coffeeEmbed.
syn include @coffeeJS syntax/javascript.vim

----

• So....?

+• I'm writing javascript-libraries-syntax.vim

+• Supports JavaScript, CoffeeScript...etc

+• I should be able to know what is current syntax

----

• I fork one repo and fix this bug

+• Sent pull request

+• No response.....

+• https://github.com/othree/vim-coffee-script/

+• To serve muggles, use `&filetype` instead. (￣ー￣)

----

----

2nd

---- center

Complete

----
== OmniComplete

• Vim 7

• <CTRL-X><CTRL-O>

• But also require a little configure

---- viml,i4

autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

----

• Then press <CTRL-X><CTRL-O>

----
== Default, Built-in


• htmlcomplete
• javascriptcomplete
• phpcomplete
• pythoncomplete
• python3complete
• rubycomplete
• sqlcomplete
• syntaxcomplete
• xmlcomplete

----
== Default JS Complete Function


+• Out of date

+• I use jscomplete.vim

---- viml,i4

autocmd FileType javascript set omnifunc=jscomplete#CompleteJS

----

• Difficult to press <CTRL-X><CTRL-O>

+• Alternative, you can use:
+   • SuperTab
+   • AutoComplPop
+   • neocomplcache

----
== AutoComplPop


• Automatically trigger <CTRL-X><CTRL-O>

+• Author not maintains anymore

+• Don't have default setting for JavaScript

---- viml,i4

let behavs = { 'javascript': [], 'html': [] }
    call add(behavs.javascript, {
        \   'command'      : "\<C-x>\<C-u>",
        \   'completefunc' : 'acp#completeSnipmate',
        \   'meets'        : 'acp#meetsForSnipmate',
        \   'onPopupClose' : 'acp#onPopupCloseSnipmate',
        \   'repeat'       : 0,
    \})
    call add(behavs.javascript, {
        \   'command' : g:acp_behaviorKeywordCommand,
        \   'meets'   : 'acp#meetsForKeyword',
        \   'repeat'  : 0,
        \ })
    call add(behavs.javascript, {
        \   'command' : "\<C-x>\<C-o>",
        \   'meets'   : 'AcpMeetsForJavaScript',
        \   'repeat'  : 0,
    \})

let g:acp_behavior = {}
call extend(g:acp_behavior, behavs, 'keep')

---- center

( #｀Д´)........

---- center

Maintain my own AutoComplPop

----
== My AutoComplPop


+• Add more filetype support by default

+• Supports latest snipmate

----
== What Happened with Snipmate


+• Author don't maintains....


----
== But


+• A new fork on Github by Rok Garbas, Marc Weber, and Adnan Zafar

+• Breaks old way to work with AutoComplPop

+• So I fixed it


+• https://blog.othree.net/log/2013/06/25/autocomplpop-and-snipmate/

----
== garbas/vim-snipmate

• https://github.com/garbas/vim-snipmate

+• Only on Github, not on Vim Scripts

----
== The Old Vim Way for Plugins


+• Vim Scripts

+• Move file by hand

+• Vimball file

----
== Problems


+• Hard to remove plugin

+• File conflict

+• Mess in `.vim` folder

----
== The Vim EcoSystem Changes


+• pathogen.vim by Tim Pope

----
== The pathogen Way

+• Separate all plugins

+• No more mess in `.vim` folder

+• Uninstall plugins never hard

+• Update all plugins automatically

+• Dependency is not hard anymore

----

• Not depends on Git, HG ...etc
   But work very well with them

+• I use Vundle, it depends on Github
   https://blog.othree.net/log/2011/06/05/vundle/

+• More and more Vim plugin lives on Github or other repo sites
+   • ex: garbas/vim-snipmates
+          othree/vim-autocomplpop
+          bling/vim-airline

----
== Related Manager

• pathogen.vim

+• Vundle

+• NeoBundle

---- center

Thanks You, Tim Pope !!

----
== Last Slide for Complete


• Imaging the complete funcion in IDE

+• Tern: http://ternjs.net/


+• But I am writing CoffeeScript now.....

+• Tell us if you have experience on Tern

----

----

3rd

---- center

Lint


----
== JSLint and Vim


• JSLint.vim

+• Not update JSLint often

+• Host my own to fix this issue

+• Also make it possible to use JSHint

+• Then I starts write CoffeeScript...

----
== CoffeeCheck.vim


+• Based on JSLint.vim

+• Use CoffeeScript compiler to do syntax check 

+• Only one error per check

+• Only syntax check, not linter

+• CoffeeLint borns....

----
== CoffeeLint.vim ?


+                        Ladies and Gentlemen,

+                        let me introduce ...

---- html,i-8

              / \,,_  .'|
           ,{{| /}}}}/_.'            _____________________________________________
          }}}}` '{{'  '.            /                                             \
        {{{{{    _   ;, \          /            Ladies and Gentlemen,              \
     ,}}}}}}    /o`\  ` ;)        |                                                |
    {{{{{{   /           (        |                 this is ...                    |
    }}}}}}   |            \       |                                                |
   {{{{{{{{   \            \      |                                                |
   }}}}}}}}}   '.__      _  |     |    _____             __             __  _      |
   {{{{{{{{       /`._  (_\ /     |   / ___/__  ______  / /_____ ______/ /_(_)____ |
    }}}}}}'      |    //___/   --=:   \__ \/ / / / __ \/ __/ __ `/ ___/ __/ / ___/ |
jgs `{{{{`       |     '--'       |  ___/ / /_/ / / / / /_/ /_/ (__  ) /_/ / /__   |
     }}}`                         | /____/\__, /_/ /_/\__/\__,_/____/\__/_/\___/   |
                                  |      /____/                                    |
                                  |                                               /
                                   \_____________________________________________/

----
== Syntastic


+• General syntax checker interface

+• filetype vs multiple checker

+• Supports JavaScript, CoffeeScript...etc

+• CoffeeScript supports CoffeeScript Compiler and CoffeeLint ...
+   by default

+• https://blog.othree.net/log/2013/06/21/syntastic-coffeelint/

----
== Syntastic for JavaScript


+• Supports JSLint, JSHint, Closure Linter,
   JavaScript Lint, Closure Compiler

+• For other filetypes:
   https://github.com/scrooloose/syntastic/tree/master/syntax_checkers

----
== JSLint in 10secs


+• Hurts your feeling

+• But it worth!!

+• For the errors you don't understand
   http://jslinterrors.com/

----

----

One more thing

---- center

Regular Expression

----

• Find command `/`

+• It supports regular expression

+• Vim's Regular Expression

----
== Vim's Regular Expression


+• http://vimdoc.sourceforge.net/htmldoc/pattern.html


+• Very different from other RegExp

+• Very different from JavaScript's RegExp

----
== For Example


+• Do you know `\zs` ?

+• Do you know `\w` still works ?

+• Do you know `[\w]` is not what you think ?

+• How about `\_.`, `\%^`, `\@<!`, `\{-}`, `\_[]`


+• What if I want to use familiar RegExp format, like Perl or JavaScript
+   • Ack.vim
+   • eregex.vim

----
== eregex.vim


• Translate Perl style RegExp to Vim's format


+• Author: 安久津

+• Disappeared...

+• I start to host my own...

----
== Bugs


+• Do you know how to find third item
+   use `3/`

+• Do you know when count > 1, highlight will enable

+• Do you know there is a backword search `?`


+• eregex.vim can't do every thing above...

----
== The Count Parameter


• :help command-count

---- help

Range handling                          *E177* *E178* *:command-range*
                                                        *:command-count*
By default, user-defined commands do not accept a line number range.  However,
it is possible to specify that the command does take a range (the -range
attribute), or that it takes an arbitrary count value, either in the line
number position (-range=N, like the |:split| command) or as a "count"
argument (-count=N, like the |:Next| command).  The count will then be
available in the argument with |<count>|.

Possible attributes are:

        -range      Range allowed, default is current line
        -range=%    Range allowed, default is whole file (1,$)
        -range=N    A count (default N) which is specified in the line
                    number position (like |:split|); allows for zero line
                    number.
        -count=N    A count (default N) which is specified either in the line
                    number position, or as an initial argument (like |:Next|).
                    Specifying -count (without a default) acts like -count=0

Note that -range=N and -count=N are mutually exclusive - only one should be
specified.

----
== Easy~~~


+• How about the backward search and highlight
+   • backword `?`
   • highlight `hlsearch`


---- viml,i1

-   if delim !=# '/'

++   if delim !=# '/' && delim !=# '?' 


---- center,replace
Piece of Cake ~~

+Not Work !!!!

----

• `n` after a backward search still goes forward

---- center
Don't Know Why

---- center
20 months later...

----

• :help function-search-undo

---- help

                                    *function-search-undo*
			The last used search pattern and the redo command "."
			will not be changed by the function.  This also
			implies that the effect of |:nohlsearch| is undone
			when the function returns.


----

+• Both search direction and highlight will been reset

----

+• OK

+• Impossible to fix

+• Close issue

---- center

One Month Later

----

• Something *wrong* on me

+• Keep looking at Vim resource and document

+• I found `v:searchforward`

----

• :help v:searchforward

---- help

v:searchforward            *v:searchforward* *searchforward-variable*
        Search direction:  1 after a forward search, 0 after a
        backward search.  It is reset to forward when directly setting
        the last search pattern, see |quote/|.
        Note that the value is restored when returning from a
        function. |function-search-undo|.
        Read-write.

----

• `v:searchforward` is what been reset when leave function

• `hlsearch` is another one been reset

• How could I set it on my custom command

---- viml,i1

-command! -nargs=? M :call <SID>Ematch(<q-args>)

++command! -nargs=? -count M :let v:searchforward = <SID>Ematch(<q-args>)

---- center

Highlight ?

---- viml,i1

-command! -nargs=? -count=0 M :let v:searchforward = <SID>Ematch(<count>, <q-args>)

++command! -nargs=? -count=1 M :let v:searchforward = 
\    <SID>Ematch(<count>, <q-args>) | if <count> > 1 | set hlsearch on | endif

----
== So...


• Vim have great document

+• It documents almost every detail in Vim

+• If you want write Vim Script or Plugin

+• You must learn how to read & search in the document


----
== Problems


+• Bad SEO, hard to see it in search results

+• You need know the correct keyword

----
== Suggestion


+• Use `:help keyword` first

+• Add 'vim', 'doc' to your keywords when search on web
   ex: 'vim doc ctrl-l'

+• Search in vim doc directly
   http://vimdoc.sourceforge.net/htmldoc/help.html

+• Find the right keyword, and back to Vim

+• Use <CTRL-]> and <CTRL-O>

----
== Reading, Refs


• Vim Doc
   http://vimdoc.sourceforge.net/htmldoc/help.html

• Learn Vimscript the Hard Way
   http://learnvimscriptthehardway.stevelosh.com/

• My .vimrc
   https://github.com/othree/rc/blob/master/home/.vimrc

---- center
Questions?

---- center
Thank you

---- center
The End