VSCode常用插件及Markdown常用语法

---

前言

  我之前一直用VSCode，最近想玩玩WebStorm。收费应用嘛，本着能用就行的宗旨，安装了2019.3.0.0版本。看了一些帖子，又装了几个反正别人说好用的插件，然后把自己之前写的文档拉进去观察体验了一番。
  不知道是不是环境的原因，html标签不写lang属性会警告；"utf-8"写成"uft-8"会直接乱码。这些文档都是刚学html那会儿拿VSCode写的，在VSCode里面显示都正常。不知道这算不算WebStorm对代码要求更严格、更规范？
  另外WebStorm插件库里没有简体中文包，拉了一个zh_CN.jar进去也只能汉化部分选项，不少还保留着英文，这我直接就接受全英文了呀。
  不过直接点击悬浮图标在对应浏览器打开文档这个功能，还有敲的快了在后面翻泡泡的效果倒是挺有意思的，我也不知道是怎么来的…开启IdeaVim之后键盘失灵又是为什么…
  写这个就是想试试这个富文本模式好不好使，顺便记一下我平时都用到了哪些VSCode插件。

---

VSCode常用插件：

1.汉化包

Chinese (Simplified) Language Pack for Visual Studio Code
中文扩展包，在Extensions里面搜索Chinese就可以安装，重启生效；
tip：可以通过Ctrl + Shift + P > Config Display Language > en改回英文

2.编辑器美化

主题色，搜theme就好了
主体图标：Material Icon Theme，vscode-icons

3.翻译

Google Translate：Ctrl + Shift + T 翻译选中内容
tip：可以设置Replace Text开启覆盖模式
Comment Translate：选中自动翻译
以及Easy Translator、翻译(英汉词典) 等等，搜索transl或者翻译，商店有很多

4.浏览及预览

open in browser：在默认浏览器打开
Live Server：在实时服务器中打开
Image Preview：图片缩略预览
Markdown Preview Enhanced：实时预览markdown

5.Auto Close Tag和Auto Rename Tag

自动闭合html/xml标签；自动同步修改另一侧标签

6.代码提示

HTML Snippets：html标签提示
Class autocomplete for HTML：class属性提示
HTML CSS Support：css到html类名及id提示
HTML to CSS autocompletion：css类名及id提示
CSS Peek：追踪到css样式 Ctrl + 左键
Icon fonts：图标字体提示
Path Intellisense：各种类型文件的路径识别提示
JavaScript(ES6) code snippets：ES6语法提示以及快速输入
jQuery Code Snippets：jQuery代码提示
ESLint：js语法纠错
markdownlint：markdown语法纠错
npm Intellisense：require 时的包提示
node-snippets：node智能代码片段
Vetur：vue文件美化、错误提示等
Vue VSCode Snippets：vue语法代码片段
Vue 3 Snippets：vue3代码片段
Simple React Snippets：react语法代码片段
React/Redux/react-router Snippets：React/Redux/react-router语法提示

7.代码美化

Beautify：格式化 html / css / js
Prettier：Alt + Shift + F（win）格式化
Bracket Pair Colorizer：括号上色，便于区分
indent-rainbow：缩进上色
Color Hightlight：css颜色值高亮显示
Better Comments：注释着色

8.Git

GitLens：方便查看git日志
Git History

9.Debug

Code Runner：代码执行器
Debugger for Chrome：映射vscode上的断点到chrome

10.补充（06-19）

Markdown All In One：基本满足markdown使用需求
Paste Image：复制网页图片链接直接粘贴图片到markdown
Extension Pack for Java：六合一Java扩展包（需要JDK 11以上支持），体验可能一般，建议还是以IntelliJ IDEA / Eclipse为主

---

Markdown常用语法

标题列表及字样

• 标题：若干个 # 引导
• 无序列表项：- / * / + 引导
• 有序列表项：数字加“. ”引导
• 加粗样式：前后双*或双_
• 斜体样式：前后单*或单_
• 删除线：前后双~

---

复选框（待办）及超链接

• 默认未选中：- [ ]
• 默认选中：- [x]

链接：[链接](http://foo.bar.baz/)

---

代码块

console.log('hlwd');
//格式：
//```javascript
//console.log('hlwd');
//```

---

公式

• 独行公式 ：$$$$
  $$f(x,y)=x^2+y^2,xϵ[0,100],yϵ\{1,2,3\}$$

$$Sn=\sum _{k=1}^n\frac{k}{\pi }=\frac{1}{\pi }+\frac{2}{\pi }+\cdots +\frac{n}{\pi }=\frac{n(n+1)}{2\pi }$$

$$\int \frac{1+\sin x}{1+\cos x}{e}^{x}dx$$

• 行内公式：$$
  求数列极限${\lim }_{n\to +\infty }\left(\sqrt{\sin (n+1)}-\sqrt{\sin (n)}\right)$。

---

表格

键	值
左对齐	|:- - -|（- 与 - 间无需空格，这里是为了可以看出是短横）
右对齐	|- - -: |（: 与 \ 间也无需空格，这里是为了防止解析成表情 ）
居中对齐	不言而喻

---

更多语法可以通过官方模板进一步熟悉，感谢您的过目！