开发综合推荐
别名路径跳转
插件名：别名路径跳转
使用说明: 别名路径跳转插件，支持任何项目，
使用场景: 当你在开发页面时, 想点击别名路径导入的组件时（演示如下）
配置说明
-
下载后只需自定义配置一些自己常用的别名路径即可
// 文件名别名跳转 "alias-skip.mappings": { "~@/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "common": "/src/common" }, -
- 右击插件--》扩展设置--》路径映射在
settinas.json中编辑
- 右击插件--》扩展设置--》路径映射在
效果展示
路径别名智能提示
- 插件名：
path-alias - 场景: 在导入组件的时候，使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)
安装效果和功能
indent-rainbow（vscode自带的颜色其实就可以分辨了）
- 插件名:
indent-rainbow - 功能：彩虹缩进
Bracket Pair Colorizer 2（新版vscode已经内置无需下载）
- 插件名:
Bracket Pair Colorizer 2 - 功能：给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分
Auto Rename Tag（vscode内置）
- 插件名:
Auto Rename Tag - 功能：自动重命名标签
Code Spell Checker
- 插件名：
Code Spell Checker - 功能：检查单词拼写是否错误（支持英语）
Code Runner（可选）
- 插件名：
Code Runner - 功能：一键执行各种语言代码（常用于测试）
Debugger for Chrome（可选）
- 插件名：
Debugger for Chrome - 功能：在VSCode端，调试代码
Live ServerPP（可选）
- 插件名：
Live ServerPP - 功能：在服务器端打开你的文件，实时显示你修改的代码
-
- 支持websocket 消息服务，可以用于调试websocket 客户端
- 支持可编程虚拟文件，可用于模拟服务端API接口
Svg Preview
- 插件名：
Svg Preview - 功能：可以显示你的SVG图片，还可以编辑
Tabnine（可能会导致vscode卡死，慎用）（可选）
- 插件名：
Tabnine - 功能：智能提示代码，可以预测你将要写的代码进行提示
Template String Converter（可选）
- 插件名：
Template String Converter - 功能：在字符串中输入$触发，将字符串转换为模板字符串
vscode-pigments
- 插件名：
vscode-pigments - 功能：实时预览设置的颜色
Parameter Hints（可选）
- 插件名：
Parameter Hints - 功能：提示函数的参数类型及消息
Quokka.js（可选）
- 插件名：
Quokka.js - 使用：安装插件后，
ctrl+shift+p输入Quokka new JavaScr..即可使用 - 功能：实时显示打印输出，更多功能自行探索（常用于测试）
Highlight Matching Tag（可选）
- 插件名：
Highlight Matching Tag - 功能：当光标停留在标签时，高亮匹配的标签
JavaScript (ES6) code snippets
- 插件名：
JavaScript (ES6) code snippets - 功能：ES6的js代码片段，比如clg---console.log
auto-close-tag（vscode内置）
自动关闭标签。
当我们输入 <div/ 时，它会自动把后面的括号补充好。
虽然很简单的功能，但却是刚需！
Regex Previewer 边写正则边看结果
一边写正则，一边就能看到结果，这调试真的太方便了！！！
大众类插件
- 基本都有安装就不详细介绍了
插件（必装）
Bookmarks-
- 功能：常用于读源码进行标记行，跳转（代码标记快速跳转）
ESLint-
- 功能：代码规范检查
Prettier - Code formatter-
- 功能：代码美化，自动格式化成规范格式
Project Manager（可选）-
- 功能：项目管理插件，当开发多个项目时，可以快速跳转
Path Intellisense（vscode内置）-
- 功能：路径智能提示
Image preview-
- 功能：当引入路径为图片时，可以预览当前图片
GitLens-
- 功能：增强了
git功能，支持在VSCode查看作者、修改时间等等
- 功能：增强了
open in browser（可选）-
- 功能：在浏览器打开当前文件
- Trailing Spaces 尾部空格删除插件（vscode内置）
- Sort Typescript import import自动排序 这款插件让他们有序排列， 强迫症患者的福星。我记得eslint好像也有类似的规则。
- Beautify css/sass/scss/less 专门用来格式化css less的插件
Vue 开发推荐
vue-component
- 插件名：
vue-component - 功能：输入组件名称自动导入找到的组件，自动导入路径和组件
-
- 选中后自动输入组件名（包含必填属性）、import语句、components属性
Vetur
- 插件名：
Vetur - 开发 Vue 必备
Vue 3 Snippets
- 插件名：
Vue 3 Snippets - 基本必备：很多
Vue的代码段，很方便开发
React 开发推荐
React Style Helper
- 插件名：
React Style Helper - 功能：在
React中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能 -
- 自动补全
- 跳转至样式和变量定义位置
- 创建 JSX/TSX 的行内样式
- 预览样式及变量内容
- 行内样式自动补全，同时支持 SASS 变量的跳转及预览。
ES7 Reactsnippets（可选）
- 插件名：
ES7 React/Redux/React-Native/JS snippets - 功能：很多
React的代码段，很方便开发
Typescript React Code Snippets（好用）
此插件包含了使用 Typescript 的 React 代码片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以下是使用 TypeScript 创建 React 组件的两个片段。
输入tsrsfc即可生成react 函数式组件的模板片段
Better Comments（可选）
写出更个性化的注释。
vscode-styled-components（可选）
- 插件名：
vscode-styled-components - 功能：在
JS文件中写样式时，有智能提示
主题类
Dracula Official
- 插件名：
vscode-styled-components
One Dark Pro
- 插件名：
One Dark Pro
vscode-icons
- 插件名：
vscode-icons VSCode文件夹&文件图标
其他推荐
- 以下插件，可能不常用，大家感兴趣可以试试😉
CSS Initial Value
- 插件名：
vscode-icons - 功能：显示每个CSS属性的初始值，当光标停留在
css属性时
画板作图
- 插件名：
Draw.io Integration - 功能：在
VSCode中画图，支持多人协作编辑图表..
Echars 智能提示插件
- 插件名：
echarts-vscode-extension - 使用：安装插件后，
ctrl+shift+p输入active Echars即可开启智能提示 - 功能：提示各种
Echar中Option的属性，挺强大的
翻译插件
- 插件名：
A-super-translate - 使用方法：选中行，Ctrl+Shift+p 输入 翻译
-
- 键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
- 功能：翻译识别代码中注释部分，不干扰阅读。支持不同语言，单行、多行注释、
-
- 支持用户字符串与变量翻译,支持驼峰拆分
VSCode常用快捷键
VSCode内置很多快捷键，可以大大的提高我们的开发效率。
提示：这个快捷键都是可以自定义的，但用好默认的内置快捷键就足够胜任我们日常大部分开发了。
这里推荐黑马前端pink老师 VSCode快捷键-以及使用技巧 www.bilibili.com/read/cv9699…
VSCode一些好用的配置
彩虹括号
以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2，但是有着性能问题，着色慢。vscode在2021 年 8 月（1.60 版）开始内置了这个功能，随之到来的还有垂直连线，亲测，现在已经非常好用了，效果出色，并且所有颜色都是可主题化的，最多可以配置六种颜色。
在如下打开settings.json，记住放在最外层的大括号里。
这是我认为比较好的配置，详细的配置可以参考vscode官方文档。
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
复制代码
JavaScript参数名称提示
VSCode在2021 年 8 月（1.60 版）中加入JavaScript/TypeScript 嵌入提示参数名称和类型的内联提示等，此设置不会自动打开，也就是说也是需要我们手动去配置的。这些提示可以简单的帮助我们做一些错误检查，同时也让代码更直观、好看。
这是我的一些配置，详细的配置说明可以参考vscode官方文档。
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.variableTypes.enabled": false,
标签换行
在VS Code中，可以在设置中搜索"** Editor: Wrap Tabs**"来实现选项卡换行的功能。 这样，在大型项目中工作时，就不需要像在浏览器中一样滚动来查找选项卡，而是可以让选项卡自动换行，更方便地跟踪模板和组件。
Timeline 视图：本地源代码控制
Git等代码控制工具能够轻松跟踪文件的变更，并且在需要时还原到之前的状态。为了提供更好的版本控制和代码历史的可视化，VS Code提供了Timeline视图。
Timeline视图是一个自动更新的面板，它显示与文件相关的重要事件，如Git提交、文件保存和测试运行等。通过Timeline视图，你可以更直观地浏览代码的演变过程，追踪各种操作对文件的影响。 展开此视图可查看与当前文件相关的事件快照列表。这里是文件保存，也是 Git 提交文件暂存的地方。
将鼠标悬停在快照项上可查看 VS Code 制作快照的日期和时间。
选择快照项可查看差异视图，显示快照时的文件与当前文件之间的更改。
自动保存
在编辑文件时，默认情况下需要手动保存文件，比如按下Ctrl + S快捷键。这个过程可能很麻烦，特别是当频繁修改文件时。为了减轻这种繁琐的操作，VS Code 引入了自动保存功能。
自动保存功能会在我们进行文件编辑时自动保存文件的更改，而无需手动按下保存快捷键。这意味着我们可以专注于写代码而不用担心保存文件，节省了不少时间和精力。此外，自动保存还确保我们始终使用的是最新的文件版本，避免了由于未及时保存而丢失修改的情况。 使用**“文件”>“自动保存”**可以轻松启用该功能。
然而，自动保存功能并非完美无缺。有些人可能喜欢手动控制保存的时机，以便在修改完成之前进行检查和确认。自动保存也可能导致一些意外情况，比如误操作或者意外修改了文件内容，因为一旦保存，修改就会立即生效。
是否启用自动保存功能取决于个人偏好和实际需求。权衡利弊，根据自己的习惯和工作流程来决定是否使用自动保存功能。
新设备同步
当在一台电脑上设置好了自己喜欢的 VS Code 环境后，如果换了一台新电脑，不想再重新配置一遍。这时，VS Code的设置同步功能就派上用场了。 通过设置同步功能，可以将一台电脑上的所有配置都保存下来。然后，在新的电脑上登录账号，开启设置同步功能，就可以让新电脑应用上与之前完全相同的设置。这样，不需要再花时间重新调整和配置所有的设置了。
禁用预览
在 VS Code 中，当打开一个文件后，立即打开另一个文件而没有编辑第一个文件时，第一个文件就会被替换掉。VS Code只是在选择文件时预览它们，所以一旦点击另一个文件，之前的文件就会消失。 可以在设置中搜索“Editor: Enable Preview”，取消勾选即可。这样，当打开一个文件后，即使打开了另一个文件，之前的文件也会保留在编辑器中，而不会自动关闭。这样，可以方便地在多个文件之间进行切换和比较。
除此之外，如果想在某些情况下时预览文件，而有些情况是固定文件。可以在 Tab 栏双击需要固定的文件，这样这个文件就被固定了，不会被替换掉。
多光标编辑
多光标编辑功能允许我们在不同的位置同时编辑多个光标所在的文本，从而快速地进行批量操作。例如，我们可以一次性在多行代码中插入同样的内容，或者同时删除多处重复的文本，以加快编辑的效率。
在编辑时，至少会有一个光标，可以使用"Alt + 单击"的方式添加更多的光标。 还可以使用 Ctrl + Alt + Down 或 Ctrl + Alt + Up 快捷键轻松地在当前行上方或下方添加光标。
总结
- 根据需求，大家安装对应插件即可（安装太多插件，VSCode会很卡）
- 当然电脑配置足够强大，当我没说🤔
浏览器插件推荐
掘金插件
功能介绍：提供了导航烂及常用的工具
沙拉查词（可选）
地址：saladict.crimx.com/（需科学下载） 功能介绍：好用的浏览器翻译插件，有别于谷额浏览器的全篇翻译（很蛋疼），针对个别词句的翻译
沉浸式翻译 （看X之类的很好用）
沉浸式翻译：最受欢迎的双语对照网页翻译插件
React Developer Tools（开发react必备 强烈推荐）
用于 React 开发的调试器插件。 可以显示 React 的数据流向、state 中的数据状态，支持 React 源码的断点调试，对于 React 的开发调试非常方便。
使用教程参考： juejin.cn/post/687754…
