Vim web development

Web development under Vim html css js plug-in HTML, CSS, and JavaScript plug-in for web development under Vim

Html

Download html.zip

Decompress html.zip and copy all the files to the C: \ Program Files \ Vim \ vimfiles directory.

First, you should write "filetype plugin on" into your vimrc.

Restart vim.

Create a new test.html file. Use gvim to open and press "; html" to see what will happen! Note: "; html" is a semicolon (;)

Javascript

Reprinted: http://panweizeng.com/archives/359

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
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
   1. "Open JavaScript collapse
   2. Let B: javascript_fold = 1
   3. "Open JavaScript support for Dom, HTML, and CSS
   4. Let javascript_enable_domhtmlcss = 1

   Screenshot (click to view the large image)
   ~ /. Vim/plugin.

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)

   Dictionary completion-Javascript. dict

   1. autocomplet
   An automatically completed plug-in when you enter
   

   <div id="The plug-in can list the id value of the current page and the corresponding ID name in the CSS file.

    Dict and wget of Javascript in this exampleHttps://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dictGit should be used, but I am not sure). Then, place Javascript. dict under dict /.
   1. "Set dictionary ~ /. Vim/dict/JavaScript. dict is the path of the dictionary file.
   2. Autocmd filetype JavaScript set dictionary = ~ /. Vim/dict/JavaScript. dict

   Screenshot (click to view the large image)

   To enable the Automatic completion function of JavaScript files, you need to add the following code to your ~ /. Vimrc File

   Autocmd filetype JavaScript set omnifunc = javascriptcomplete # completejs
   

3. 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)

   Although I am not very useful, it may be helpful to you.

4. 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)
5. 
   Minibufexplorer is similar to a tab to manage the files currently opened
   Tlist can display the code structure

Vim is actually a powerful editor. It can be said that it is a powerful editor, and there are few system resources required. However, the learning curve is steep. After reading some tutorial related to Javascript, jquery, XHTML, and CSS, I want to set Vim to a useful IDE for business convenience.

1: Install jqeury coloring method Under this example: http://www.vim.org/scripts/script.php? Script_id = 2416, stored under syntax.  Then add this line in. vimrc: Au bufread, bufnewfile jquery. *. js set Ft = JavaScript syntax = jquery
2: security groups

Http://www.vim.org/scripts/script.php? Script_id = 1, 1397

Today, we will continue to introduce a plug-in of VIM, Which is XML. vim. You can download this plug-in here, which is very small and only 50 kb. Copy it ~ /. Vim/ftpplugin directory, and then in the vim configuration file ~ /. Add a line in vimrc:

Filetype plugin indent on

Save and re-use vim or gvim to open an HTML file or HTML. in normal mode, if you enter Gg = G, you will find that Vim automatically formats the HTML code, and all indentation is perfect.

3: Install the Javascript coloring method.In this example:Http://www.vim.org/scripts/script.php? Script_id = 1, 1491Under syntax.4: checking by JavaScript SignatureThis is not very easy to use. It is not as easy as pyflakes can be used for time-based queries. First, install criptlint and: Http://www.javascriptlint.com/download/jsl-0.3.0-src.tar.gzAnd then unbind them. Rows in the specified category: (1) make-F makefile. Ref allAfter the meeting, the following products will be created: (2) CD linux_all_dbg.obj/ (3) sudo CP jsl jscpucfg/usr/local/bin/ (4) jsl-help: conf> jsl. conf(According to http://blogs.linux.ie/kenguest/2007/03/18/integrating-javascript-lint-with-vim/Description
Jsl-help: conf> ETC/jsl. conf will show Permission denied. Even if sudo is used, it will not work, so it will be written into jsl. conf and then CP into/etc) (5) CP jsl. CONF/etc/ Then join in. vimrc: Set makeprg = jsl \-nologo \-nofilelisting \-nosummary \-nocontext \-conf \ '/etc/jsl. conf' \-Process \ % Set errorformat = % F (% L): \ % m Inoremap <silent> <F5> <C-O>: Make <CR> Map <silent> <F5>: Make <CR> Press F5 to check the Syntax .. I still want to use a plug-in similar to pyflakes .....5:AutoComplete Dict and wget of Javascript in this exampleHttps://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dict (GIT should be used, but I am not sure). Then, place Javascript. dict under dict /. Next, refer to neocomlcache. vim. WgetHttps://github.com/downloads/Shougo/neocomplcache VBA is Vim ball, not the VBA of M $. FirstPut the neocomplcache-6.1.vba under the. Vim project, and then use Vim to open it.%, It turned out to be self-active security. This is good, so you don't need to copy a case to the corresponding response. Then join in. vimrc:Autocmd filetype JS: Set dictionary + = ~ /. Vim/dict/JavaScript. dictset complete + = Klet G: neocomplcache_enable_at_startup = 1let G: neocomplcache_enable_auto_select = 0 function! Inserttabwrapper ()Let Col = COL ('.')-1 If! Col | Getline ('.') [col-1]! ~ '\ K' Return "\" Else If pumvisible () Return "\" Else Return "\\" End EndifEndfunctioninoremap = inserttabwrapper ()Start with a little question, the root cause http://tahir0u.com/2011/05/14/356.htmlThe AutoComplete option is displayed only when you press the tab. However, if you press the tab, the option is still unavailable ,,, however, this is a more convenient dict.6: Install zendcoding.Http://www.vim.org/scripts/script.php? Script_id = 1, 2981 You do not need to modify. vimrc to resolve the issue to the target. This plug-in is amazing, and HTML is easy to use. For example: In insert mode, insertHml: 5, and then press control + Y + (this is a joke). After opening, the following tags will appear:<! Doctype HTML> <HTML lang = "en"> <Meta charset = "UTF-8"> <Title> </title></Head> <body> Well, there are a lot of words. Http://tahir0u.com/2011/05/14/356.html.. However, the introduced plug-in is not suitable.