Vscode 配置教程

史上最全vscode配置使用教程

欲善其事，必先利其器。想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多vscode的配置以及使用博客，但都没有本篇那么详细且全面。

软件下载

直接在官网进行下载

Visual Studio Code - Code Editing. Redefined​code.visualstudio.com/​编辑

最近很多人留言说官网下载被限速，如果大家存在这种情况，可以在“前端码头”后台发送vscode获取软件包。

以下是为优化后的VSCode配置指南，内容结构化更清晰：

一、基础配置

1. 中文界面设置

   • 快捷键 Ctrl+Shift+P → 输入 configure language → 修改 locale.json 中 "locale": "zh-cn"
   • 或安装插件：Chinese (Simplified) Language Pack

2. 用户设置入口

   • 路径：文件 > 首选项 > 设置
   • 切换JSON模式：搜索 workbench.settings.editor → 选择 JSON

---

二、核心配置项（settings.json）

{
  // 基础编辑设置
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.lineNumbers": true,
  "files.autoSave": "onFocusChange", // 窗口失焦时保存
  "editor.codeActionsOnSave": { 
    "source.organizeImports": true // 自动整理import
  },

  // 文件关联
  "files.associations": {
    "*.vue": "vue",
    "*.wxml": "html"
  },

  // 排除文件
  "search.exclude": {
    "**/node_modules": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/*.js": { "when": "$(basename).ts" } // 隐藏编译后的JS
  },

  // Vue专属格式化
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": { "singleQuote": true }
  }
}

---

三、效率快捷键速查表

功能	快捷键 (Windows)
行操作
向下重开行	Ctrl + Enter
删除当前行	Ctrl + Shift + K
移动行	Alt + ↑/↓
代码导航
快速文件跳转	Ctrl + P
行首/行尾	Home / End
页首/页尾	Ctrl + Home/End
代码折叠	Ctrl + Shift + [ / ]
注释
行注释	Ctrl + /
块注释	Shift + Alt + A

---

四、必装插件分类

效率增强

1. vscode-icons - 文件图标美化
2. Auto Rename Tag - 标签自动同步
3. Path Intellisense - 路径智能补全

代码质量

1. Prettier - 自动格式化（需配置 .prettierrc）
2. stylelint - CSS/SCSS语法检查

语言支持

1. open in browser - HTML浏览器预览
2. Markdown Preview - 实时Markdown渲染

---

五、高级技巧

1. 禁用自动更新
   设置中搜索 update mode → 改为 none

2. 开启代码提示
   取消勾选 Editor > Suggest: Show Words 的 prevent 选项

3. 终端控制

   • 开关终端： `Ctrl + ``

---

提示：配置后若未生效，尝试重启VSCode或检查JSON语法错误。此配置已适配Vue/微信小程序开发场景。