01·灵魂前端工程师养成-安装配置VScode

2022-09-26 14:56:39 浏览数 (1)

  • VScode下载
  • VScode配置
  • VScode个人配置(可选)
  • VScode 必会

-曾老湿, 江湖人称曾老大。


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。


VScode下载

下载VScode

VScode配置


汉化

搜索chinese,然后点击install安装

安装完成后,重启程序


字体设置

在下图中,搜索栏里搜索字体,然后将 Editor:Font Size 原本是12,根据自己喜好调整,我调整到18


设置自动保存

在搜索栏中,搜索auto save,然后将 Files:Auto Save 原本的off修改成onFocusChange


设置自动格式化

在搜索栏中,搜索format on save然后将 Editor:Format On Save 下面的勾选中即可(建议在工作中关闭),可能会影响队友

VScode个人配置(可选)

1.将面板靠右

2.字体设为 Fira Code,Consolas,'Courier New',monospace

3.连字字体

settings.json中加入代码

代码语言:javascript复制
"editor.fontLigatures": true

#加入之后所有代码如下
{
    "editor.fontSize": 18,
    "files.autoSave": "onFocusChange",
    "editor.formatOnSave": true,
    "workbench.sideBar.location": "right",
    "editor.fontFamily": "Fira Code,Consolas,'Courier New',monospace",
    "editor.fontLigatures": true
}

默认,不使用连字字体===效果如下:

使用连字字体后,如果输入===三个等于号,效果如下:

4.安装插件

  • Code Spell Checker
    • 防止代码里面单词拼错
    • 看到提示你一定要查字典修改
  • Git Easy
    • 方便操作git

VScode 必会


功能

1.开启终端、开启第二个终端

1)开启一个终端

2)开启两个终端

3)分屏

2.搜索文件夹,搜索当前文件,搜索选中区域

区域搜索:Ctrl f

3.设置语法(不要使用纯文本)

4.Emmet快捷写代码

输入!Tab键,会自动生成一个html的代码,很方便

高难度操作 选中1 2 3 4 按住 Ctrl Shift p 输入 emmet wrap 点击 输入缩写包围个别行

输入div*Enter 确认,即可多行代码被标签包住

5.Git操作 6.调试JavaScript/TypeScript


快捷键

代码语言:javascript复制
Ctrl   p : 找文件
Ctrl   Shit  p : 输命令
alt   单击 : 多位置输入

注意:mac本 Ctrl 换成 Command , alt 换成 option 即可

0 人点赞