前言:为每一次拿到空电脑不知道安装哪些vscode插件而做准备。
1.Auto Close Tag
作用:在编写HTML/XML代码时标签自动闭合,减少代码错误,提高效率。
2.Better Comments
作用:使用 Better Comments 插件,你可以通过在注释前添加特定的标记来给注释分类和着色。这些标记包括:
*:用于强调或标记注释中的关键信息;
!:用于突出显示重要的注释或需要特别关注的部分;
?:用于表示疑问或需要进一步解释的注释;
TODO:用于标记需要完成的任务或待办事项;
//:用于普通的注释。
3.Chinese (Simplified) (简体中文)
作用:此中文(简体)语言包为 VS Code 提供本地化界面,中文语言包
4.console helper
作用:选中需要打印的目标后,通过ctrl+L能快速输出console.log,并且能通过自定义的颜色快速有效的定位打印。
5.filesize
作用:显示文件大小
6.Git History
作用:查看git提交日志
7.GitLens — Git supercharged
作用:安装后可以直接在代码里看到谁在什么时候提交了代码,查看当前哪些文件修改了什么。
8.Guides
作用:代码自动缩进
9.HTML CSS Support
作用:CSS代码快捷神器。如语法高亮、代码提示和自动补全等
10.Import Cost
作用:计算依赖包大小,评估模块导入的大小。
11.Indent-Rainbow
作用:将代码的缩进以不同颜色显示,使得代码块和缩进层次更加清晰。这有助于快速理解代码的结构和逻辑。
12.JavaScript (ES6) code snippets
作用:自动提示JS可用的代码模板。
13.Live Server
作用:实时预览HTML文件。选择“Open with Live Server”选项,或者使用快捷键Alt+L, Alt+O
(如果已设置此快捷键)。
14.One Dark Pro
作用:代码颜色主题插件,更加简洁和易于阅读。
15.Open in Browser
作用:设置指定浏览器打开HTML文件。选择“Open in Default Browser”选项。如果您有多个浏览器可用,可以在子菜单中选择具体的浏览器。
16.Path Intellisense
作用:路径补全。当你在编辑器中输入文件路径时,它会自动为你提供路径的建议和补全。
17.Auto Rename Tag
作用:自动完成另一侧标签的修改
18.Prettier - Code formatter
作用:格式化代码。可以在Vscode的设置中搜索“settings.json”来编辑配置。例如,可以设置代码的缩进风格(使用空格或制表符)、行宽限制、是否使用单引号或双引号等。此外,还可以在项目根目录下创建一个.prettierrc
文件来定义全局的Prettier配置规则。
①.自动格式化(可以通过快捷键Shift+Alt+F
对整个文档进行格式化,或者使用Ctrl+K, Ctrl+F
对选中的代码进行格式化。)
②.命令行格式化(通过命令行运行Prettier也可以格式化代码。首先,需要通过npm或其他包管理工具全局安装Prettier。然后,在项目的package.json
文件中配置相应的脚本命令,如"prettier": "prettier --write ."
,这样可以通过运行npm run prettier
命令来格式化项目中的所有文件。)
③.自定义代码风格
可以在Vscode的设置中自定义Prettier的代码风格,包括但不限于缩进风格、行宽、引号类型等。这些设置可以根据个人偏好或团队规范进行调整
19.vetur(vue 2开发必备)volar(vue 3开发必备)
作用:vetur 或 volar插件是一个专门用于开发 Vue.js 项目。它提供了许多有用的功能,包括语法高亮、代码补全、错误检查、格式化、调试等。
20.Eslint(错误标注)
作用:Eslint插件可以发现代码中的错误和错误,从而使编码变得更好。它通过显示可能出现错误或警告的位置来帮助您避免错误。另外,它甚至可以自动修复这些问题。
21.any-rule
作用:any-rule插件允许你在编辑器中的 HTML、CSS、JavaScript 等文件上右键点击,查找你需要的正则,或者按下 F1
,输入 zz
,然后查找并选中你需要的正则,就可以把正则表达式插入到光标所在的位置。