Привет, это Такуя.
Как вы, возможно, знаете, я в основном использую Neovim для разработки своего приложения под названием Inkdrop, кросс-платформенного приложения для ведения заметок в формате Markdown.
Оно построено на Electron для настольных компьютеров и React Native для мобильных платформ.
Прошел 1 год с тех пор, как я в последний раз публиковал свои настройки Neovim.
Neovim и его плагины очень хорошо развивались.
Поэтому я хотел бы поделиться своей последней настройкой для кодирования приложений на основе React и TypeScript.
Основное отличие заключается в том, что файлы конфигурации теперь написаны на Lua.
Я перешел с vim-plug на Packer.
Я также снял обучающее видео о том, как настроить Neovim с нуля на новом M2 MacBook Air.
Если у вас уже есть свои dotfiles, вы можете взять мой конфиг.
Надеюсь, вам понравится!

Содержание

Ингредиенты
craftzdog / dotfiles-public
Мои личные dotfiles
dotfiles Такуя
Ищете приложение для ведения заметок в формате Markdown?
Содержание
Настройка Neovim
Необходимые условия — iTerm2 и Patched Nerd Font
Установите Neovim через Homebrew
Структура каталогов
Установите менеджер плагинов: Packer
Цветовая схема: Neosolarized
Строка состояния: Lualine
Lspconfig
Автозавершение: Lspkind и cmp
Подсветка синтаксиса: Treesitter
Автотег и автопарсинг
Поиск пушинок: Telescope
Вкладки: Bufferline
LSP Uls: Lspsaga
Форматировщик кода: Prettier и null-ls
Маркеры Git: gitsigns
git
Инструмент LSP: mason
Следите за мной в интернете

Ингредиенты

Вот краткое описание моей настройки:

Neovim >= 0.7
wbthomason/packer.nvim — Менеджер плагинов для Neovim
svrana/neosolarized.nvim — truecolor, solarized dark colorscheme
nvim-lualine/lualine.nvim — Удивительно быстрый и простой в настройке Neovim statusline, написанный на Lua
onsails/lspkind-nvim — VSCode-подобные пиктограммы
L3MON4D3/LuaSnip — Движок сниппетов для Neovim, написанный на Lua
hrsh7th/cmp-nvim-lsp — nvim-cmp источник для встроенного LSP в Neovim
hrsh7th/cmp-buffer — nvim-cmp источник для буферных слов
hrsh7th/nvim-cmp — Плагин механизма завершения для neovim, написанный на Lua
neovim/nvim-lspconfig — Коллекция конфигураций для встроенного в Neovim LSP
jose-elias-alvarez/null-ls.nvim — Использование Neovim в качестве языкового сервера для внедрения диагностики LSP, действий кода и многого другого через Lua.
MunifTanjim/prettier.nvim — Плагин Prettier для встроенного клиента LSP в Neovim
williamboman/mason.nvim — Портативный менеджер пакетов для Neovim, который работает везде, где работает Neovim. Легко устанавливать и управлять серверами LSP, серверами DAP, линтерами и форматерами.
williamboman/mason-lspconfig.nvim — Расширение к mason.nvim, облегчающее использование lspconfig с mason.nvim
glepnir/lspsaga.nvim — Легкий плагин lsp, основанный на встроенном lsp от neovim, с высокопроизводительным пользовательским интерфейсом
nvim-treesitter/nvim-treesitter — Конфигурации и слой абстракции Treesitter для Neovim
kyazdani42/nvim-web-devicons — Lua fork vim-web-devicons для neovim
nvim-telescope/telescope.nvim — Хорошо расширяемый нечеткий искатель над списками
nvim-telescope/telescope-file-browser.nvim — Расширение File Browser для telescope.nvim
windwp/nvim-autopairs — Автопары
windwp/nvim-ts-autotag — Использование treesitter для автоматического закрытия и автоматического переименования html-тегов
norcalli/nvim-colorizer.lua — Высокопроизводительный цветной осветитель
akinsho/nvim-bufferline.lua — Удивительный буферлайн
lewis6991/gitsigns.nvim — Интеграция Git для буферов
dinhhuy258/git.nvim — Простой клон плагина vim-fugitive
folke/zen-mode.nvim — Режим, свободный от отвлечений
iamcco/markdown-preview.nvim — Предварительный просмотр в режиме Markdown.

А вот мой репозиторий dotfiles:

craftzdog / dotfiles-public

Мои личные dotfiles

dotfiles Такуя

Предупреждение: Не используйте мои настройки вслепую, если вы не знаете, что это влечет за собой. Используйте на свой страх и риск!

Ищете приложение для ведения заметок в формате Markdown?

Посмотрите мое приложение под названием Inkdrop

Содержание

конфигурация vim (NeoVim)
конфигурация tmux
конфигурация git
fish config
PowerShell config

Настройка Neovim

Требуется Neovim (>= 0.7)

wbthomason/packer.nvim — Менеджер плагинов для Neovim
svrana/neosolarized.nvim — truecolor, solarized dark colorscheme
nvim-lualine/lualine.nvim — Удивительно быстрый и простой в настройке Neovim statusline, написанный на Lua
onsails/lspkind-nvim — VSCode-подобные пиктограммы
L3MON4D3/LuaSnip — Движок сниппетов для Neovim, написанный на Lua
hrsh7th/cmp-nvim-lsp — nvim-cmp источник для встроенного LSP в Neovim
hrsh7th/cmp-buffer — nvim-cmp источник для буферных слов
hrsh7th/nvim-cmp — Плагин механизма завершения для neovim, написанный на Lua
neovim/nvim-lspconfig — Коллекция конфигураций для встроенного в Neovim LSP
jose-elias-alvarez/null-ls.nvim — Использование Neovim в качестве языкового сервера для внедрения диагностики LSP, действий кода и многого другого через Lua.
MunifTanjim/prettier.nvim — Плагин Prettier для…

Посмотреть на GitHub

Обучающее видео:

Необходимые условия — iTerm2 и Patched Nerd Font

iTerm2 — быстрый эмулятор терминала для macOS.
Установите один из шрифтов Nerd Fonts для отображения причудливых глифов на терминале.
Мой текущий выбор — Hack.
И используйте его в своем терминальном приложении. Например, на iTerm2:

Установите Neovim через Homebrew

brew install neovim

Войдите в полноэкранный режим Выйти из полноэкранного режима

Структура каталогов

Neovim соответствует структуре XDG Base Directory. Вот структура моих конфигурационных файлов:

📂 ~/.config/nvim
├── 📁 after
│  └── 📁 plugin
├── 📂 lua
│  └── 🌑 base.lua
├── 📁 plugin
└── 🇻 init.lua

Войти в полноэкранный режим Выход из полноэкранного режима

Neovim загружает $HOME/.config/nvim/init.vim или init.lua первым вместо $HOME/.vimrc.
Более подробную информацию можно найти в руководстве по быстрому запуску:

https://github.com/nanotee/nvim-lua-guide

Установите менеджер плагинов: Packer

Установите Packer, выполнив следующую команду:

git clone --depth 1 https://github.com/wbthomason/packer.nvim 
 ~/.local/share/nvim/site/pack/packer/start/packer.nvim

Войти в полноэкранный режим Выйти из полноэкранного режима

Затем сделайте ./.config/nvim/lua/plugins.lua таким образом:

local status, packer = pcall(require, "packer")
if (not status) then
  print("Packer is not installed")
  return
end

vim.cmd [[packadd packer.nvim]]

packer.startup(function(use)
  use 'wbthomason/packer.nvim'
  -- Your plugins go here
end)

Войти в полноэкранный режим Выйти из полноэкранного режима

Затем потребуйте его из init.lua следующим образом:

require('plugins')

Войти в полноэкранный режим Выйти из полноэкранного режима

Цветовая схема: Neosolarized

Я использую svrana/neosolarized.nvim с некоторыми изменениями.

local status, n = pcall(require, "neosolarized")
if (not status) then return end

n.setup({
  comment_italics = true,
})

local cb = require('colorbuddy.init')
local Color = cb.Color
local colors = cb.colors
local Group = cb.Group
local groups = cb.groups
local styles = cb.styles

Color.new('black', '#000000')
Group.new('CursorLine', colors.none, colors.base03, styles.NONE, colors.base1)
Group.new('CursorLineNr', colors.yellow, colors.black, styles.NONE, colors.base1)
Group.new('Visual', colors.none, colors.base03, styles.reverse)

local cError = groups.Error.fg
local cInfo = groups.Information.fg
local cWarn = groups.Warning.fg
local cHint = groups.Hint.fg

Group.new("DiagnosticVirtualTextError", cError, cError:dark():dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextInfo", cInfo, cInfo:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextWarn", cWarn, cWarn:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextHint", cHint, cHint:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticUnderlineError", colors.none, colors.none, styles.undercurl, cError)
Group.new("DiagnosticUnderlineWarn", colors.none, colors.none, styles.undercurl, cWarn)
Group.new("DiagnosticUnderlineInfo", colors.none, colors.none, styles.undercurl, cInfo)
Group.new("DiagnosticUnderlineHint", colors.none, colors.none, styles.undercurl, cHint)

Войти в полноэкранный режим Выход из полноэкранного режима

Строка состояния: Lualine

nvim-lualine/lualine.nvim предоставляет гибкий способ настройки строки состояния.

local status, lualine = pcall(require, "lualine")
if (not status) then return end

lualine.setup {
  options = {
    icons_enabled = true,
    theme = 'solarized_dark',
    section_separators = { left = '', right = '' },
    component_separators = { left = '', right = '' },
    disabled_filetypes = {}
  },
  sections = {
    lualine_a = { 'mode' },
    lualine_b = { 'branch' },
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 0 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = {
      { 'diagnostics', sources = { "nvim_diagnostic" }, symbols = { error = ' ', warn = ' ', info = ' ',
        hint = ' ' } },
      'encoding',
      'filetype'
    },
    lualine_y = { 'progress' },
    lualine_z = { 'location' }
  },
  inactive_sections = {
    lualine_a = {},
    lualine_b = {},
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 1 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = { 'location' },
    lualine_y = {},
    lualine_z = {}
  },
  tabline = {},
  extensions = { 'fugitive' }
}

Войти в полноэкранный режим Выход из полноэкранного режима

Lspconfig

Neovim имеет встроенную поддержку LSP.
Вы можете легко настроить ее с помощью neovim/nvim-lspconfig.
Например, чтобы включить сервер языка typescript в Neovim:

local status, nvim_lsp = pcall(require, "lspconfig")
if (not status) then return end

local protocol = require('vim.lsp.protocol')

local on_attach = function(client, bufnr)
  -- format on save
  if client.server_capabilities.documentFormattingProvider then
    vim.api.nvim_create_autocmd("BufWritePre", {
      group = vim.api.nvim_create_augroup("Format", { clear = true }),
      buffer = bufnr,
      callback = function() vim.lsp.buf.formatting_seq_sync() end
    })
  end
end

-- TypeScript
nvim_lsp.tsserver.setup {
  on_attach = on_attach,
  filetypes = { "typescript", "typescriptreact", "typescript.tsx" },
  cmd = { "typescript-language-server", "--stdio" }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Не забудьте установить сам сервер языка typescript:

npm i -g typescript-language-server

Войти в полноэкранный режим Выйти из полноэкранного режима

Автозавершение: Lspkind и cmp

Чтобы получить функцию автодополнения с поддержкой LSP и причудливыми пиктограммами, я использую следующие плагины:

onsails/lspkind-nvim — VSCode-подобные пиктограммы
L3MON4D3/LuaSnip — движок для создания сниппетов
hrsh7th/cmp-nvim-lsp — nvim-cmp исходник для встроенного LSP неовима
hrsh7th/cmp-buffer — nvim-cmp источник для буферных слов
hrsh7th/nvim-cmp — Плагин механизма завершения для neovim.

Настройте его следующим образом:

local status, cmp = pcall(require, "cmp")
if (not status) then return end
local lspkind = require 'lspkind'

cmp.setup({
  snippet = {
    expand = function(args)
      require('luasnip').lsp_expand(args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ['<CR>'] = cmp.mapping.confirm({
      behavior = cmp.ConfirmBehavior.Replace,
      select = true
    }),
  }),
  sources = cmp.config.sources({
    { name = 'nvim_lsp' },
    { name = 'buffer' },
  }),
  formatting = {
    format = lspkind.cmp_format({ with_text = false, maxwidth = 50 })
  }
})

vim.cmd [[
  set completeopt=menuone,noinsert,noselect
  highlight! default link CmpItemKind CmpItemMenuDefault
]]

Войти в полноэкранный режим Выйти из полноэкранного режима

Подсветка синтаксиса: Treesitter

Treesitter — это популярный парсер языка для подсветки синтаксиса.
Сначала установите его:

brew install tree-sitter

Войдите в полноэкранный режим Выйти из полноэкранного режима

Установите nvim-treesitter/nvim-treesitter с помощью Packer и настройте его следующим образом:

local status, ts = pcall(require, "nvim-treesitter.configs")
if (not status) then return end

ts.setup {
  highlight = {
    enable = true,
    disable = {},
  },
  indent = {
    enable = true,
    disable = {},
  },
  ensure_installed = {
    "tsx",
    "toml",
    "fish",
    "php",
    "json",
    "yaml",
    "swift",
    "css",
    "html",
    "lua"
  },
  autotag = {
    enable = true,
  },
}

local parser_config = require "nvim-treesitter.parsers".get_parser_configs()
parser_config.tsx.filetype_to_parsername = { "javascript", "typescript.tsx" }

Войти в полноэкранный режим Выйти из полноэкранного режима

Автотег и автопарсинг

В приложениях React часто требуется быстро закрывать теги.
windwp/nvim-ts-autotag — это именно то, что вам нужно.

local status, autotag = pcall(require, "nvim-ts-autotag")
if (not status) then return end

autotag.setup({})

Вход в полноэкранный режим Выход из полноэкранного режима

windwp/nvim-autopairs предназначен для закрытия скобок.

local status, autopairs = pcall(require, "nvim-autopairs")
if (not status) then return end

autopairs.setup({
  disable_filetype = { "TelescopePrompt" , "vim" },
})

Войти в полноэкранный режим Выход из полноэкранного режима

Поиск пушинок: Telescope

telescope.nvim обеспечивает интерактивный нечеткий поиск по спискам, построенный на основе последних возможностей Neovim.
Я также использую telescope-file-browser.nvim в качестве филера.

Он настолько полезен, что вы можете искать файлы, просматривая их содержимое, не открывая их. Он поддерживает различные источники, такие как Vim, файлы, Git, LSP и Treesitter. Ознакомьтесь с демонстрационным примером Telescope.

Установите kyazdani42/nvim-web-devicons, чтобы получить иконки файлов на Telescope, statusline и других поддерживаемых плагинах.

Конфигурация будет выглядеть следующим образом:

local status, telescope = pcall(require, "telescope")
if (not status) then return end
local actions = require('telescope.actions')
local builtin = require("telescope.builtin")

local function telescope_buffer_dir()
  return vim.fn.expand('%:p:h')
end

local fb_actions = require "telescope".extensions.file_browser.actions

telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
}

-- keymaps
vim.keymap.set('n', ';f',
  function()
    builtin.find_files({
      no_ignore = false,
      hidden = true
    })
  end)
vim.keymap.set('n', ';r', function()
  builtin.live_grep()
end)
vim.keymap.set('n', '\\', function()
  builtin.buffers()
end)
vim.keymap.set('n', ';t', function()
  builtin.help_tags()
end)
vim.keymap.set('n', ';;', function()
  builtin.resume()
end)
vim.keymap.set('n', ';e', function()
  builtin.diagnostics()
end)

Вход в полноэкранный режим Выйти из полноэкранного режима

Используйте расширение браузера telescope:

telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
  extensions = {
    file_browser = {
      theme = "dropdown",
      -- disables netrw and use telescope-file-browser in its place
      hijack_netrw = true,
      mappings = {
        -- your custom insert mode mappings
        ["i"] = {
          ["<C-w>"] = function() vim.cmd('normal vbd') end,
        },
        ["n"] = {
          -- your custom normal mode mappings
          ["N"] = fb_actions.create,
          ["h"] = fb_actions.goto_parent_dir,
          ["/"] = function()
            vim.cmd('startinsert')
          end
        },
      },
    },
  },
}
telescope.load_extension("file_browser")

vim.keymap.set("n", "sf", function()
  telescope.extensions.file_browser.file_browser({
    path = "%:p:h",
    cwd = telescope_buffer_dir(),
    respect_gitignore = false,
    hidden = true,
    grouped = true,
    previewer = false,
    initial_mode = "normal",
    layout_config = { height = 40 }
  })
end)

Войти в полноэкранный режим Выйти из полноэкранного режима

Вкладки: Bufferline

Я использую akinsho/nvim-bufferline.lua для улучшения внешнего вида вкладок.
Сделайте несколько настроек, чтобы он лучше смотрелся с темой Solarized:

local status, bufferline = pcall(require, "bufferline")
if (not status) then return end

bufferline.setup({
  options = {
    mode = "tabs",
    separator_style = 'slant',
    always_show_bufferline = false,
    show_buffer_close_icons = false,
    show_close_icon = false,
    color_icons = true
  },
  highlights = {
    separator = {
      guifg = '#073642',
      guibg = '#002b36',
    },
    separator_selected = {
      guifg = '#073642',
    },
    background = {
      guifg = '#657b83',
      guibg = '#002b36'
    },
    buffer_selected = {
      guifg = '#fdf6e3',
      gui = "bold",
    },
    fill = {
      guibg = '#073642'
    }
  },
})

vim.keymap.set('n', '<Tab>', '<Cmd>BufferLineCycleNext<CR>', {})
vim.keymap.set('n', '<S-Tab>', '<Cmd>BufferLineCyclePrev<CR>', {})

Вход в полноэкранный режим Выход из полноэкранного режима

LSP Uls: Lspsaga

glepnir/lspsaga.nvim — один из моих любимых плагинов LSP.
Он обеспечивает красивый пользовательский интерфейс для различных функций, связанных с LSP, таких как hover doc, предварительный просмотр определений и действия по переименованию.
Моя конфигурация проста:

local status, saga = pcall(require, "lspsaga")
if (not status) then return end

saga.init_lsp_saga {
  server_filetype_map = {
    typescript = 'typescript'
  }
}

local opts = { noremap = true, silent = true }
vim.keymap.set('n', '<C-j>', '<Cmd>Lspsaga diagnostic_jump_next<CR>', opts)
vim.keymap.set('n', 'K', '<Cmd>Lspsaga hover_doc<CR>', opts)
vim.keymap.set('n', 'gd', '<Cmd>Lspsaga lsp_finder<CR>', opts)
vim.keymap.set('i', '<C-k>', '<Cmd>Lspsaga signature_help<CR>', opts)
vim.keymap.set('n', 'gp', '<Cmd>Lspsaga preview_definition<CR>', opts)
vim.keymap.set('n', 'gr', '<Cmd>Lspsaga rename<CR>', opts)

Войти в полноэкранный режим Выход из полноэкранного режима

Форматировщик кода: Prettier и null-ls

Я сильно полагаюсь на Prettier для форматирования файлов TypeScript/JavaScript/CSS.
Для этого я использую jose-elias-alvarez/null-ls.nvim и MunifTanjim/prettier.nvim.

Сначала вам понадобится prettierd:

brew install prettierd

Войдите в полноэкранный режим Выйти из полноэкранного режима

Затем настройте null-ls следующим образом:

local status, null_ls = pcall(require, "null-ls")
if (not status) then return end

null_ls.setup({
  sources = {
    null_ls.builtins.diagnostics.eslint_d.with({
      diagnostics_format = '[eslint] #{m}n(#{c})'
    }),
    null_ls.builtins.diagnostics.fish
  }
})

Войти в полноэкранный режим Выйти из полноэкранного режима

Красивее:

local status, prettier = pcall(require, "prettier")
if (not status) then return end

prettier.setup {
  bin = 'prettierd',
  filetypes = {
    "css",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "scss",
    "less"
  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Маркеры Git: gitsigns

lewis6991/gitsigns.nvim предоставляет git-украшения для текущих буферов.
Это поможет вам узнать, какие строки в данный момент изменены.
Работает из коробки.

require('gitsigns').setup {}

Вход в полноэкранный режим Выход из полноэкранного режима

git

Я часто просматриваю код на GitHub.
dinhhuy258/git.nvim помогает открыть GitHub прямо из Neovim, а также предоставляет git blame просмотр в режиме split view, что очень удобно.

local status, git = pcall(require, "git")
if (not status) then return end

git.setup({
  keymaps = {
    -- Open blame window
    blame = "<Leader>gb",
    -- Open file/folder in git repository
    browse = "<Leader>go",
  }
})

Вход в полноэкранный режим Выход из полноэкранного режима

Инструмент LSP: mason

Если вам нужна дополнительная поддержка LSP для определенных библиотек, вам могут понадобиться williamboman/mason.nvim и williamboman/mason-lspconfig.nvim.
Я использую их для обеспечения работы языкового сервера Tailwind CSS на Neovim.

local status, mason = pcall(require, "mason")
if (not status) then return end
local status2, lspconfig = pcall(require, "mason-lspconfig")
if (not status2) then return end

mason.setup({

})

lspconfig.setup {
  ensure_installed = { "sumneko_lua", "tailwindcss" },
}

Вход в полноэкранный режим Выход из полноэкранного режима

Добавьте lspconfig:

local nvim_lsp = require "lspconfig"
nvim_lsp.tailwindcss.setup {}

Войти в полноэкранный режим Выйти из полноэкранного режима

Вот, в общем-то, и все!
Надеюсь, это поможет вам улучшить вашу среду Neovim.

Следите за мной в интернете

Оцените мое приложение Inkdrop — приложение для ведения заметок в формате Markdown.
Twitter https://twitter.com/inkdrop_app
Блог https://blog.inkdrop.app/
YouTube https://www.youtube.com/devaslife
Instagram https://instagram.com/craftzdog

Моя настройка Neovim для React, TypeScript, Tailwind CSS и т.д.

Ингредиенты

<img src="/images/answers/363/foto-0.svg"> craftzdog / dotfiles-public

Мои личные dotfiles

dotfiles Такуя

Ищете приложение для ведения заметок в формате Markdown?

Содержание

Настройка Neovim

Необходимые условия — iTerm2 и Patched Nerd Font

Установите Neovim через Homebrew

Структура каталогов

Установите менеджер плагинов: Packer

Цветовая схема: Neosolarized

Строка состояния: Lualine

Lspconfig

Автозавершение: Lspkind и cmp

Подсветка синтаксиса: Treesitter

Автотег и автопарсинг

Поиск пушинок: Telescope

Вкладки: Bufferline

LSP Uls: Lspsaga

Форматировщик кода: Prettier и null-ls

Маркеры Git: gitsigns

git

Инструмент LSP: mason

Следите за мной в интернете

craftzdog / dotfiles-public