VSCode常用插件及Markdown常用语法

文章目录

  • 前言
  • VSCode常用插件:
    • 1.汉化包
    • 2.编辑器美化
    • 3.翻译
    • 4.浏览及预览
    • 5.Auto Close Tag和Auto Rename Tag
    • 6.代码提示
    • 7.代码美化
    • 8.Git
    • 9.Debug
    • 10.补充(06-19)
  • 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 } f(x, y) = x^2 + y^2, x \epsilon [0, 100], y \epsilon \{1,2,3\} f(x,y)=x2+y2,xϵ[0,100],yϵ{1,2,3}

S n = ∑ k = 1 n k π = 1 π + 2 π + ⋯ + n π = n ( n + 1 ) 2 π Sn=\sum_{k=1}^n{k \over \pi}={1\over \pi}+{2 \over \pi}+\cdots+{n \over \pi}={n(n+1) \over 2\pi} Sn=k=1nπk=π1+π2++πn=2πn(n+1)

∫ 1 + sin ⁡ x 1 + cos ⁡ x e x d x \int {1+ \sin x \over 1+ \cos x}e^xdx 1+cosx1+sinxexdx

  • 行内公式:$$
    求数列极限 lim ⁡ n → + ∞ ( sin ⁡ ( n + 1 ) − sin ⁡ ( n ) ) \lim_{n\rightarrow+\infty}\left(\sqrt{\sin(n+1)}-\sqrt{\sin(n)}\right) limn+(sin(n+1) sin(n) )

表格

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

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

你可能感兴趣的:(vscode,html,编辑器,visual,studio,code,ide)