我用 VSCode 写博客编代码
VSCode（Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。VScode 的扩展功能非常强大，我们可以找到几乎所有开发需要的工具。我用他编辑 Markdown 、php 、html 等，甚至用它集成的终端来完成一些 git 和 linux 命令。总之，自从用上它之后，我就不再安装其他简易编辑器了。
一、VSCode 基础配置
1. 安装中文包
VSCode 安装后默认是英文界面，可以在扩展栏搜索 'chinese’ 找到并安装 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ，重启程序就是汉化界面了。
2. 几个重要的快捷键（因为常常用到，所以牢记）
- 打开命令面板 :
ctrl + shift + p - 打开设置面板 :
ctrl + , - 格式化文档 :
ctrl + alt + i - 快速生成和取消行注释 :
ctrl + / - 快速生成和取消块注释 :
ctrl + shift + a
如何查询可用的快捷键？首先按 ctrl + k ，松下按键后再按 ctrl + s，可以查看常用快捷键。或者点击左下方的齿轮，选择“键盘快捷方式”查看。
二、使用 Markdown 写博客
1. Markdown All in One : Markdown功能包
可以理解为吧，必备扩展，可以支持 Markdown 所需的一切功能（键盘快捷键、目录、自动预览等）。通常的使用方法是: 输入组合键 ctrl + shift + p 调出命令面板，输入 markdown ，找到并选择对应的功能即可实现相应的操作。当然也提供了一些快捷键。
1) 创建目录
ctrl + shift + p 调出命令面板，输入 markdown ，找到并选择“创建目录”即可。
2) 快捷键
| key | command |
|---|---|
| ctrl + b | 字体加粗 |
| ctrl + i | 斜体 |
| ctrl + shift + [ | 下一级标题 |
| ctrl + shift + ] | 上一级标题 |
| ctrl + m | 数学公式 |
| alt + s | 删除线 |
3) 预览
ctrl + k v : 打开侧边栏预览（先按 ctrl+k 松开按键再按v）
ctrl + shift + v : 打开预览
4) 数学公式
数学公式以 $ 开头和结尾，例如: $x = a^2$ 的预览效果是: x = a 2 x = a^2 x=a2
如果需要独占一行的话，则以 $$ 开头和结尾。 例如 $$x = a^2$$ 的预览效果是:
x = a 2 x = a^2 x=a2
2. word count : 字数统计
微软自己开发的统计和在下方状态栏内显示 Markdown 字数的小扩展，方便统计字数。
3. Code Spell Check : 代码拼写检查
它可以检查你的代码，对于它认为可能有错误的代码会以淡蓝色波浪线显示，并提供修复的建议。
你也可以修改波浪线的风格。比如修改波浪线的颜色: 点击右下角齿轮-设置-搜索“Color Custom”-在外观所对应的settings.json中编辑，进入编辑器中，添加
"editorInfo.foreground": "#ff0000"即可将波浪线设置成红色。
{
"workbench.colorTheme": "Default Light+",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"git.confirmSync": false,
"workbench.colorCustomizations": {
"editorInfo.foreground": "#ff0000"
}
}
VSCode 也许不能识别某些你认为对的单词，并且也显示单词错误。你可以将这些词添加到“用户设置”中来避免提示报错的波浪线。大概有下面几种方法:
- 点击报错单词处的小灯泡，将其添加到 ‘User Settings’
- 右键报错单词后移动到Spelling选项，将其添加到 ‘User Settings’
- 在单词处悬停，在弹出框中选快速修复，将其添加到 ‘User Settings’
- 点击单词，输入快捷键 ‘ctrl + .’，将其添加到 ‘User Settings’
4. markdown lint : markdown 语法检查器
三、我用 VSCode 编辑网页代码
编写网页代码使用了html,css,php等语言，也需要安装相应的扩展。
1. html 扩展
html css support : 提供很好的 HTML 和 CSS 支持。
auto rename tag : 标签自动更名,比如修改第一个标签，最后的那个标签也会自动修改。
view-in-browser : 在浏览器中预览 html，安装后，在html编辑界面右键，选择 view in other browsers，选择对应浏览器即可。
live server : 会自动生成一个独立端口的虚拟网站服务器，并进行 html 的实时预览。
2. php 扩展
php intelephense : php 代码跟踪，具有代码格式化、语法提示、自动补齐等功能
3. JavaScript 扩展
Prettier : 非常有用的扩展，具有格式化或者美化 JavaScript、TypeScript、CSS 代码的功能。
4. 快速插入html初始页面的代码
输入 ! (英文)，然后按 tab 健，即可快速生成类似如下的 html 初始页面代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>