1.Visual Studio Code的下载与安装

VScode简介

Visual Studio Code是一款可以编译web应用程序的软件,该软件主要集成与Visual Studio 软件中,使用的方式与VS有一定的类似,其主要的特色是拥有一个强大的调试器,可以帮助程序员提高代码的编辑速度,并对代码进行循环调试;除了调试代码以往该软件还具有运行程序的功能,您可以直接在软件中模拟代码程序的运行情况,通过快捷键的操作快速掌握程序运行的每一个细节,当然了,并不是每一个扩展的程序都可以运行的,需要根据程序代码的具体设计方案进行控制。

Visual Studio Code如何安装

 下载安装网址:https://code.visualstudio.com/

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(1)

打开官方网址,点击download进入下载页面选择开发的版本即可,下载界面,以windows环境为例;

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(2)

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(3)

  • User Installer 用户安装程序
  • System Installer 系统安装程序

直接下载解压版的直接解压就可以安装使用!

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(4)

Visual Studio Code如何改成中文

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(5)

启动 Visual Studio Code,默认为英文界面。

  点击插件按钮,搜索 Chinese,如配图所示,如果没有安装中文插件,需要点击 Install 进行安装。

  按 F1 键,输入 Configure Language ,点击搜索结果中的 Configure Display Language。

  此时会打开语言配置文件 locale.json,英文状态下 locale 属性默认为 en,将 en 修改为 zh-CN,然后保存重启工具即可。


2.安装开发中必备插件

可以根据自己开发使用的语言来设置和配置,一个好的开发工具可以使我们开发提升效率和少出错

Visual Studio Code如何安装必备的调试插件

Vscode默认是在控制台下查看html文件,对于我们查看和调试都很不方便,那如何在浏览器中打开呢?

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(6)

在扩展栏的搜索栏中输入open in browser,找到open in browser这款插件,点击右下角“安装”字样即可安装。

安装完成后可以看一下这款插件的扩展文档,里面有插件的各种信息,及插件的使用方式等

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(7)

以下是常用的插件名称和作用

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(8)

Visual Studio Code快捷键

1、代码格式化 :   当前选择的源代码:Ctrl K Ctrl F.   整个文档格式:Shift Alt F.   2、导航到特定行   键盘快捷键:Ctrl G.   3、撤消光标位置   键盘快捷键:Ctrl U.   4、修剪尾随空格   键盘快捷键:Ctrl K Ctrl X.   5、转到工作区中的符号   键盘快捷键:Ctrl T.   6、上下移动线   键盘快捷键:Alt 向上或Alt 向下   7、代码折叠   键盘快捷键:Ctrl Shift [和Ctrl Shift ]   8、选择当前行   键盘快捷键:Ctrl L.   9、导航到文件的开头和结尾   键盘快捷键:Ctrl Home和Ctrl End   10、打开Markdown预览   在Markdown文件中,使用键盘快捷键:Ctrl Shift V.


3.Emmet 插件快速生成html使用

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(9)

  1. 后代嵌套如果你想写一个ul,ul内部写一个li,li内部写一个span,就可以

在html文档中输入 ul>li>span,然后按下你的tab键,就会生成以下代码

<ul> <li><span></span></li> </ul>

  1. 兄弟如果你想写一个h2,下面跟着一个p。

在html文档中输入 h2 p,然后按下你的tab键,就会生成以下代码

<h2></h2> <p></p>

  1. 分组嵌套如果你的div中要写一个h2和p。

在html文档中输入 div>(h2 p),然后按下你的tab键,就会生成以下代码:

<div> <h2></h2> <p></p> </div>

  1. 乘法解决你们问题的来喽!!!

如果你想写一个ul,ul内部写多个li,每个li内部写一个span,那怎么写呢?

我们在html文档中输入 ul>li*5>span,然后按下你的tab键,就会生成以下代码:

<ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>

这样是不是很方便?写table表格的时候是不是也很有用?

还有很多有用的小技巧咱们继续说;

  1. 自动增长如果你想创建一个ul,里面有5个li,并且li的类名还是类似item-1这的形式

在html文档中输入 ul>li.item-$*5,然后按下你的tab键,就会生成以下代码:

<ul> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> <li class="item-4"></li> <li class="item-5"></li> </ul>

  1. id和类div#box

<div id="box"></div>

div.box

<div class="box"></div>

7、文本

div{test}div{test}

<div>test</div>

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(10)

以上就是emmet的常用语法!

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(11)

我补充一句:还需要多加练习!才能得心应手!

更多使用方法请查看 [Emmet快捷方式查询]

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(12)


4.程序员写作专用Markdown语法介绍

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(13)

作为程序员,如果你还用word写作或者做笔记,那我强烈建议尝试下markdown写作。

首先,它不像word排版那么复杂,markdown只需要几个简单的快捷键,就能快速实现文档的排版。而且,如果你写博客,想在多个平台复制你的文章,markdown也不会因为复制粘贴而丢失格式。最后,markdown会让你更多的关注自己内容,而不是把时间花在各种花哨的排版上。

什么是markdown?

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。所谓轻量级,就是使用简单的一些标记符号就可以快速实现文档排版,非常容易掌握 。

markdown的常用语法

下面简单介绍下一些最常用的语法:

1.标题

标题标记:#

# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题

效果:

一级标题二级标题三级标题四级标题五级标题六级标题

注:对应的html标签:<h1> ~ <h6>,效果<h1> ~ <h6>

  • 一级标题,在文本下面添加一个或以上的等号:=
  • 二级标题,在文本下面添加一个或以上的减号:-
2.引用

引用标记:>

> 引用标记

效果

引用内容

引用嵌套

标题

3.公式块

公式块标记: § §

$$ 1*2=2 $$

效果

1*2=21∗2=2

4.列表

无序列表:可以使用、 、-、*

有序列表:数字 点号

- 前端开发工具 html5 标记语言 css3 样式表 javascript 前端脚本 流行的函数库或开发框架 * jQuery * Vue.js * Node.js Webpack 前端资源打包转换器 1. 后端开发语言 1. php 流行的Web开发语言 2. python 通用编程语言 3. java 通用编程语言 <!-- 注意:如果有序列表的内容始终处于更新当中,建议只指明开始的序号即可,后面序号自动生成 --> - 商品分类 1. 家用电器 0. 电脑配件 0. 周边设备 0. 手机数码 0. 服装百货

效果

  • 前端开发工具
    • html5 标记语言
    • css3 样式表
    • javascript 前端脚本
    • 流行的函数库或开发框架
      • jQuery
      • Vue.js
      • Node.js
    • Webpack 前端资源打包转换器
  1. 后端开发语言
    1. php 流行的Web开发语言
    2. python 通用编程语言
    3. java 通用编程语言
  • 商品分类
  • 家用电器
  • 电脑配件
  • 周边设备
  • 手机数码
  • 服装百货
5.分割线

在一行中使用三个或更多的 *、-或 _ 来添加分隔线(``):

------ *** * * * ************************ --- - - -

效果







6.代码块
  • 语法1: 在代码前缩进4个空格,或者1个制表符即可
  • 语法2: 使用三个反引号 ```
  • 语法3: 使用三个波浪线 ~~~
  • 语句4: 段落中的单行代码使用一个反引号或波浪线
  • 可以指定编程语言名称,以实现代码高亮

function hello(name) { return 'Hello ' name; //返回用户名 }

function hello(name) { return 'Hello ' name; //返回用户名 }

<!-- 会看到删除线提示:表示波浪线并不是推荐的语法形式, 加空格后提示消失 -->

<?php $name = 'Peter Zhu'; echo $name, '<br>';

<!-- 命令行 -->

$ mkdir project $ cd project

pdo连接数据库的基本语法是: $pdo = new PDO(dsn,username, password),这也是推荐的方式

7.链接

[链接文本](href属性的url地址,title的提示信息)

链接文本

<a href="url" title="">php中文网</a> [php中文网](http://www.php.cn/, '国内最大的php学习平台') <!-- 如果想更精准的控制链接,请使用<a>标签 --> <a href="http://www.php.cn/" title="公益/实用/分享" target="_blank">

效果

<a href="url" title="">php中文网</a>

php中文网

<!-- 如果想更精准的控制链接,请使用<a>标签 -->

<a href="http://www.php.cn/" title="公益/实用/分享" target="_blank">

8.强调

1.语法:

  • 语法1: 被1个星号*或_包围的内容,会以斜体表示,转为< em >标签
  • 语法2: 被2个星号*或_包围的内容,会以粗体表示,转为< strong >标签

2.实战:

<!-- 注意: 使用下划线时,前后一定要添加空格,否则不能正确解析 -->

Markdown是一种可以使用 简单 的标记语法书写具有HTML的格式的 书写 工具

9.表格
  • 表格是数据格式化的重要工具,Markdown是使用减号-和竖线|画出表格的
  • 表格中的数据对齐方式是使用冒号(:)控制的

|id|name|age|sex|salary| -|-|:-:|-|-: |1|Peter|28|male|3900| |2|Zhu|38|male|9900| |3|Lee|32|female|6700|

<!-- 表格由thead表头和tbody表格主体二部分组成,默认自带样式且不可改变 -->

<!-- 表头与主体的分隔区的橫线,即减号,数量并不限制,多个也行,但至少要有一个即可 -->

<!-- 单元格内容默认为左对齐,只需要改变冒号的位置就可以实现对齐方式的改变 -->

效果

id

name

age

sex

salary

1

Peter

28

male

3900

2

Zhu

38

male

9900

3

Lee

32

female

6700

10.图片
  • 图片的语法与链接非常相似,只需要在前面添加一个!叹号即可
  • ![提示文本](图片地址/url 'title提示')

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(14)

<!-- 文本:可爱的狗狗,当图片被禁止或者不能显示的时候会显示 -->

<!-- 图片是不是有点太大了,很遗憾,Markdown不支持调整图片大小,请用img标签调整 -->

<img src="dog.jpg" width="200">

<!-- 更多时候,你可能想给图片加一个链接,很简单,只需要将链接文本换成图片即可 -->

<!-- 第一步: 创建链接 -->

<!-- [](http://www.php.cn "php中文网") -->

<!-- 第二步:将图片插入到链接文本中 -->

vscode 常用命令插件 vscode和必备插件的使用及其写作语法简介(15)

段落与换行总结
  • 段落对应生成html中的p标签
  • 多个段落之间一定要添加空行,否则不能识别
  • 段内换行,直接回车只会产生一个空格并不会产生换行
  • 如果要段内换行,必须在回车前敲入2个或以上的空格
  • 你可能猜到了,换行使用的br标签

更多语法,可以参考官方文档:

https://markdown-zh.readthedocs.io/en/latest/

常用的markdown工具推荐

mac平台:Ulysses、BearWindows:typora、Cmd Markdown、小书匠互联网平台:CSDN、简书、印象笔记、有道云笔记、掘金等这里推荐我常用markdown工具—typora,支持Windows/macOS,界面简洁优雅,内容所见即所得,最重要的是它完全免费。

下载地址:https://typora.io

TyporaWindows平台常用快捷键

Ctrl 1 一阶标题 Ctrl 2 二阶标题 Ctrl 3 三阶标题 Ctrl 4 四阶标题 Ctrl 5 五阶标题 Ctrl 6 六阶标题 Ctrl B 字体加粗(Blod) Ctrl I 字体倾斜(Italic) Ctrl U 下划线(Underline) Ctrl Z 撤销 Ctrl T 创建表格(Table) Ctrl L 选中某句话 Ctrl K 创建超链接 Ctrl D 选中某个单词 Ctrl F 搜索(Find) Ctrl H 搜索并替换 Ctrl \ 清楚样式 Ctrl E 选中相同格式的文字 Ctrl Home 返回Typora顶部 Ctrl End 返回Typora底部 Alt Shift 5 删除线 Ctrl Shift I 插入图片(Image) Ctrl Shift M 公式块 Ctrl Shift K 代码块 Ctrl Shift Q 引用(Quote)

,