02-VSCode好用指南

参考资料(官网)：https://code.visualstudio.com/

在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择，包含大量扩展，几乎支持任何编程语言。

重点：免费!

快捷键速查表

• Windows/Linux快捷键

• MAC快捷键

界面

文件树

ctrl + shift + P 输入 settings.json 打开 Open User Settgins，添加如下 3 个配置：

{
  ...
  "workbench.tree.indent": 12,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#05ef3c"
  }
}

效果

自动格式化

打开设置，找到 format on save/paste/type，3项开启：保存/粘贴/键入一行

npm|cnpm镜像

cnpm 安装

npm install -g cnpm --registry=https://registry.npmmirror.com/

验证：

cnpm -v

npm 最新国内镜像源设置 2025

1. 国内源

淘宝：https://registry.npmmirror.com/

腾讯云：https://mirrors.cloud.tencent.com/npm/

CNPM：https://r.cnpmjs.org/

2.设置

#查询当前使用的镜像源
npm get registry

#设置为淘宝镜像源 
npm config set registry https://registry.npmmirror.com/

#验证设置
npm get registry

#还原为官方源
npm config set registry https://registry.npmjs.org/ 

插件列表(★)

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，中文插件包，第一个必装
• Auto Rename Tag，自动修改成对标签，默认生效
• view-in-browser，快速预览页面的插件
• Live Server，实时预览服务，快捷键 Alt + L，再 Alt + O
• htmltagwrap，快速键入p标签，结合成对修改标签使用，快捷键 Alt + W
• **px to rem & rpx & vw (cssrem)**，可以快速的转换px与rem单位，快捷键 Alt + Z
• Image preview，光标悬浮在图片路径上时，显示图片预览
• Comment Translate： 自动翻译 MDN reference 提示信息，最好设置一下源语种和目标语种
• Code Translate ：作者 w88975 自动翻译鼠标停留的代码变量单词悬浮
• TRAE AI (formerly MarsCode): Coding Assistant，豆包智能编程助手，提供代码解释、单测生成、问题修复、技术问答等，提升编码效率与质量。
• Code Spell Checker，标志错的单词，还可以提示单词的正确拼法。
• indent-rainbow，提示我们的缩进是否到位，每步交替四种不同的颜色，没有到位的话颜色变红
• IntelliJ IDEA Keybindings，转变快捷键习惯与 IDEA 风格
• Preview on Web Server，在web服务器上预览，重启vscode后，可以访问8080端口
  • 快捷键有冲突，记得修改快捷键，目前使用 Ctrl+Alt+Shift+字母 S 是停止，R 是重启，L 是快速预览
• Error Lens：主要用于代码编辑时错误及警告的提示和展示
• CSS Peek：是一个能够将类名快速转到定义的的插件，尤其是全局类名的时候，可以达到事半功倍的效果
• ESLint：ESLint语法标准检测（暂时禁用，语法提示过于严谨）
• Vue（Offical）：针对vue3的语法插件，需要禁用 Vetur 插件。
• Material Icon Theme ：文件图标主体插件，更高效美观的分辨不同的文件和文件夹 - 用的人多，但个人不太感冒。
• VSCode Icons ：【推荐】文件图标主体插件，简约简单，好识别不花哨。
• Path Intellisense ：路径智能提示补全插件，输入路径时非常好用
• CodeSnap ：选中的代码快速存储为美观的截图
• Doxygen Documentation Generator ：和 IDEA 一样快捷的输入方法或者类的注释
• AI 代码补全插件：https://apifox.com/apiskills/vscode-code-completion/

PS：如果插件安装无法联网，把windows文件管理器下 %USERPROFILE%\.vscode\extensions，删除该文件夹下所有内容。

自用快捷键-IDEA风格

• Ctrl + Alt + Shift + J 批量选中相同变量

• Ctrl + Alt + L 转变快捷键习惯与 IDEA 风格后的 代码自动格式化 快捷键

  • 连带两个设置: Editor: Word Wrap Column 和 Prettier: Print Width 两个字段设置为 150（默认值为80），可以增加格式化时触发换行的宽度

• Ctrl + E 打开顶部文件搜索栏

• Ctrl + G 跳转到指定的行数

• Ctrl + Shift + O 搜索并跳转到当前文件指定的变量/方法名

• Ctrl + Tab 循环展示已打开的文件，↑ ↓ 选中到对应文件

• Alt + ←或→ 快速左右跳转已打开的文件【最常用】

• 双击shift后输入? ，展示最常用的命令或快捷键

• Ctrl + Shift + P，打开VSCode的命令面板

• Ctrl + \ 打开右侧拆分编辑器，此时 Alt + ←或→ 在当前编辑器窗口内切换文件，Ctrl+1或2 在第1个或第2个编辑器间切换

• Ctrl + Shift + ↑或↓ 移动当前代码行，或者 Alt + ↑或↓

• Ctrl + L 选中当前行，继续按就继续往下选（IDEA 中是 Ctrl + C 选中当前行）

• Ctrl + W 选中或扩选当前变量/方法，再按下 Ctrl + Alt + Shift + J 就可以选中当前文件中所有的该名字

• Alt + 滚轮 代码滚动加速滚动，方便浏览

• 对文件点击右键，可以选中当前比较文件，再选一个文件进行对比文件内容。

  • 终端命令方式 code --diff 文件路径A 文件路径B 会快速打开 vscode 的文件对比窗口进行对比（适用于不再同一个工程项目中）。
  • 替代工具 BeyondCompare

浏览器开发者工具

1. 弱网

2. 谷歌浏览器插件

FeHelper: https://chrome.zzzmh.cn/info/pkgccpejnmalmdinmhkkfafefagiiiad

可以插件内部添加很多使用的小组件进来。

3. 局域网访问8080

在Windows 11上开启8080端口：

• 打开“控制面板”，选择“系统和安全”，然后选择“Windows Defender 防火墙”。
• 在左侧导航栏中，选择“高级设置”。
• 在弹出的窗口中，选择“入站规则”，然后选择“新建规则…”。
• 选择“端口”，点击“下一步”，选择“TCP”，在“特定本地端口”中输入“8080”，然后点击“下一步”。
• 勾选“允许连接”，填写名称和描述，最后点击“完成”以保存设置。

4. 谷歌浏览器控制台字体设置

参考资料：https://juejin.cn/post/7348842402826485801

我的设置如下：

• 标准字体：微软雅黑
• Serif 字体：Microsoft YaHei Mono 或 Consolas
• Sans-serif 字体：微软雅黑
• 宽度固定的字体：Microsoft YaHei Mono 或 Consolas

ESLint语法检测

.eslintrc.js

module.exports = {
  ...,
  rules: {
    ...,
    'no-new': 'off',
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 'off'
  }
}

加上如上规则：

• no-new, 不准单独new - 关闭
• no-unused-vars， 不准有未使用的变量 - 关闭
• vue/multi-word-component-names，组件命名规则 - 关闭
  • 对应 error: Component name “xxx” should always be multi-word