《VS Code 开发工具使用 学习笔记》

---

VS Code

• 微软的开源项目之一

2018 年的 github contributor 冠军 — > 微软
微软的其他开源项目：TypeScript 、…
微软收购 Github ----> 年

---

开发工具

---

扩展 — 使用插件

---

DocBlocker

• Adds simple comments to any place. 向任何地方添加简单的注释
  

---

PHP Debug

• PHP 代码 断点调试
  

---

PHP Intelephense

• 代码智能提示
  

---

Bracket Pair Colorizer

• 使用颜色识别匹配的括号
  

---

LeetCode

• 在VSCode 中进行刷题
  

---

vscode-icons

• 文件图标主题
  

---

Live Server

• Launch a local development server with live reload feature for static & dynamic pages. 启动具有静态和动态页面实时重新加载功能的本地开发服务器
  

---

Auto Rename Tag

• Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. 自动重命名成对的HTML/XML标记，与Visual Studio IDE相同
  
• When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag 重命名一个HTML/XML标记时，自动重命名成对的HTML/XML标记

---

Language pack extension for Chinese (Simplified)

• 适用于 VS Code 的中文（简体）语言包; 用来汉化 VSCode
  

---

View In Browser

• Extension for vscode to view a html file in a browser. 用于浏览器中预览 html 文件的VSCode 扩展
  

---

开启面包屑（Breadcrumb）导航

• 下载插件 breadcrumb
  

• 让我们的项目看起来更加有结构
  

• 全局设置中… activeEditorShort — activeEditorLong
  

---

使用插件 Project Manager

• 简介：用来快速管理项目，切换项目
  * Ctrl + Shift + P 打开命令面板 ，输入 project
  

---

settings.json配置

• 路径如下：C:\Users\*****\AppData\Roaming\Code\User
  

• 用户设置：全局设置

• 工作区设置：当与用户设置冲突时，工作区设置优先级更高
  

---

workbench.activityBar.visible

• 控制 工作台中活动栏的可见性
  

---

workbench.iconTheme

• 指定控制台中图标主题
  

---

常用操作

查看当前项目 npm 脚本命令汇总

显示目前打开了的文件汇总，

开发过程中了解某个文件的提交git 历史记录，可以通过vscode TIMELINE 了解到

开发过程中了解某个文件的内容结构（函数方法、属性定义等等）

关闭 vscode 文件缩进探测

开发过程中会遇到文件缩进没有按照自己编辑器的缩进展示，可能是这个文件在其他创作者电脑上的缩进与你设置的不同导致，自己设置的缩进没有生效，下面这个属性勾选，文件会检测自身是否存在缩进配置，取消勾选，就会按照我们编辑器设置的缩进显示

关闭 vscode 保存格式化代码

常用的插件

---

Beautify

• 使用 F1 或 Fn + F1 美化代码
• Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. : 美化 JavaScript、JSON、CSS、Sass、HTML

VS Code 内部 使用了 js-beautify , 但是不支持用户去自定义希望的样式