前言

  嗨,大家好,近期有个基于VUE.js的前端的项目,在Idea中开发比较卡。所以就在本地的Windows环境中的电脑安装了VS Code。详细过程记录下来,供大家参考。

VS Code介绍

  VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VS Code官网
  • VScode 官网地址: https://code.visualstudio.com/
  • VScode 官方文档地址: https://code.visualstudio.com/docs
      我们可以直接在VScode 官网首页下载,目前VScode 支持的系统有Windows、Linux、macOS,大家可以根据自己需要选择对应的系统下载。当然小编也直接为大家准备好了下载地址,直接点击下方链接即可下载。

VScode 官方下载地址:https://code.visualstudio.com/download

VS Code特点
  • 具有基础包括语法高亮、智能补全、集成 git 和编辑器内置调试工具等,将使你开发更高效。
  • 直接从编辑器调试代码。启动或附加到正在运行的应用,并使用断点、调用堆栈和交互式控制台进行调试。
  • 可自由扩展,安装扩展以添加新的语言、主题、调试器以及连接到其他服务。扩展程序在单独的进程中运行,确保它们不会降低编辑器的速度。
  • 支持多语言、基本上常用的React,Angular、Vue、Node、JavaScript、Python、Java、Markdown、TypeScript、C/C++、JSON、Powershell、HTML/CSS、C#、PHP、YAML等语言都支持。
      基于VS Code的这些特点,使得VS Code越来越成为受欢迎的开发工具。

快速开始

下载

  我们在官方下载页下载即可,由于本次是基于Windows系统安装VS Code,所以我下载的是Windows版本的,下载完成之后如下图,文件不是很大,不到80M。

图片.png

安装

  双击下载完成的文件,点击同意协议,点击下一步
图片.png
  选择默认的就可以,继续点击下一步,

图片.png
  点击开始安装,选择安装路径,也可以直接使用默认的:
图片.png
  等待安装完成之后,打开初始化页面如下:

图片.png
  界面简单介绍:VScode 启动后的界面,在左边菜单栏依次是文件管理、搜索、版本控制、DEBUG调试、扩展安装、用户、设置等。上方一行的菜单都是中文,大家根据字面意思即可理解。大家可以直接打开项目或者直接从仓库中拉取代码即可。

插件安装

vetur
  vetur插件是VS Code的官方Vue js扩展。Vetur一直致力于辅助Vue js开发更轻松。它具有错误检查功效,代码自动完成功效,而且还支持提供代码段。 作为使用VS Code进行前端开发,这个插件必不可少。

图片.png
  装好vetur插件后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置。点击“在settings.json中编辑”,进入代码编辑界面。加入如下配置。
图片.png

{
    "emmet.syntaxProfiles": {
           "vue-html": "html",
           "vue": "html"
       },
}

图片.png

ESlint

  esESlintlint是一款智能错误检测插件。它可以协助我们在具体开发中及时的帮我们发现错误,减少不比较的BUG,是我们开发中的小帮手。直接在插件扩展窗口输入ESlint点击安装插件即可,装好后也需要进行配置,在同vetur插件一样的地方进行配置。

图片.png

{
   "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

    "eslint.options": {
        "plugins":["html"]
    }
}

Auto Close Tag
  Auto Close Tag能够自动闭合HTML/XML标签,提升开发效率。
图片.png

导入项目

  将VS Code 初始化完成之后就可以导入我们VUE项目了。本次直接导入了AMDIN项目。如下:

图片.png
  在控制台终端输入npm install添加包项目所需要的依赖

npm install

图片.png
  当执行完依赖安装之后执行npm run dev 启动成功,在浏览器中输入相关ip和端口即可访问项目啦!

npm run dev

图片.png

结语

  好了,以上就是在Windows中初次安装VS Code详细过程及初始化的过程,感谢您的阅读,希望您喜欢,如对您有帮助,欢迎点赞收藏。如有不足之处,欢迎评论指正。下次见。

  作者介绍:【小阿杰】一个爱鼓捣的程序猿,JAVA开发者和爱好者。公众号【Java全栈架构师】,欢迎关注阅读交流。

Logo

前往低代码交流专区

更多推荐