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

• 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中加入代码

"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

Ctrl + p : 找文件
Ctrl + Shit +p : 输命令
alt + 单击 : 多位置输入

注意：mac本 Ctrl 换成 Command ， alt 换成 option 即可