Visual Studio Code是个牛逼的编辑器，启动非常快，我已经抛弃WebStorm Sublime了。
支持各种语言，相比其他IDE，轻量级完全可配置还集成Git感觉非常的适合前端开发。 所以我仔细研究了一下文档未来可能会作为主力工具使用。

虽然习惯了N久的快捷键，没法，习惯什么的是吧，习惯下就好了所以 官方快捷键大全 ，看看这个就好，好在现在快捷键熟悉得差不多了，不会比sublime慢多少

VS code插件整理

家里电脑之前杂七杂八东西装太多 = = 太卡，遂重装了系统，各种环境重新搭一遍。顺便更新这篇吧

基础功能扩展

  • One monokai 因为我喜欢，我放在第一了
  • vscode-icons
  • output colorizer 让log文件变得五颜六色
  • Color Highlight，识别代码中的颜色，包括各种颜色格式；
  • Color Manager 调色盘
  • Bracket Pair Colorizer，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心；
  • Project Manager，项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢；

代码检查 / 格式化

  • Prettier 代码格式化，这两个选一个就好
  • Better Comments 为注释增加几种风格的标注
  • Better Align md 和 js 里的变量、注释更好的对齐
  • Conventional Commits 把Conventional拿到vscode了，对个人来说这样提交更快
  • editorconfig for vscode 支持 .editorconfig
  • ESlint 代码检查工具不解释了
  • ESLint Chinese Rules 同上
  • html snippets
  • javascript code snippets / Super Console 我换成这个了

代码片段

  • Auto Close Tag，适用于 JSX、Vue、HTML，在打开标签并且键入 </ 的时候，能自动补全要闭合的标签；
  • Auto Rename Tag，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；
  • auto-header 快速为文件加注释头
  • Path Intellisense，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；
  • NPM Intellisense，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；
  • IntelliSense for CSS class names，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；
  • Auto Comment Blocks 效率注释

编码效率

  • Auto Import 查找帮快速import
  • HTML-Essentials Web开发插件包
  • embrace 快速的在选中代码两边添加各种引号、括号，不用来回移动光标
  • Bracket Pair Colorizer 更方便看括号，作用域等
  • Code Spell Checker 检查英语拼写是否合法. 选装… 一堆报错
  • Code Runner 名副其实的代码运行插件，支持数十种语言，在不离开代码编辑器的前提下通过命令面板可直接执行代码，并查看输出
  • path autocomplete 路径补全
  • 别名路径跳转 就是搜索中文名
  • Tailwind CSS IntelliSense 如果用tailwind肯定要装

项目管理、功能增强

  • Code Runner 直接跑js代码，node.js
  • CodeSnap 复制代码生成图片
  • file peek 可以看到对应文件的代码片段
  • Svg Preview svg 预览
  • Settings Sync 基于 Gist 实现 VSCode 用户配置、快捷键配置、已安装插件列表等的备份和恢复功能，配置过程有详细精确的操作步骤文档。生成的备份 Gist 默认是私密的，如果你想设置为共享的，也可以一键切换。
  • Git Lens 把 VSCode 结合 Git 的使用体验优化到了极致，能让我们在不离开编辑器，不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。
  • Code Outline 能在单独窗口中列出当源代码中的各种符号，比如变量名、类名、方法名等，并支持快速跳转，有点类似于 Vim 里面的 ctags，翻看老代码、开源项目代码时非常有用。
  • Project Management 可简单切换多个项目

辅助工具

  • A-super-translate 英语小白必备
  • any-rule 很多常用正则
  • Codelf 变量起名神器
  • can i use 浏览器兼容性检查
  • Debugger for Chrome 允许像chrome一样在vs code里调试
  • partial diff 同名，可以查看文件间的差异
  • todo highlight 待做项高亮，且可查看统计
  • Version lens 查看package依赖，且帮更新，需要自行npm install
  • VSCode Map Preview 地图坐标信息格式文件，就可就行预览
  • vscode-fileheader 自行生成file header
  • Super Console 一个前端使用的日志打印工具

Vue

  • Vue VS Code Extension Pack 一个扩展包，包括10个插件
  • Vite 不解释，配套Vue3
  • Vitest Vite的单元测试扩展

React

  • ES7+React 开发必备