《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 , 但是不支持用户去自定义希望的样式