Visual Studio Code 插件学习

移动端
将像素与rem相互转换，快捷键alt+z

1. px to rem
   插件右键 扩展设置（extensions setting） 中，设置（Number of pixels per 1rem）基础像素
   一般都设置100px转换1rem

测试部分

1. Live Server
   右键点击 项目中的html页面，会以服务器形式，5500端口打开页面

2. REST Client
   使用代码的方式，发起get post update delete等请求
   2-1. 创建一个mock文件：
   在项目根路径，创建test.http 文件
   【细节】

• 请求方式 空格 接口地址
• 接口与接口之间使用 ###分开
• 可以使用@定义变量，使用{{ }} 引入变量
• POST方式，需要定义文档类型，且数据与文档类型之间需要一个回车分隔开

2-2. 具体代码：

@uri = http://localhost:3001
###

GET {{uri}}/school
###

GET {{uri}}/school/5e3ff6101dd0db3568770a01
###

POST {{uri}}/school
Content-Type: application/json
{ "title":"周八" }

点击每个接口上的send Request 发送数据

3. open in browser
   页面可以直接右键 Open In Default Browser 在默认浏览器预览
   或，
   直接使用 Open In Other Browser 在下拉框内选择已经安装的浏览器预览

设置默认浏览器 -> 首次安装后，可以关闭VScode重启，在菜单->首选项内搜索 Open In Default Browser , 在输入框内输入你安装的浏览器名即可，如chrome

vue代码补全插件
1.Vetur

格式化工具
1.prettier-code formatter
使用方式：
ctrl+shift+P 命令面板 format document - 选择一种格式化方式，即可

格式化代码1.jpg

格式化代码2.jpg

css3 兼容后缀补充相关

1. Autoprefixer

• 配置：
  插件 - Autoprefixer - 设置 - 扩展设置 - 在settings.json中编辑

"autoprefixer.options": { 
    "browsers": [
        "ie >= 6",
        "firefox >= 8",
        "chrome >= 24",
        "Opera >= 10",
        "last 2 versions",
        "> 5%"
    ]
}

• 使用：
  F1弹出菜单，选择 Autoprefixer: Run