Vscode 配置教程

史上最全vscode配置使用教程

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

软件下载

直接在官网进行下载

Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com/编辑

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

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

一、基础配置

中文界面设置
- 快捷键 Ctrl+Shift+P → 输入 configure language → 修改 locale.json 中 "locale": "zh-cn"
- 或安装插件：Chinese (Simplified) Language Pack
用户设置入口
- 路径：文件 > 首选项 > 设置
- 切换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`

四、必装插件分类

效率增强

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

代码质量

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

语言支持

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

五、高级技巧

禁用自动更新

设置中搜索 update mode → 改为 none
开启代码提示

取消勾选 Editor > Suggest: Show Words 的 prevent 选项
终端控制
- 开关终端： `Ctrl + ``

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