一、VSCode基本介绍
VSCode(全称VisualStudioCode)是一款由微软开发跨平台的免费源码编辑器,用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能;
VSCode是目前前端开发使用比较多的一款编辑器;
二、VSCode安装
1、选择对应的安装包进行下载:官方下载地址
2、根据下载的安装包进行安装即可;
三、VSCode基本用户设置
-
打开设置
文件--首选项--设置,打开用户设置,可直接可视化设置(适用于小白),也可编辑setting.json文件修改默认配置,解析几个常用配置项:
(1)editor.fontsize用来设置字体大小,个人喜欢设置为14;
(2)file.autoSave表示文件是否进行自动保存,推荐设置为onFocusChange:文件焦点变化时自动保存;
(3)editor.tabCompletion 用来在出现推荐值时,按下Tab键是否自动填入最佳推荐值,推荐设置为on;
(4)editor.codeActionsOnSave中的source.organizelmports属性,这个属性能够在保存时,自动调整import语句相关顺序,能够让你的import语句按照字母顺序进行排列,推荐设置为true;
(5)editor.lineNumbers设置代码行号,editor.lineNumbers:truesetting.json文件打开方式:Ctrl+Shift+P -- 搜索框输入“setting”,选择打开设置(JSON)即可
禁用自动更新
文件--首选项--设置,搜索update mode,设置为none
开启代码提示
第一步:点击左下角设置图标,找到并点击“(设置)setting”;
第二部:搜索框输入“prevent”, 取消此项的勾选;
启用括号对着色
文件--首选项--设置,搜索bracket pair colorization,勾选使用括号对
常用的快捷键
- 行的操作
重开一行: 下角重开一行:
光标在行尾,回车即可
不在行尾,向下重开一行:Ctrl + enter
在上一行重开一行:Ctrl + shift + enter删除一行:
剪切一行:Ctrl + x
直接删除一行:Ctrl + shift + k移动一行:
向上移动一行:alt + ↑
向下移动一行:alt + ↓复制一行:
向上复制一行:shift + alt + ↑
向下移动一行:shift + alt + ↓- 词的操作
搜索或者替换:
搜索:Ctrl + f
替换:Ctrl + alt + f
在项目内搜索:Ctrl + shift + f- Ctrl的操作
快速打开最近的文件:Ctrl + p
打开新的编辑器窗口:Ctrl + shift + n
关闭编辑器:Ctrl + shift + w
光标跳转到行头:home
光标跳转到行尾: end
跳转到页头:Ctrl + home
跳转到页尾:Ctrl + end
折叠区域代码:Ctrl + shift + [
展开区域代码:Ctrl + shift + ]
添加关闭的注释:Ctrl + /
块区域注释: shift + alt + a
四、VSCode常用插件
1、中文(简体)语言包
下载完成之后,关闭编辑器,重启即为中文
不想安装插件可以通过以下方式设置中文:
(1)快捷键“Ctrl+Shift+P”,顶部弹出搜索框;
(2)输入“configure language”,回车,打开语言配置文件;
(3)将“en-us”修改成“zn-cn”,保存,关闭编辑器,重新打开就能看到中文界面;
2、在浏览器预览 View In Browser
3、文件图标 VSCode-icons (官方出品图标库)
使用:Ctrl + shift + p,搜索“icon”,选择VSCode Icons
4、多种主题皮肤 Material Theme
搭配扁平化主题图标库:Material Icon Theme使用更佳
5、同步所有设置和插件 setting sync
6、编写Markdown,支持预览 Markdown Preview Enhanced
7、图片预览 Image Preview
8、格式化代码 Prettier - Code formatter
8、操作美化 Json vscode - json
使用快捷:
- 验证:
cmd+alt+v - 格式化:
cmd+alt+b - 压缩:
cmd+alt+u - 加转义字符:
cmd+alt+' - 去转义字符:
cmd+alt+;
9、预览正则表达式效果 Regex Previewer
10、自动重命名HTML或者XML标签 Auto Rename Tag
11、自动添加HTML或者XML关闭标签 Auto Close Tag
12、智能路径提示 Path Intellisense
13、快速添加注释信息 Turbo Console Log
使用快捷:
- 选中变量之后,快捷生成 console.log:
ctrl + alt + l - 注释所有 console.log:
alt + shift + c - 启用所有 console.log:
alt + shift + u - 删除所有 console.log:
alt + shift + d
14、自动生成兼容css css-auto-prefix
15、定位css类名 CSS Peek
16、css/scss/less语法检查 Styleline
17、vue插件:语法高亮、智能感知、emmet等 Vuter
18、git插件:git提交日志 GitLens
团队开发必备:哪一行代码何时、何人提交