基础设置
安装完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"
}
