vs code开发Vue2项目的配置参考

牧云流

已于 2022-06-11 11:30:59 修改

阅读量1k

点赞数

分类专栏： VUE 文章标签： vscode javascript git

于 2022-05-17 15:26:56 首次发布

本文链接：https://blog.csdn.net/dreamingbaobei3/article/details/124757151

版权

VUE 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

安装必要插件

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样式区域

Project Manager

本地项目管理

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}"
    }
  ]
}