VSCode下载及各种实用插件安装教程

VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
1.VSCode下载

VSCode下载链接: https://code.visualstudio.com/
2.VSCode汉化

在这里插入图片描述

3.VSCode常用插件(安装步骤同汉化)
3.1 Auto Close Tag (自动闭合HTML/XML标签)

在这里插入图片描述
3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

在这里插入图片描述
3.3 Beautify (格式化 html ,js,css)
在这里插入图片描述

3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

在这里插入图片描述
3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

在这里插入图片描述
3.6 ESLint(js语法纠错,可以自定义配置)

在这里插入图片描述
3.7 GitLens(方便查看git日志)

在这里插入图片描述
3.8 HTML CSS Support (智能提示CSS类名以及id)
在这里插入图片描述

3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

在这里插入图片描述
3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

在这里插入图片描述
3.11 jQuery Code Snippets(jQuery代码智能提示)

在这里插入图片描述
3.12 Markdown Preview Enhanced(实时预览markdown)

在这里插入图片描述
3.13 markdownlint(markdown语法纠错)

在这里插入图片描述
3.14 Material Icon Theme(vscode图标主题)

在这里插入图片描述
3.15 Icon fonts(图标字体)

在这里插入图片描述
3.16 open in browser(右键快速在浏览器中打开html文件)

在这里插入图片描述
3.17 Path Intellisense(自动提示文件路径)

在这里插入图片描述
3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

在这里插入图片描述
3.19 Vetur(Vue多功能集成插件,错误提示等)

在这里插入图片描述
3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

在这里插入图片描述
3.21 npm Intellisense(require 时的包提示)

在这里插入图片描述 3.22将所写的东西在浏览器中显示快捷键:Shift+Alt+B选择一个浏览器打开(此处注意文件必须是 .HTML文件,不然不会显示内容)

例如我在VC上随便写一个东西,然后用浏览器打开,以下两个图为我的操作
在这里插入图片描述在这里插入图片描述
3.23 设置用滑轮改变字体的大小和更改vscode默认浏览器的方法

1.点击文件-首选项-设置:到达如下图所示
在这里插入图片描述
点击上图所示箭头,进入如下图,并输入这两行,然后ctrl+s保存后就可以用滑轮改变字体大小,并且可以更改你的默认浏览器
在这里插入图片描述
4.VSCode快捷键
4.1 左侧是按键,右侧是功能(下同)

在这里插入图片描述
4.2 基础编辑

在这里插入图片描述
4.3 导航

在这里插入图片描述
4.4 搜索和替换

在这里插入图片描述
4.5 多光标和选择

在这里插入图片描述
4.6 语言编辑

在这里插入图片描述
4.7 编辑器管理

在这里插入图片描述
4.8 文件管理

在这里插入图片描述
4.9 显示

在这里插入图片描述
4.10 调试

在这里插入图片描述
4.11 集成终端

在这里插入图片描述

4.12调节vscode的背景颜色快捷键 ctrl+k然后在按ctrl+t

4.13 打开浏览器 alt+b;保存Ctrl+s
本文作者:Yaphets.Lee

  • 6
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值