大多数直接在插件商店搜索即可。
不建议安装太多的插件,因为插件之间可能会造成冲突。比如多个格式化插件。
插件名称 | 插件作用 | 备注 |
---|---|---|
chinese | 汉化vscode | 你懂的 |
open in browser | 右键打开项目(file协议) | ... |
View In Browser | 右键在vscode侧边栏上打开项目 | 因为有的人下载open in browser 打不开浏览器 |
live server | 右键以服务器的方式打开项目 | 更改代码实时更新页面哦 |
Browser Preview | 在编辑器中打开一个用于调试的真正的浏览器预览 | ... |
Code Runner | 一键运行代码,支持40中语言 | Code Runner |
Auto Close Tag | 自动补全关闭标签 | ... |
Auto Rename Tag | 自动重命名标签 | ... |
Bracket Pair Colorizer | 括号配对着色,方便查看多层嵌套的代码 | ... |
Code Spell Checker | 拼写检查程序,报告一些常见的拼写错误 | |
Prettier | 代码格式化程序 | ... |
Lorem | 随机生成文字 | ... |
Better Comments | 不同注释显示不同颜色 | |
Color Highlight | 在你的文件中找到的 css/web 颜色 | ... |
Quokka | Quokka 是J 和 Ts 的快速原型开发平台 | 在你输入代码时,它将立即运行你的代码,并在代码编辑器中显示各种执行结果。 |
Beautify | 快速格式化代码 | ... |
vscode-icons | 文件扩展名旁边添加对应图标 | ... |
Live Saas Compiler | 实时把 SASS/SCSS 文件编译 / 转译成 CSS 文件 | ... |
JavaScript (ES6) code snippets | 面向 VS Code 编辑器的 ES6 语法的 JavaScript 代码片段(支持 JavaScript 和 TypeScript) | ... |
ESLint | 语法规则和代码风格的检查工具 | ... |
Path Autocomplete | 文件路径自动补全 | ... |
Document This | 快速生成注释 | ... |
Todo Highlighter | 高亮标记 TODO 注释,以便更容易追踪任何未完成的业务。 | ... |
GitLens | 增强了 VSCode 中内置的Git功能,包括查看代码作者、查看历史提交记录等等。 | ... |
Debugger for Chrome | js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出 | ... |
filesize | 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间,安装后自动运行 | ... |
px to rem | px 转换 rem | ... |
Easy Sass | 直接保存scss/sass文件可自动生成并同步编译成同名文件 | ... |
HTML Snippets | H5代码片段以及提示 | ... |
HTML CSS Support | 智能提示当前项目所支持的样式 | ... |
HTMLHint | html代码检测 | ... |
KoroFileHeader | 文件顶部注释作者信息 | 文件头部版权注释信息 |
vetur | vue语法高亮 | ... |
Import Cost | 引入包大小计算 | ... |
background | 修改vscode的背景 | ... |
cssrem | vscode 写的px 自动计算成 rem | 需要进行插件设置 |
Settings Sync | 同步 VS Code设置同步到 GitHub 账号,包括 setting 文件和插件设置等等 | 现在用github账号登录vscode就已经可以同步了 |
Image Preview | 鼠标移到路径里显示图像预览 | ... |
jQuery Code Snippets | jQuery 代码片段 | ... |
Node.js Modules Intellisense | 在导入语句中自动完成JavaScript / TypeScript模块 | ... |
Version Lens | 显示最新版本的npm,jspm,bower,dub和dotnet核心的软件包版本信息 | ... |
Code Runner
安装好Code Runner之后,打开你所要运行的文件,有多种方式来快捷地运行你的代码:
- 键盘快捷键 Ctrl+Alt+N
- 快捷键 F1 调出 命令面板, 然后输入 Run Code
- 在编辑区,右键选择 Run Code
- 在左侧的文件管理器,右键选择 Run Code
- 右上角的运行小三角按钮
如果要停止代码运行,也有如下几种方式:
- 键盘快捷键 Ctrl+Alt+M
- 快捷键 F1 调出 命令面板, 然后输入 Stop Code Run
- 在Output Channel,右键选择 Stop Code Run
如果出现乱码怎么办?
通过设置,我们可以把代码放到 VS Code 内置的 Terminal 来运行,这两个问题就能迎刃而解了。
选择 文件->首选项->设置,打开VS Code设置页面,找到 Run Code configuration,勾上 Run In Terminal选项。
设置之后,代码就会在 Terminal 中运行了。
文件头部版权注释信息
保存文件即可生效。
"fileheader.customMade": {
"Descripttion": "",
"version": "",
"Author": "小茴香",
"Date": "Do not edit",
"github": "....",
"LastEditTime": "Do not Edit"
},
"fileheader.cursorMode": {
"name": "",
"test": "test font",
"msg": "",
"param": "",
"return": ""
},