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
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吉尔维王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值