1、Prettier - Code formatter
Prettier是一个代码格式化插件。它通过解析代码并使用自己的规则重新打印代码来强制执行一致的样式,这些规则考虑了最大行长度,并在必要时包装代码。
效果如下所示:
2、ESLINT
ESLint静态分析代码以快速发现问题。它内置于大多数文本编辑器中,您可以将ESLint作为持续集成管道的一部分运行。
该扩展使用安装在打开的工作区文件夹中的ESLint库。如果文件夹没有提供一个扩展程序,则扩展程序会查找全局安装版本。如果您尚未在本地或全局安装ESLint,请在工作区文件夹中运行npm install eslint进行本地安装,或运行npm install -g eslint进行全局安装。
在新文件夹上,您可能还需要创建一个.eslintrc配置文件。您可以使用VS Code命令Create ESLint configuration或在带有eslint的终端中运行npx eslint --init命令来完成此操作。
具体配置,可以参考官方文档:https://eslint.org/
3、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
此中文(简体)语言包为 VS Code 提供本地化界面。
通过使用“Configure Display Language”命令显式设置 VS Code 显示语言,可以替代默认 UI 语言。 按下“Ctrl+Shift+P”组合键以显示“命令面板”,然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”,然后会按区域设置显示安装的语言列表,并突出显示当前语言设置。选择另一个“语言”以切换 UI 语言。
4、GitLens — Git supercharged
GitLens在VS Code中增强Git,并在每个存储库中解锁未开发的知识。它可以帮助您通过Git责备注释和CodeLens一目了然地可视化代码作者身份,无缝导航和探索Git存储库,通过丰富的可视化和强大的比较命令获得有价值的见解,等等。
可以看到git 的提交记录:
当前行最近提交的作者、日期和消息:
5、vscode-icons
插件提供文件对应的小图标,能够更加清新分辨文件的类型。
6、Remote - SSH
可以连接到服务器中,把服务器代码拉取到vscode中进行,对服务器代码修改和调试会比较方便,就是在本地开发一样。
Remote - SSH扩展允许您使用任何带有SSH服务器的远程计算机作为开发环境。这可以极大地简化各种情况下的开发和故障排除。您可以:
- 在您部署到的同一操作系统上进行开发,或者使用比本地计算机更大、更快或更专业的硬件。
- 在不同的远程开发环境之间快速切换,并安全地进行更新,而无需担心影响本地计算机。
- 从多台计算机或多个位置访问现有的开发环境。
- 调试在其他地方(如客户站点或云中)运行的应用程序。
不需要在本地机器上安装源代码就可以获得这些好处,因为扩展可以直接在远程机器上运行命令和其他扩展。您可以打开远程计算机上的任何文件夹并使用它,就像该文件夹在您自己的计算机上一样。
7、Auto Rename Tag
自动重命名成对的HTML/XML标记,与Visual Studio IDE相同。
例如,修改html标签,下面的闭合标签也会进行同步修改。
8、Vetur
Vue开发必备的插件,主要功能语法高亮显示,语意突显,片段,校验,错误检测,格式化,智能感知,调试,组件数据,流行Vue框架和自定义组件的自动完成和悬停信息,实验插值特性,VTI:在CLI上显示模板类型检查错误,支持定义全局组件等功能。
9、Path Intellisense
Visual Studio代码插件,自动完成文件引用。
10、Auto Close Tag
在写标签的时候,写完开始标签,会自动补齐结束标签。
自动添加HTML/XML关闭标记,与Visual Studio IDE或Sublime Text相同。
特点:
- 在开始标记的结束括号中键入时自动添加结束标记
- 插入结束标记后,光标位于开始标记和结束标记之间
- 设置不会自动关闭的标记列表
- 自动关闭自关闭标签
- Sublime Text 3支持自动关闭标签
- 使用键盘快捷键或命令调色板手动添加关闭标记
11、ES7+ React/Redux/React-Native snippets
ES 7+中的JavaScript和React/Redux片段,带有VS Code的Babel插件功能。
12、Code Spell Checker
一个基本的拼写检查器,可以很好地处理代码和文档。
这个拼写检查器的目标是帮助捕捉常见的拼写错误,同时保持误报的数量较低。
13、npm Intellisens
Visual Studio Code插件,在import语句中自动完成npm模块。
使用 cttrl + shiftt + p 输入npm,选中 npm Intellisens ,然后输入模块名就自动导入到页面光标位置了。
14、Angular Language Service
此扩展为Angular模板提供了丰富的编辑体验,包括内联 和外部模板,包括:
- 完成列表
- AOT诊断消息
- 快速信息
- 转到定义