VSCode编辑器极简使用入门

VSCode编辑器极简使用入门插图1

VSCode(Visual Studio Code)是一款开源、跨平台、轻量级的代码编辑器,具有非常丰富的插件生态。他本身就是JavaScript + Electron ( /ɪˈlektrɒn/电子)代码开发的。官方下载地址:https://code.visualstudio.com/,支持绿色无安装。


01、常用快捷键

工具快捷键 描述
Ctrl + Shift + P 显示命令面板
Ctrl + B 显示/隐藏左侧边栏
Ctrl + J 显示/隐藏下方控制台/终端
Ctrl + \ 拆分为多个编辑器
ctrl + +ctrl + - 将工作区放大/缩小(包括代码字体、左侧导航栏)
Ctrl + Tab Ctrl + Shift + Tab 切换打开的多个文档

编码快捷键 描述
Ctrl + 左右方向键 按照单词移动光标
Alt + Shift + 左右方向键 按照单词增加、减少 选中内容
Ctrl + HomeCtrl + End 移动到第一行、最后一行
Cmd + C/V/X 复制、粘贴、剪切,如无选中则操作整行,鼠标三击也可以选中整行
Alt + ↑Alt + ↓ 移动代码向上、向下
Alt + Shift + ↑、Alt + Shift + 复制 代码向上、向下一行
Alt + 鼠标连续点击任意位置 所选位置出现多个光标,可以同时输入
Ctrl + D(一次或多次) 光标所在单词+和他相同的都会被选中并出现多个光标,可以同时修改
Ctrl + / 注释单行代码,自定义改成了Alt + shift + C,默认的两个键太远了
Alt + shift + F 格式化代码
Ctrl+L+L(自定义添加的,默认无快捷键) 合并选中行为一行,可以搜索指令“合并行”,然后给他添加一个快捷键

多个光标同时编辑还是挺方便的:(Alt + 鼠标连续点击任意位置、Ctrl + D)

VSCode编辑器极简使用入门插图2


02、常用配置

用户区与工作区

VSCode编辑器极简使用入门插图3

  • 用户:设置内容全局生效
  • 工作区:只针对当前工作目录(项目)生效。工作区设置会优先生效,适用于团队协作场景。设置文件保存在当前项目根目录的.vscode/settings.json中,可以被提交到Git仓库,方便共享给项目组的其他成员。

中文语言

在扩展中搜索“Chinese”安装中文语言包: Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code,重启生效。

字体样式

设置中搜索“Font”:

  • 字体大小15px,根据分辨率设置合适大小。
  • 字体:编程字体推荐等宽字体,在加上一个显示中文的,Consolas,"Microsoft YaHei"

VSCode编辑器极简使用入门插图4

"editor.fontFamily": "Fira Code,Consolas,"Microsoft YaHei"",

皮肤

  • 文件图标美化插件:vscode-icons
  • 比较不错深色主题皮肤插件(代码着色+VSCode皮肤):One Dark Pro

支持自定义配置:settings.json文件

"workbench.colorTheme": "One Dark Pro",
"workbench.colorCustomizations":{
  "tab.activeBackground": "#2f3e5e",
  "activityBar.background": "#282c34",
  "sideBar.background": "#383c44"
}

03、编程字体

等宽编程字体,个人现在用的字体设置:JetBrains Mono,Consolas,"Microsoft YaHei"

VSCode编辑器极简使用入门插图5

🔸Fira Code:免费的编程连字等宽字体,效果不错!FiraCode-Regular.zip

Fira Code,Consolas,"Microsoft YaHei"

VSCode编辑器极简使用入门插图6

🔸JetBrains Mono :JetBrains 公司专为开发者打造的免费开源编程字体。JetBrainsMono-Regular.zip

JetBrains Mono,Consolas,"Microsoft YaHei"

VSCode编辑器极简使用入门插图7

🔸Consolas :Windows自带字体,VS默认编程字体。Consolas是一套等宽字体的字型,属无衬线字体,由Lucas de Groot设计。

VSCode编辑器极简使用入门插图8


04、Emmet快速输入

Emmet是一个用于快速输入HTML、CSS代码的语法,可以用简单的语法快速生成HTML、CSS代码,语法形式类似CSS。VSCode中已经内置了Emmet的语法了,在html、css中使用,Tab键或回车即可。(Emmet /ˈɛmɪt/ 埃米特,没啥特别含义)

HTML 的Emmet 说明/示例
html:5 快速生成HTML文档的基本结构,包括html、head、meta、body标签
标签名 div p:

,div:

标签.类名p.className div.head:

标签#id div#head:

标签 { 标签内容 } h1{标题}:

标题

标签 [属性=value] a[href='#']{标签} :标签,可以只有属性
标签>嵌套子元素标签 li>span{item}:

  • item
  • 标签+兄弟元素标签 h1+p+p:

    括号分组( emmet ) (p[class='sel'])>h4:

    标签*数量 重复生成n个,li{item}*3:

  • item
  • item
  • item
  • $递增计数 li{item$}*2:

  • item1
  • item2
  • ,两位数就两个$$

    VSCode编辑器极简使用入门插图9

    CSS 的Emmet 都是属性简写+值+单位(默认px),记住常用的几个就可以了
    m10 m10:margin: 10px; , mt10:margin-top: 10px;
    p10、p10%、p10e p10:padding: 10px,p10%:padding: 10%;,p10e:padding: 10em;
    w100、h100 w100:width: 100px;,h100:height: 100px;
    bd bd:border: 1px solid #000;
    c#001 c#001:color: #001;
    +连接多个属性 m5+p10+lh32:margin: 5px; padding: 10px; line-height: 32;
    其他的各种模糊匹配 bg:background: #000; ,bgi:background-image: url();
    bx:box-sizing: border-box;,db:display: block;

    上面的Emmet可以组合使用,就能快速输入HTML、CSS代码。


    05、VSCode插件

    • IntelliCode:代码智能提示插件,支持多种语言。
    • Live Preview:启动一个本地服务器,页面运行预览。
    • Auto Rename Tag:自动闭合、重命名配对的标签。
    • Vetur : Vue开发的必备插件,核心功能:代码高亮、代码片段、代码格式化检查。Vue3升级为Volar插件。
    • Draw.io Integration:来自很受欢迎的开源画图组件 Draw.io,可以绘制各种流程图、UML图、原型图,功能非常丰富,可以本地画图体验非常酷。
    • 代码格式化:Prettier,便于统一代码风格,tab宽度、换行规则等。
    • 代码检测:ESLint,代码合法性检测。
    • Markdown All in One : 多合一的 Markdown 插件:自动补全,格式化,数学公式支持等功能以及丰富的快捷键。
    • MySQL : MySQL 管理工具。
    • REST Client :REST API 的测试开发利器。
    • LeetCode :Offer 收割利器,在 VS Code 中轻松刷题。

    ©️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址-语雀

    文章来源于互联网:VSCode编辑器极简使用入门

    THE END
    分享
    二维码