03.Web环境配置

好的！接下来是 Web 环境（HTML/CSS/JavaScript）。

---

🌐 Web 环境专用配置

目录结构

~/.config/nvim/lua/envs/web.lua

配置内容

-- ~/.config/nvim/lua/envs/web.lua
return {
  -- 🔧 LSP (HTML/CSS/JSON)
  {
    "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
      
      -- HTML LSP
      require("lspconfig").html.setup({
        on_attach = on_attach,
        capabilities = capabilities,
      })
      
      -- CSS LSP
      require("lspconfig").cssls.setup({
        on_attach = on_attach,
        capabilities = capabilities,
        filetypes = { "css", "scss", "sass" },
      })
      
      -- JSON LSP
      require("lspconfig").jsonls.setup({
        on_attach = on_attach,
        capabilities = capabilities,
        settings = {
          json = {
            schemas = {
              {
                fileMatch = { "package.json" },
                url = "https://json.schemastore.org/package.json"
              },
              {
                fileMatch = { "tsconfig.json" },
                url = "https://json.schemastore.org/tsconfig.json"
              }
            },
          }
        }
      })
      
      -- YAML LSP
      require("lspconfig").yamlls.setup({
        on_attach = on_attach,
        capabilities = capabilities,
      })
    end,
  },
  
  -- ✨ Emmet (HTML/CSS 快速编写)
  {
    "mattn/emmet-vim",
    ft = { "html", "css", "scss", "sass", "javascript", "typescript", "jsx", "tsx" },
    config = function()
      vim.g.user_emmet_leader_key = '<C-y>'
      vim.g.user_emmet_settings = {
        html = { expand_inline = true },
        css = { expand_inline = true },
      }
    end,
  },
  
  -- 📏 代码质量
  {
    "mfussenegger/nvim-lint",
    config = function()
      require("lint").linters_by_ft = {
        html = { "tidy" },
        css = { "stylelint" },
        scss = { "stylelint" },
        sass = { "stylelint" },
        javascript = { "eslint" },
        typescript = { "eslint" },
      }
      vim.api.nvim_create_autocmd("BufWritePost", {
        callback = function()
          require("lint").try_lint()
        end,
      })
    end,
  },
  
  -- 📐 格式化
  {
    "stevearc/conform.nvim",
    config = function()
      require("conform").setup({
        formatters_by_ft = {
          html = { "prettier" },
          css = { "prettier" },
          scss = { "prettier" },
          sass = { "prettier" },
          javascript = { "prettier" },
          typescript = { "prettier" },
          json = { "prettier" },
          jsonc = { "prettier" },
          yaml = { "prettier" },
        },
        format_on_save = {
          timeout_ms = 1000,
        },
      })
    end,
  },
}

---

🛠️ Web 环境依赖安装

# 安装 Web 工具链
npm install -g prettier eslint stylelint html-tidy
 
# 验证安装
prettier --version
eslint --version  
stylelint --version
tidy -v

💡 注意：html-tidy 在 macOS 上可能需要 brew install tidy-html5

---

✅ Web 环境验证清单

• 切换环境：echo "web" > ~/.config/nvim/.nvim-env
• 启动 Neovim：nvim index.html
• Emmet: 在 HTML 中输入 div.container>ul>li*3 然后按 <C-y>,
• LSP: 在 CSS 中输入属性，查看自动补全
• 格式化: 保存 HTML/CSS 文件自动格式化
• 代码质量: 保存后显示 stylelint/tidy 警告
• JSON Schema: 在 package. Json 中输入字段，查看智能提示

---

接下来是 Rust 环境，准备好了吗？