开发环境vscode和插件安装及markdown知识学习
16lz
2022-03-19
一、下载安装vscode
1.下载地址：https://code.visualstudio.com
2.安装vscode和插件
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | chinese(simplified ...) | 简体中文语言包 |
| 2 | live server | html 实时预览 |
| 3 | prettier-code formatter | 最流行的代码格式化插件 |
| 4 | better comments | 自定义注释颜色 |
| 5 | path intellisense | 路径自动感知填充 |
| 6 | helium icon theme | 一款我喜欢的文件图标主题 |
| 7 | one dark pro | 经典的主题,使用者众多,很耐看 |
| 8 | material theme | 经典”材料”主题 |
| 9 | material theme icons | 常与material theme配置的文件图标 |
| 10 | shades of purple | 赛博朋克风格的一款主题,很明亮风骚 |
| 11 | dracula official | 经典的吸血鬼主题 |
| 12 | dracula at night | 个人更喜欢这款小众的吸血鬼暗黑版(教学用它) |
| 13 | code runner | 几乎可以快速运行常见的所有语言,如php,java,js... |
| 14 | codesnap | 快速生成苹果电脑风格的代码片断截图,分享时使用 |
markdown
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | markdown preview... | markdown 实时预览 |
| 2 | markdownlint | markdown 语法检查器 |
html / css
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | auto close tag | 标签自动关闭 |
| 2 | auto rename tag | 标签自动更名 |
| 3 | indent-rainbow | 以不同颜色显示代码缩进 |
| 4 | css peek | 查看并跳转到 css 定义位置 |
| 5 | html css support | css 自动智能补齐 |
| 6 | intellsense for css ... | html 中的 css 智能提示 |
| 7 | easy less | less 实时编译 |
| 8 | px-to-viewport | px 自动转 vw |
| 9 | svg preview | svg 预览器 |
| 10 | tailwind css ... | 无需离开 html 就可快速构建出现代网页 |
| 11 | tabout | 按 tab 就可快速跳到下一下,或跳出/越过括号等 |
js / es6 / node / vue
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | bracket pair ... | 括号高亮配对提示 |
| 2 | javascript(es6) code snippets | 常用 js 代码片断 |
| 3 | node-snippets | 常用 node 代码片断 |
| 4 | quokka.js | js/es6 代码语法实时检查/执行器(续命法宝) |
| 5 | rest client | 可不离开 vscode 环境进行 api 请求测试 |
| 6 | eslint | js 代码质量智能分析器 |
| 7 | vetur | vue 语法高亮,智能感知,emmet 等 |
| 8 | vue3 snippets | vue3 常用代码片断 |
| 9 | vue-helper: vue-helper | 在扩展中使用的 vue 提示,如 element ui |
php
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | php intelephense | php 语法提示/自动补齐 |
| 2 | php intellisense | php 代码跟踪/重构/自动完成 |
| 3 | php debug | php 代码调试器 |
| 4 | php docbloker | php 生成块级注释 |
| 5 | vscode-database | vscode 数据库 SQL 支持插件 |
二、markdown语法
1.标题
# level 1 headline 一级标题## level 2 headline 二级标题### level 3 headline 三级标题
2.列表
2.1 无序列表
- item1
- item2
2.1 subitem
2.2 subitem2.23.代码
- 单行代码(英文状态前后各1个反引号)：
这里是单行代码 - 多行代码（英文状态前后各3个反引号）：
namespace core;class Demo{//这里是php代码,前面反引号后面写上语言提示高亮}
4. 表格
| id | 插件名称 | 用途 |
|---|---|---|
| 1 | Markdown Preview Enhanced | 预览Markdown文档 |
| 2 | markdownlint | 语法检查器 |
4.图片
语法：![图片说明]（图片URL）
5.链接
第 19 期: https://www.zaikun.cn/
三、编程字体
| 字体名称 | 描述 | 支持连写 |
|---|---|---|
| Fira Code | 喜欢的真喜欢 | 支持 |
| JetBrains Mono | JetBrains 出品,免费 | 支持 |
字体安装成功后,还需要在 vscode 中进行配置: settings.json
# 将Fira Code 字体放在第一个"editor.fontFamily": "'Fira Code',Consoles, 'Courier New', monospace",# 打开允许连写开关"editor.fontLigatures": true,
更多相关文章
- android 拖动图片移动效果
- 记录代码合并时产生的bug
- Android(安卓)用源代码写layout布局
- android图片拖动
- android实现自动关机代码
- SHA 的实现
- Android(安卓)Media Recorder录音播放源代码
- Android(安卓)GL_OUT_OF_MEMORY
- Android动态改变TextView字体颜色