2024年面向web前端及node开发人员的vim配置(2)，2024年最新web前端面试超详细知识点怎么办

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

cd ~/.vim/bundle/

git clone https://github.com/terryma/vim-multiple-cursors.git

• unite-vim 快速管理项目中的文件 github

cd ~/.vim/bundle/

git clone https://github.com/Shougo/unite.vim.git

• vim-javascript 缩进和语法支持 github

cd ~/.vim/bundle/

git clone https://github.com/pangloss/vim-javascript.git

• jsDoc 对 vim-javascript 的补充，支持 es6和 TypeScirpt github

cd ~/.vim/bundle/

git clone https://github.com/heavenshell/vim-jsdoc.git

• Fugitive git版本控制 github

git clone git://github.com/tpope/vim-fugitive.git

vim -u NONE -c “helptags vim-fugitive/doc” -c q

• syntastic 语法检查 github

cd ~/.vim/bundle/

git clone --depth=1 https://github.com/vim-syntastic/syntastic.git

syntastic 需要一些其他的

npm install -g jslint

npm install -g csslint

cd ~/.vim/bundle/

git clone https://github.com/hail2u/vim-css3-syntax.git

brew install tidy-html5

• vim-css-color 自动预览颜色 github

cd ~/.vim/bundle/

git clone https://github.com/skammer/vim-css-color.git

• vim-snipmate 自动完成代码块 github

cd ~/.vim/bundle/

git clone https://github.com/tomtom/tlib_vim.git

git clone https://github.com/MarcWeber/vim-addon-mw-utils.git

git clone https://github.com/garbas/vim-snipmate.git

Optional:

git clone https://github.com/honza/vim-snippets.git

• vim-surround 辅助格式控制(用于括号、引号等) github

cd ~/.vim/bundle/

git clone git://github.com/tpope/vim-surround.git

• jsbeauty-vim 自动美化代码，可配合 vim-autoformat 使用 github

cd ~/.vim/bundle/

git clone https://github.com/maksimr/vim-jsbeautify.git

cd vim-jsbeautify && git submodule update --init --recursive

• vim-markdown 把高亮功能推广到 markdown github

cd ~/.vim/bundle/

git clone https://github.com/plasticboy/vim-markdown.git

• vim-instant-markdown 预览 markdown githjub

npm -g install instant-markdown-d

• vim-markdown-toc 为 markdown 生成标题 github

cd ~/.vim/bundle/

git clone https://github.com/mzlogin/vim-markdown-toc.git

• youcompleteme 代码提示和补全 github

这个放在最后因为它比较复杂。属于可选的插件，根据自己需求安装。

首先，在 vim normal 模式输入 :version 查看其版本，要求版本大于7.4.143, 否则更新它。

其次，在 vim normal 模式输入 :echo has('python') || has('python3'), 如果输出为0，请更新 vim 以支持 python。

之后，在终端输入：

cd ~/.vim/bundle/

git clone https://github.com/Valloric/YouCompleteMe.git

cd ~/.vim/bundle/YouCompleteMe/

git submodule update --init --recursive

cd ~/.vim/bundle/YouCompleteMe/third_party/ycmd/third_party/tern_runtime

npm install --production

如果你需要支持 typescript，安装：

npm install -g typescript

• vim-less les支持 github

cd ~/.vim/bundle/

git clone https://github.com/groenewege/vim-less

到这里还没有完，作为前端人，这个还不能正常工作，它需要一些依赖，下面我们来安装这些依赖：

• 安装 tern github 查看

回到 bundle 目录 安装

cd ~/.vim/bundle

git clone https://github.com/ternjs/tern_for_vim.git

cd ~/.vim/bundle/tern_for_vim

npm install

之后需要在您的项目根目录建立一个 .tern-project 文件，没有内容，空白即可。该文件内部结构如下:

{ “libs”: [ “browser”, “jquery” ], “loadEagerly”: [ “importantfile.js” ], “plugins”: {

“requirejs”: {

“baseURL”: “./”,

“paths”: {}

}

}

}

此部分详细配置在此 http://ternjs.net/doc/manual.html

• apt-vim 自动管理插件 github

这里再安装一个插件自动管理插件，也比较麻烦，根据自己需求安装：

1. 自动安装

curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

2.手动安装

需要Python2.7.x或Python3.0+

cd ~/.vim/bundle/

git clone https://github.com/egalpin/apt-vim.git

cd apt-vim

sudo ./apt-vim init

编辑 ~/.bashrc 或 ~/.bash_profile , 添加下面一句话

export PATH=$PATH:~/.vimpkg/bin

编辑 ~/.vimrc 添加：

execute pathogen#infect()

call pathogen#helptags()

继续在终端执行：

source ~/.bashrc

apt-vim install

如果这里提示了：Completed successfully. 那就大功告成了。

到此为止，作为一个前端人的 vim 就基本搭建好了，如果还有什么好用的插件欢迎分享交流，如果你觉得这些插件还足够，可以去知乎、stackoverflow、或 github 上再挖掘一些。一些更高级插件会随着博主的积累，不断更新这篇内容的，欢迎关注。

下面附了我 .vimrc 和 .editorconfig 文件的内容：

"vimrc

"vim original config

set ignorecase " ignore upper- or lowercase in search model

set smartcase " if there is uppercase in search string ignore ‘ignorecase’ setting. it only works with ‘ignorecase’ setting

set autowrite " auto write changes into file after :next、:rewind、:last、:first、:previous、:stop、:suspend、:tag、:!、:make、<C-]> or <C-^> runs, as well as jumps to another file with :buffer、、、‘{A-Z0-9}’ or {A-Z0-9}

set nocompatible "Donot compate with vi, to avoid some bugs

filetype on "check the file type

set autoindent " use auto-indentation

set smartindent " use smart indentation

set tabstop=2 " set the width of tab key

set softtabstop=2 " set the width of soft key

set shiftwidth=2 " auto-indent with 2 spaces

set backspace=2 " enable to use backspace

set showmatch " show the matched braces

set linebreak " wrap without breakword

set whichwrap=b,s,<,>,[,] "jump to previous/next line when cursor at the head/end of line when input ‘b’/‘w’ in normal model

set relativenumber " show relative line number

set previewwindow " show preview window

set history=1000 " set command history to 1000

set laststatus=2 " show the last activited window’s status line always

set ruler " show line number and column number in status line

"command line setting

set showcmd " show inputted command in command line

set showmode " show current model in command line

set showmatch "show match brace

set guioptions=T "remove the toolbar in GUI

filetype on "check the file type

"finding setting

set incsearch " show matched words when input string

set hlsearch

"pathongen

execute pathogen#infect()

syntax on

filetype plugin indent on

"airline

let g:airline_theme=‘molokai’ "use a theme called ‘molokai’

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：