vs code 基础设置和插件

基础设置

安装完vs code后要重启 才能在命令行 code . 启动当前目录

汉化

• shift+ctrl+p 搜索插件
• 输入 Configure Display Language 回车 在左边可以看到需要的插件，点击install，然后立即重启

缩小放大 查看-外观 ctrl+ ctrl-

打开终端是shell查找后，再点击powershell，再点击左下角的三角号

image.png

打开多个项目

• 文件-首选项-设置-窗口-新建窗口-Open Folders In New Window>>on

vue代码高亮

• 点击左侧的扩展图标，输入vue，选择vetur

  
  
  image.png

vue2代码片段补全工具

• vue 2 snippets

超多功能vue-helper

• element组件悬浮时查看文档
• 自动导入js文件
  template写书写自定义组件名时（暂时不行）
  script写import 文件名
• js html snippet自动补齐vue代码、element和view代码
  v el- iv-
• 路由跳转文件（暂时不行）
  一般有@存在导致没法正常跳转
  设置"vue-helper.alias": {
  "@": "."
  }
• px转换为rem
  设置vue-help的rem转换值
  命令面板输入px 选择px-rem
• 快捷键
  alt+x 扩大块级选择区域
  ctrl+左键跳到 变量 函数 组件（自定义 element view vux）定义位置

alt+上下 移动代码

ctrl+d会找到所有相同的

本地web服务器

安装live-server
热重载 html文件右键打开 open with live-server

npm install -g live-server
启动命令 live-sever 默认是8080
启动多个端口 live-server --port=8081

image.png

断点调试vue项目

• 安装debugger for chrome
• 左侧菜单点击甲壳虫，自动s生成.vscode目录的launch.json文件
  参考下面的内容相应更改 注意url设置端口

"version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8082/#/",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]

• 在项目文件左侧行号点击断点，配置完成后就可以按F5刷新，自动弹出新的浏览器，打开开发者工具

  
  
  image.png

• 找到触发断点的页面和事件，触发后就可以到开发者工具sources看到了
  [图片上传中...(image.png-6e83d8-1611825468957-0)]

vscode右侧浏览器

• 安装browser preview

• 在左侧菜单栏生成浏览器图标，直接点击，就会生成

  
  
  image.png

启用Emmet

• emmet.triggerExpansionOnTab设置为true值 首选项-设置

  
  
  image.png

• 语法

  E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素

修改左侧栏的大小，其实改放大系数比较好，再把编辑区的字体改小

image.png

格式化文档便于代码折叠和查找

image.png

插件推荐

material icon theme

• 给所有的类型文件配置icon图标

material theme

• 安装颜色主题
• 选择matertial highContrast

• 左下角有一个设置的按钮

  
  
  image.png

Horla Light Them 浅色主题，非常好

prettier

• 在保存时就会自动格式化
• 按ctrl+， 或者还是找到设置图标

• 输入format on save

  
  
  image.png

Bracket Pair colorizer

• 对{}()进行颜色对，快递找到函数作用域

indent-rainbow

• 对缩进的区域着色，快速找到对应区域的代码

better comments 注释颜色标记

auto rename tag

• 修改标签的头部，尾部对应会改掉

Auto Close Tag 自动生成关闭标签

rest client

• 扩展工具允许你发送 HTTP 请求并直接在 VSCode 中查看响应

cost 引入npm包的大小

css peek 快速查看CSS定义

GitLens 代码git提交信息显示

html css support

• 配合emmert语法写，div.n就有提示了
• 不配合则要生成div时，注意先光标移动再写类名才有提示

Live Sass Compiler scss转成兼容的css

Markdown Preview Enhanced md预览插件

• 配置

  "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css"
        }
    ],
    "liveSassCompile.settings.generateMap": false,

• 点击下方的 打开或者关闭watch sass

  
  
  image.png

image.png

装本地插件

扩展区，有三个点号

image.png

code runner

• 可以直接在编辑器中运行代码

PHP Intelephense

• 代码提示工具，支付代码提示、查找定义、类搜索等功能，非常强大

php debug

php关联XDEBUG 的调试工具

xdebug.remote_enable = 1
xdebug.remote_autostart=1
zend_extension="D:\D\phpStudy\php55\ext\xdebug.dll"

PHP DocBlocker

php注释插件，在方法上面输入 //（两个斜杠） 按回车，即可输入注释代码块，非常方便，效率很高。

php 调试要先启动查看-调试出现甲虫(或者最左边右键调试与运行)，点击launch.json自动配，然后点击三角形运行

手动下载的插件安装

• 在vscode内暂时没法install下载的，可以点击手动下载

• 手动下载完成后， 点击扩展区域的...，然后点vsix安装，找到你下载好的插件

  
  
  image.png

更改默认快捷键

image.png

Autoprefixer自动补前缀 只适合单文件css，不能用于vue的模板文件

image.png

image.png

自动保存

• 设置--auto save--onFocusChange

  
  
  image.png

进入settings.json

• 左下角设置按钮 - 设置

  
  
  image.png

支持css文件嵌套不报错

• settings.json文件下加入以下内容

   "files.associations": {
        "*.css": "less"
    }