win10系统:vscode安装教程及基本方法使用

512 阅读4分钟

一、VSCode基本介绍

VSCode(全称VisualStudioCode)是一款由微软开发跨平台的免费源码编辑器,用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能;
VSCode是目前前端开发使用比较多的一款编辑器;

二、VSCode安装

1、选择对应的安装包进行下载:官方下载地址

image.png
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:true

    setting.json文件打开方式:Ctrl+Shift+P -- 搜索框输入“setting”,选择打开设置(JSON)即可
    image.png

    禁用自动更新
    文件--首选项--设置,搜索update mode,设置为none
    image.png

    开启代码提示
    第一步:点击左下角设置图标,找到并点击“(设置)setting”;
    第二部:搜索框输入“prevent”, 取消此项的勾选;
    image.png

    启用括号对着色
    文件--首选项--设置,搜索bracket pair colorization,勾选使用括号对
    image.png

    常用的快捷键

    • 的操作

    重开一行: 下角重开一行
    光标在行尾,回车即可
    不在行尾,向下重开一行: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、中文(简体)语言包

image.png 下载完成之后,关闭编辑器,重启即为中文
不想安装插件可以通过以下方式设置中文:
(1)快捷键“Ctrl+Shift+P”,顶部弹出搜索框;
(2)输入“configure language”,回车,打开语言配置文件;
(3)将“en-us”修改成“zn-cn”,保存,关闭编辑器,重新打开就能看到中文界面;

2、在浏览器预览 View In Browser

image.png

3、文件图标 VSCode-icons (官方出品图标库)

image.png
使用:Ctrl + shift + p,搜索“icon”,选择VSCode Icons
image.png

4、多种主题皮肤 Material Theme

搭配扁平化主题图标库:Material Icon Theme使用更佳

image.png

image.png

5、同步所有设置和插件 setting sync

image.png

6、编写Markdown,支持预览 Markdown Preview Enhanced

image.png

7、图片预览 Image Preview

image.png

8、格式化代码 Prettier - Code formatter

image.png

8、操作美化 Json vscode - json

image.png

使用快捷:

  • 验证: cmd+alt+v
  • 格式化: cmd+alt+b
  • 压缩: cmd+alt+u
  • 加转义字符: cmd+alt+'
  • 去转义字符: cmd+alt+;

9、预览正则表达式效果 Regex Previewer

image.png

10、自动重命名HTML或者XML标签 Auto Rename Tag

image.png

11、自动添加HTML或者XML关闭标签 Auto Close Tag

image.png

12、智能路径提示 Path Intellisense

image.png

13、快速添加注释信息 Turbo Console Log

image.png
使用快捷:

  • 选中变量之后,快捷生成 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

image.png

a4a585ac1da4526ef6ea93a658e4c079.gif

15、定位css类名 CSS Peek

image.png

16、css/scss/less语法检查 Styleline

image.png

17、vue插件:语法高亮、智能感知、emmet等 Vuter

image.png

18、git插件:git提交日志 GitLens

团队开发必备:哪一行代码何时、何人提交 image.png