IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> vs code开发Vue2项目的配置参考 -> 正文阅读

[开发工具]vs code开发Vue2项目的配置参考

安装必要插件

Vetur/Volar

Vetur是vue2语法高亮、智能感知、Emmet等,可以实现组件高亮,在vue3项目中需要禁用
在这里插入图片描述
Volar是vue3语法高亮、智能感知、Emmet等,可以实现组件高亮,在vue2项目中需要禁用

Vue Peek

转到定义

vue-helper

在vue单?件??按ctrl点击鼠标打开定义的文件

ESLint

js代码的质量检查

Prettier

约束代码风格

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

修改标签时自动重命名配对的HTML / XML标签

CSS Navigation

按Ctrl+鼠标点击即可跳转到class对应的css样式区域

Local History

本地代码的修改记录,以跟当前版本进行对比

Git History

右键单击文件选择 Git:View File History来以列表的形式查看所有的提交记录。

GitLens — Git supercharged

可以看到每一行代码的上一次 git提交的记录

koroFileHeader

自动添加头部注释和 函数注释的插件。如自定义内容需要在 settings.json中进行自定义配置。

  // koroFileHeader 插件配置
  "fileheader.configObj": {
    "autoAdd": false, // 自动添加头部注释开启才能自动添加
    "autoAlready": false, // 默认开启, 只给支持的语言添加注释
    "createHeader": false, // 新建文件不自动添加注释
    "prohibitAutoAdd": ["json", "md"], // 禁?.json .md?件,?动添加头部注释
  },
  // koroFileHeader插件 文件头注释
  "fileheader.customMade": {
    "Author": "Lily",// 设置后作者
    "Date": "Do not edit",
    "LastEditors": "Lily",
    "LastEditTime": "Do not edit",
    "Description":""
  },
  // koroFileHeader插件 函数注释
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  }

vs code与项目有关的配置文件保存在.vscode文件夹中

Path Intellisense

自动路劲补全

Code Runner

Postcode

类似Postman 的接口测试插件
在这里插入图片描述

Markdown All in One

最常用的Markdown优化

Image Preview

预览图片

SVG

是一款强大的SVG语言支持扩展,能处理SVG所需的几乎所有功能:SVG编码、压缩、美化、预览多合一。

更多详细

别名路径跳转

settings.json中进行自定义配置自己常用的别名路径

Lodash

lodash 函数提示

配置ESLint和Prettier

Vue项目中配置ESLint和Prettier

配置Vue模板

file->preferences->user-snippets,弹出输入框输入vue.json ,也可以选择具体的项目添加模板,复制以下内容

{
  "Vue template": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "  <div>$TM_FILENAME_BASE</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  components: {},",
      "  props: {},",
      "  data() {",
      "    return {}",
      "  },",
      "  watch: {},",
      "  computed: {},",
      "  methods: {},",
      "  created() {},",
      "  mounted() {}",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "A vue file template"
  }
}

运行和调试配置

vscode创建的工程.vscode文件夹下,添加launch.json,是针对调试(debug)和启动(run)的配置项。
在这里插入图片描述

vs code 中已经提供了很多配置项,添加后略作修改即可

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "npm run serve",
      "name": "Run frontend",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Git配置

  • 在用户的settings.json中添加配置,指向git安装路径
    在这里插入图片描述
  • 在终端添加远程存储库
  • 在源代码管理中进行git 操作
    在这里插入图片描述
  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-05-25 11:41:27  更:2022-05-25 11:41:47 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:58:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码