Use Vim to write JavaScript code

If you like vim and write JavaScript at ordinary times, this article will write for you :) if you like JavaScript but haven't found a proper editor yet, please give Vim a try.

The following assumes that you have some knowledge about vim, and all plug-ins have been tested in gnome-terminal, so there should be no major problems in other terminals.

1. Syntax highlighting-Javascript. Vim
   Http://www.vim.org/scripts/script.php? Script_id = 1, 1491
   This plug-in is installed in ~ /. Vim/syntax/directory. After downloading, You need to modify a place. In general JavaScript programming, the number of layers to be folded does not need to be too deep. I set it to 1, that is:
   Setlocal foldlevel = 1.
   You need to add in. vimrc

    

   1234	"Open JavaScript collapselet b:javascript_fold=1"Open JavaScript support for Dom, HTML, and CSSlet javascript_enable_domhtmlcss=1

   Screenshot (click to view the large image)
   

2. Variable tag and check-mark. Vim

Http://www.vim.org/scripts/script.php? Script_id = 1, 1238
Install this plug-in ~ /. Vim/plugin/directory. It is useful when checking and tracking variables, and can also prevent misspelling of variable names. The default shortcut for enabling/disabling variable flag is M. You can also use V to select a segment for marking.
Screenshot (click to view the large image)

1. Dictionary completion-Javascript. dict

Http://lazy-people.org/browser/project/dotfiles/users/dann/.vim/dict/javascript.dict? REV = 122
This dictionary can be placed in any directory ~ /. Vim/dict/directory. To use dictionary completion, you must press Ctrl + X in insert mode, and then press Ctrl + K. Some JavaScript built-in functions are too long to remember, and the dictionary is useful at this time. A dictionary is actually a common file containing a list of keywords and a row. Therefore, you can add some functions that you often use in projects.
In addition, you need to add in. vimrc

12	"Set dictionary ~ /. Vim/dict/JavaScript. dict is the path of the dictionary file.autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

Screenshot (click to view the large image)

1. Yui auto-completion

To be continued...

1. Run the code snippet-spidermonkey

Http://www.mozilla.org/js/spidermonkey/
Sometimes, if you want to test a small item, you do not need to write an HTML file and run it in the browser. spidermonkey can help you, and spidermonkey can also do some geek tasks. Ubuntu system installation is simple. sudo apt-Get install spidermonkey-bin. For other systems, see the documentation on the website. After the installation is complete, enter JS and enter a JS shell, which is similar to Python. Enter help () and press enter to see a simple help.
After writing JavaScript code in Vim, enter! Js % to execute the code of the current file. You can also select a piece of code and execute: '<,'>! JS to insert the execution result to the current file.
Screenshot (click to view the large image)

1. Syntax check and quick debugging-javascriptlint

Http://www.javascriptlint.com/
The code of this tool is based on Douglas crockford's jslint, which is very powerful in code check and can be said to be extremely demanding. If you write code from the beginning, we recommend that you use it frequently to check the code, which can significantly improve the quality of the Code. Do not check out the latest version from the code library, but download stable version 0.3.0.

123456

cd jsl-0.3.0/src/ # The jsl-0.3.0 here is to extract the Directorymake -f Makefile.ref allcd Linux_All_DBG.OBJ/cp jsl jscpucfg /home/xp/bin/js/ #/Home/XP/bin/JS/directory to be copied, which can be any locationcd /home/xp/bin/js/jsl -help:conf > jsl.conf # Generating default configuration files

In addition, you need to add in. vimrc

12345

"Set javascriptlintautocmd FileType javascript set makeprg=/home/xp/bin/js/jsl -nologo -nofilelisting -nosummary -nocontext -conf '/home/xp/bin/js/jsl.conf' -process %autocmd FileType javascript set errorformat=%f(%l): %mautocmd FileType javascript inoremap <silent> <F9> <C-O>:make<CR>autocmd FileType javascript map <silent> <F9> :make<CR>

Use the make command or the F9 shortcut key. You also need to understand quickfix. Enter the Command help quickfix to see the following documents. The main commands involved include cw: CN: CP.
Screenshot (click to view the large image)

1. Other common plug-ins
   Although I am not very useful, it may be helpful to you.
   Winmanager is similar to resource manager. It may be useful if it is transferred from editplus or another graphic editor.
   Screenshot (click to view the large image)
   
   Minibufexplorer is similar to a tab to manage the files currently opened
   Tlist can display the code structure