前端开发工具nvim来代替VSCode安装配置

目录
  • 1. Neovim是什么
  • 2. 我们为什么需要Neovim
  • 3. 如何配置Neovim
    • 3.1 安装第三方终端
    • 3.2 安装neoviem
    • 3.3 快速启动neovim
    • 3.4 创建neovim配置文件
    • 3.5 配置字体
  • 4. 终端模拟器之选
    • 4.1 iterm2
    • 4.2 alacrittty
    • 4.3 kitty
    • 4.4 Neovide

1. Neovim是什么

在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少使用鼠标的方案.

在我之前的文章中也描述过这一过程. 我从使用VSCODE自带的快捷键到使用Vim模拟器之后. 我对于这种能够全键盘完成自己工作的操作方式越发的着迷.

它足够的装,让我这样这种每天工作就是搬砖的底层码农也有一种自己已经是程序员的感觉.

由此,我才迸发了使用vim实现更多的念头.

自然而然的接触到了neovim. 说它是vim的分支或者升级版都可以. 它的所有操作都可以通过键盘来实现,分屏、修改、新增、函数跳转、重构、断点debug、内置终端. 最重要的是可以完美的潜入到编辑器当中.比如说VS Code.这个极大的降低了开发者使用neovim的心里门槛.

简单来说,neovim搭配各种插件可以最大限度的实现你平时使用VSCode的功能.

2. 我们为什么需要Neovim

客观原因, 想要减轻一下手腕负担,毕竟都要去医院检查了, 到了必须要重视的时候了.

至于很多大佬说的使用类vim这种编码方式可以提高工作的效率. 就我自己的体验而言,这个真没有.或许它让我极大的减少了使用鼠标的次数,极大的提高我敲字母的速度.但是这些一直都不是限制提高我工作效率的主要原因.

主要原因,是对于需求的理解,对于语言的熟悉度,对于API调用的熟悉度,对于编程思维逻辑的转化程度,更准确的说,是对设计模式在实际业务开发中合理的使用.

对于我这种菜鸟而言, 在使用vim之前, 思维的方式都还没跟上我敲键盘的速度, 所以我编码的速度再快也没有用

其次, 通过键盘来操作,会带来快感.而且随着你熟练度的不停提升. 而且这个快感能够持续的时间很长,长到我使用了将近了两个月之后,每每想到要写代码的时候,还是会有兴奋感.

更重要的是,neovim自己从头开始配置的话,你会熟悉每一个功能,每一个自己设置的hot keybindings.这种如臂使指的感觉会更加强烈.

最后,相比vim, neovim更强的性能和更现代化的lua配置语言,当然这些是事实, neovim 带来的异步任务特性从逻辑上必然是会提升体验的,还有浮窗功能. 当然听说vim现在也有很多更新.但是我并不关心.

毕竟仅仅是neovim的颜值就可以不再看vim一眼了. 如下:

颜值才是第一生产力

总的来说:

  • 还不错的颜值
  • 极客
  • 如臂使指的快感

3. 如何配置Neovim

我逛遍了整个中文社区,只推荐在两个地方看如何从头配置Neovim.

一个掘金上面有一本且唯一一本小册也从头配置起了neovim. 另一个在知乎上面搜索 「Neovim IDE 搭建系列」即可.

当然也可以直接使用网上大佬的配置.

但是这些大佬的配置, 对于不熟悉lua的人来说,确实是够抽象的. 就算能够成功运行,也是一脸的懵逼.就达不到如臂指使的程度了,所以还是推荐有时间有精力的话,跟着教程自己从头配置一遍.

不得不说,确实很可能会消耗你不少的时间的.但是给你带来的影响,甚至会跟随你的整个职业生涯的.

只要是处理文字就有可能需要vim

系统的看可以去看掘金小册中neovim的教程,整个掘金就一个. 或者去看知乎上面. 这里就不画蛇添注了,只做一个简单的过程概要.

我当前的配置环境:

环境: MacOS Monterey 12.3

终端工具: iterm2

软件管理工具: HomeBrew

其实大差不差的,即使是在windows平台也是需要配置wsl2来进行环境的配置.配置逻辑基本相同

3.1 安装第三方终端

这里选择了使用人数最多的,有了疑问也容易搜索到. iterm2. 使用homebrew进行软件管理

  brew install iterm2

3.2 安装neoviem

  brew install neovim

homebrew的使用具体可以查看我的另外一篇文章

一般来说安装neovim是不会出问题的.但是要安装neovim的前置环境会劝退一批人.

你需要安装好nodejspython环境, nodejs自不用说, 很多neovim的插件都是依托于python3环境的.

  brew install python3
  pip3 install neovim --upgrade

安装python模块之后,我们可以在终端中输入nvim就能够自动的进入到nvim的主页面. 此时输入:CheckHealth它就会自动检测你当天环境是否已经成功配置成功了.

当你看到全部是OK的时候,就表明已经配置成功了 . 即使出现了ERROR也不用害怕,它下面会给出建议,让你干啥你就干啥就好.

每个人电脑当前环境不一样,网络状况不一样,有时候确实会出现不一样的问题,这就需要你自己善于使用搜索功能了.在这里我推荐reddit中的r/neovim社区.

以下是我自己碰到的问题:

1.安装pip失败,提示: SyntaxError: invalid syntax

使用bootstrap教程

curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py

接着使用python3执行该脚本

sudo python3 get-pip.py

静等它执行完成,随后在命令好中输入:

pip --version

出现如下截图说明,你的pip已经安装成功

有了pip,就可以执行pip install neovim,让pyhon3和neovim产生关联

2. ERROR: This script does not work on Python 2.7 The minimum supported Python version is 3.6. Please use bootstrap.pypa.io/pip/2.7/get… instead

顾名思义,就是使用pyhon2.7版本不支持, 请下载bootstrap.pypa.io/pip/2.7/get…

3. Ruby provider (optional)的/usr/local/bin/neovim-ruby-host --version

运行如下命令可以解决:

gem install msgpack

3.3 快速启动neovim

cd ~ && vim .zshrc

然后找到空白地区,键入:

# neovim
alias vim='nvim'
alias vi='nvim'

之后你就可以直接在shell中输入vi或者vim就是使用的neovim了

3.4 创建neovim配置文件

mkdir ~/.config/nvim
vi ~/.config/nvim/init.vim

配置文件结果如下:

init.lua 是所有功能的初始化

lua -> 配置文件下详情

lsp -> 提供代码识别功能,和vscode通用一套.

plugin-config -> 其他各种花里胡哨的配置, 功能性的、UI类型的都在里面

basic.lua -> vim基本配置文件

colorscheme.lua -> 其实属于plugin-config中的一员,但是主题是高频使用所以单独拎出

keybindings.lua -> 键位绑定

plufins.lua -> 插件引入入口

ginit.vim -> 我的终端模拟器neovide配置文件

pugin -> 自动生成

更具具体的配置内容,可以自己网上搜索

3.5 配置字体

字体是终端一切漂亮图标的基础. nerd font

地址在这里 www.nerdfonts.com/font-downlo…. 找一个自己喜欢的就行. nerd font是这些字体的超集.

需要注意的是, neovim的配置文件和终端模拟器都需要配置对应的字体

4. 终端模拟器之选

4.1 iterm2

优点: 网上的资料最多. 而且提供了可视化的UI配置. 配置起来也是最简单.功能也是最简单的.如果要使用thmux的话,甚至是有内置的.

缺点: 卡, 分屏多几个就卡得不行不行的, 即使配置了GPU加速也没有任何作用,现在已放弃.

4.2 alacrittty

A fast, cross-platform, OpenGL terminal emulator

优点: 快,简单

缺点: 太简单,没有tab, 你一次只能打开一个终端.

我的配置文件如下:

# Spread additional padding evenly around the terminal content.
dynamic_padding: true
# window customization
window:
dimensions:
  columns: 140
  lines: 38
# padding:
#   x: 0
#   y: 0
decorations: none
# Background opacity
opacity: 0.95
# mouse
mouse:
hide_when_typing: true
scrolling:
history: 10000
multiplier: 3
# Font configuration
font:
normal:
  family: "SauceCodePro Nerd Font"
style: "常规体"
bold:
  family: "SauceCodePro Nerd Font"
  style: "粗体"
italic:
  family: "SauceCodePro Nerd Font"
  style: "斜体"
bold_italic:
  family: "SauceCodePro Nerd Font"
  style: "粗斜体"
# Point size
size: 14.0
offset:
  x: 0
  y: 5
glyph_offset:
  x: 0
  y: 0
use_thin_strokes: true
#
#builtin_box_drawing: true
# If `true`, bold text is drawn using the bright color variants.
draw_bold_text_with_bright_colors: true

文件放置于 .config/alacritty/alacritty.yml

4.3 kitty

优点: 快、使用过程中没有出现性能问题. 可以配置项很多. 缺点: 配置文件全英文,官方文档全英文,足够复杂 网上说之前说中文输入有问题,我是没有碰到. 而且也是快,没有性能问题. 现在完全作为顶替iterm2的存在 配置文件, 基本使用默认配置,改了如下:

font_family      BlexMono NF
adjust_column_width -1
background_opacity 0.9
hide_window_decorations yes

第一个是为了连体字

第二个是kitty默认字体渲染间距偏宽,-1就正好

第三个背景来一点透明

第四个隐藏顶部title

4.4 Neovide

各种使用下来感觉就是alacritty的升级版.升级在了那些骚操作上面.我现在的开发项目的主力. 简单, 动画很流畅.掌控感有爽快感.

配置文件:

set guifont=BlexMono\ NF:h14
set listchars=tab:>~,trail:.
let g:neovide_refresh_rate=60
let g:neovide_no_idle=v:false
let g:neovide_fullscreen=v:false
let g:neovide_cursor_animation_length=0.13
let g:neovide_remember_window_size=v:true
let g:neovide_cursor_trail_length=0.5
let g:neovide_cursor_antialiasing=v:true
let g:neovide_cursor_vfx_mode = "torpedo"
let g:neovide_cursor_vfx_opacity=200.0
let g:neovide_cursor_vfx_particle_lifetime=1.2
let g:neovide_cursor_vfx_particle_density=7.0
let g:neovide_cursor_vfx_particle_speed=10.0
let g:neovide_cursor_vfx_particle_phase=1.5
let g:neovide_cursor_vfx_particle_curl=1.0

以上就是前端开发工具nvim来代替VSCode配置使用的详细内容,更多关于前端开发工具nvim配置的资料请关注我们其它相关文章!

(0)

相关推荐

  • VSCode无法打开源文件及无法打开链接库文件的解决方法

    目录 一.无法打开源文件 二.无法打开文件“XXX.lib” 一.无法打开源文件 依次点击“项目——配置属性——C/C++——常规”,在“附加包含目录”中加入.h文件所在的文件夹路径 二.无法打开文件“XXX.lib” 1.依次点击“项目——配置属性——链接器——常规”,在“附加库目录”中加入.lib所在的文件夹的路径 2.方法①:在“链接器”中找到“输入”,在“附加依赖项”中加入需要加入的xxx.lib;(要用;和其他链接库分隔开) 方法②:也可以用代码的方式链接进来 #pragma comm

  • 十个免费的web前端开发工具详细整理

    十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上. 前端开发占据了web很大一部分,而且也成为了一种职业路径.如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具. 我将要分享我的十大现代必备的前端开发工具.它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站. 1. Grid Guide 特性: 快速生成栅格 首先我要介绍的是Grid.Guide,一款免费的网页应用

  • Visual Studio 2010 前端开发工具/扩展/插件推荐

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We

  • Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu

  • VScode中集成Git命令详解

    目录 Git/GitHub/GitHub Desktop相关概念 1.Git 2.GitHub 3.GitHub Desktop 一.VScode中使用Git 1.Git的安装 2.本地创建存储库 二.git常用操作 1.暂存更改 2.提交暂存 3.创建分支 4.checkout签出 5.冲突合并 6.文件比较 三.连接远程代码仓库 1.Git 全局设置: 2.使用pull方法 3.使用clone方法 4.持久化账号 Git/GitHub/GitHub Desktop相关概念 1.Git Git

  • 前端开发工具nvim来代替VSCode安装配置

    目录 1. Neovim是什么 2. 我们为什么需要Neovim 3. 如何配置Neovim 3.1 安装第三方终端 3.2 安装neoviem 3.3 快速启动neovim 3.4 创建neovim配置文件 3.5 配置字体 4. 终端模拟器之选 4.1 iterm2 4.2 alacrittty 4.3 kitty 4.4 Neovide 1. Neovim是什么 在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少

  • 使用TeXLive2022和VSCode安装配置步骤(LaTeX写论文)

    目录 一.VS Code的下载与安装 下载VS Code 安装VS Code 二.TeXLive2022安装 1.下载TeXLive2022 2.安装TeXLive2022 三.LaTeX Workshop插件安装 四.Latex 工作环境的配置 五.导入期刊指定的模板 LaTeX(LATEX,音译“拉泰赫”)是一种基于ΤΕΧ的排版系统.与直观的Word不同,LaTeX是使用了代码代替了一些格式的选项,使用起来更加便捷,再加上目前大部分期刊都提供了模板,使得文章的格式更容易调整,这样就可以专注在

  • windows下文件同步工具 CwRsync 4.0.2 安装配置方法(图文)

    CwRsync是基于cygwin平台的rsync软件包,支持windows对windows.windows对Linux.Linux对windows高效文件同步.由于CwRsync已经集成了cygwin类库,因此安装的时候可以省去cygwin包.Cwrsync还集成了OpenSSH for windows,可以实现Linux 下Rsync一模一样的操作.详细配置步骤如下: 一.服务器端安装配置 1.下载服务器端安装文件http://http://www.jb51.net/softs/55933.h

  • Python集成开发工具Pycharm的安装和使用详解

    Python语言当前越来越流行,使用的人越来越多,集成开发工具pycharm是当前使用比较多的一个开发工具,掌握pycharm的安装和基本的使用非常重要. (1)pycharm的下载. 进入到pycharm的官网:https://www.jetbrains.com/pycharm/download/ 下载社区版的即可. (2)安装 双击安装包,默认安装即可. (3)几种常用使用场景介绍. (3.1)创建工程: 说明:左边有可以创建的工程类型一览,本次我们以[pure python]工程为例. 红

  • 20170918 前端开发周报之JS前端开发必看

    1.用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! http://www.jb51.net/article/123958.htm 2.JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变

  • Win10下Android App安装配置开发环境

    前言:要进行一个Android App的开发,需要使用到Java.Android SDK.ADT以及一些软件开发工具IDE的帮助.本文将首先介绍这些工具的安装以及配置,以完成Android App开发的准备工作. 一.安装配置Java开发运行环境JDK/JRE Android App开发需要用到Java语言,要使用Java语言进行开发,需要先安装JDK并配置相关的环境变量.具体步骤如下: (1)在oracle官网下载JDK安装包:下载地址 (2)安装JDK:运行下载好的JDK安装包,依照安装提示

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

随机推荐