目录

  • VS Code
  • 开发工具
  • 扩展 --- 使用插件
  • DocBlocker
  • PHP Debug
  • PHP Intelephense
  • Bracket Pair Colorizer
  • LeetCode
  • vscode-icons
  • Live Server
  • Auto Rename Tag
  • Language pack extension for Chinese (Simplified)
  • View In Browser
  • 开启面包屑（Breadcrumb）导航
  • 使用插件 Project Manager
  • settings.json配置
  • workbench.activityBar.visible
  • workbench.iconTheme
  • 常用操作
  • 常用的插件
  • Beautify


VS Code

  • 微软的开源项目之一

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

开发工具

扩展 — 使用插件

vs code 编译 android 代码_vscode

DocBlocker
  • Adds simple comments to any place. 向任何地方添加简单的注释
PHP Debug
  • PHP 代码 断点调试

    • vs code 编译 android 代码_Code_02


PHP Intelephense
  • 代码智能提示

    • vs code 编译 android 代码_vscode_03


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

    • vs code 编译 android 代码_vscode_04


LeetCode
  • 在VSCode 中进行刷题

    • vs code 编译 android 代码_vscode_05


vscode-icons
  • 文件图标主题

    • vs code 编译 android 代码_HTML_06


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

    • vs code 编译 android 代码_HTML_07


View In Browser
  • Extension for vscode to view a html file in a browser. 用于浏览器中预览 html 文件的VSCode 扩展
开启面包屑（Breadcrumb）导航
  • 下载插件 breadcrumb

    • vs code 编译 android 代码_缩进_08


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

vs code 编译 android 代码_HTML_09


vs code 编译 android 代码_缩进_10


vs code 编译 android 代码_Code_11

  • 全局设置中… activeEditorShort — activeEditorLong

    • vs code 编译 android 代码_缩进_12


使用插件 Project Manager
  • 简介：用来快速管理项目，切换项目
    * Ctrl + Shift + P 打开命令面板 ，输入 project
settings.json配置
  • 路径如下：C:\Users\*****\AppData\Roaming\Code\User

    • vs code 编译 android 代码_HTML_13

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

    • vs code 编译 android 代码_Code_14

workbench.activityBar.visible
  • 控制 工作台中活动栏的可见性
workbench.iconTheme
  • 指定控制台中图标主题
常用操作

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

vs code 编译 android 代码_缩进_15

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

vs code 编译 android 代码_Code_16

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

vs code 编译 android 代码_缩进_17

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

vs code 编译 android 代码_缩进_18

关闭 vscode 文件缩进探测

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

vs code 编译 android 代码_缩进_19

关闭 vscode 保存格式化代码

vs code 编译 android 代码_vscode_20


vs code 编译 android 代码_vscode_21

常用的插件

vs code 编译 android 代码_HTML_22


vs code 编译 android 代码_缩进_23

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

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