02.TypeScript环境配置

好的！接下来是 TypeScript 环境。

---

🦕 TypeScript 环境专用配置

目录结构

~/.config/nvim/lua/envs/typescript.lua

配置内容

-- ~/.config/nvim/lua/envs/typescript.lua
return {
  -- 🔧 LSP (ts_ls)
  {
    "neovim/nvim-lspconfig",
    version = "v2.9.0",
    config = function()
      local on_attach = require("nvchad.configs.lspconfig").on_attach
      local capabilities = require("nvchad.configs.lspconfig").capabilities
      
      require("lspconfig").ts_ls.setup({
        on_attach = on_attach,
        capabilities = capabilities,
        init_options = {
          preferences = {
            includePackageJsonAutoImports = "auto",
          }
        }
      })
    end,
  },
  
  -- 🐞 调试 (vscode-js-debug)
  {
    "mfussenegger/nvim-dap",
    dependencies = {
      "rcarriga/nvim-dap-ui",
      "mxsdev/nvim-dap-vscode-js",
    },
    config = function()
      -- 配置 vscode-js-debug
      require("dap-vscode-js").setup({
        debugger_path = vim.fn.stdpath("data") .. "/lazy/vscode-js-debug",
        adapters = { "pwa-node", "pwa-chrome", "pwa-msedge" },
      })
      
      -- 自动管理 DAP UI
      local dap, dapui = require("dap"), require("dapui")
      dap.listeners.after.event_initialized["dapui_config"] = function()
        dapui.open()
      end
      dap.listeners.before.event_terminated["dapui_config"] = function()
        dapui.close()
      end
      dap.listeners.before.event_exited["dapui_config"] = function()
        dapui.close()
      end
    end,
  },
  
  -- 💡 智能导入 (tsluasnip)
  {
    "hrsh7th/nvim-cmp",
    dependencies = {
      "hrsh7th/cmp-nvim-lsp",
      "davidsierradz/cmp_tsluasnip",
    },
    config = function()
      local cmp = require("cmp")
      cmp.setup({
        sources = {
          { name = "nvim_lsp" },
          { name = "tsluasnip" }, -- TS 自动导入
          { name = "path" },
          { name = "luasnip" },
        },
        mapping = cmp.mapping.preset.insert({
          ["<C-b>"] = cmp.mapping.scroll_docs(-4),
          ["<C-f>"] = cmp.mapping.scroll_docs(4),
          ["<C-Space>"] = cmp.mapping.complete(),
          ["<C-e>"] = cmp.mapping.abort(),
          ["<CR>"] = cmp.mapping.confirm({ select = true }),
        }),
      })
    end,
  },
  
  -- 🧪 测试 (Jest/Plenary)
  {
    "nvim-neotest/neotest",
    dependencies = {
      "nvim-neotest/neotest-plenary",
      "nvim-lua/plenary.nvim",
    },
    config = function()
      require("neotest").setup({
        adapters = {
          require("neotest-plenary"),
        },
        output = {
          enabled = true,
          expand_on_run = true,
        },
        quickfix = {
          enabled = true,
          open = true,
        },
      })
    end,
  },
  
  -- 📏 代码质量 (ESLint)
  {
    "mfussenegger/nvim-lint",
    config = function()
      require("lint").linters_by_ft = {
        typescript = { "eslint" },
        typescriptreact = { "eslint" },
        javascript = { "eslint" },
        javascriptreact = { "eslint" },
      }
      vim.api.nvim_create_autocmd("BufWritePost", {
        callback = function()
          require("lint").try_lint()
        end,
      })
    end,
  },
  
  -- 📐 格式化 (Prettier)
  {
    "stevearc/conform.nvim",
    config = function()
      require("conform").setup({
        formatters_by_ft = {
          typescript = { "prettier" },
          typescriptreact = { "prettier" },
          javascript = { "prettier" },
          javascriptreact = { "prettier" },
          json = { "prettier" },
          jsonc = { "prettier" },
        },
        format_on_save = {
          timeout_ms = 1000,
        },
      })
    end,
  },
  
  -- 🎨 JSX 语法高亮
  {
    "maxmellon/vim-jsx-pretty",
    ft = { "typescriptreact", "javascriptreact" },
  },
}

---

🛠️ TypeScript 环境依赖安装

# 安装 Node.js 工具链
npm install -g typescript typescript-language-server eslint prettier
 
# 验证安装
tsc --version
typescript-language-server --version
eslint --version
prettier --version

---

✅ TypeScript 环境验证清单

• 切换环境：echo "typescript" > ~/.config/nvim/.nvim-env
• 启动 Neovim：nvim app.tsx
• LSP: <leader>gd 跳转定义
• 调试: <F5> 启动调试（需要配置 launch. Json）
• 智能导入: 输入 React 自动建议导入
• 格式化: 保存文件自动格式化
• 代码质量: 保存后显示 ESLint 警告
• JSX 高亮: React 组件正确高亮

---

接下来是 Web 环境（HTML/CSS），准备好了吗？