在Windows中初次安装VS Code详细过程及初始化

最新推荐文章于 2024-08-07 14:58:00 发布

小阿杰

最新推荐文章于 2024-08-07 14:58:00 发布

阅读量3k

点赞数 45

分类专栏：随笔一记文章标签： windows vscode 前端

本文链接：https://blog.csdn.net/hijie/article/details/122659398

版权

随笔一记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

嗨，大家好，近期有个基于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
界面简单介绍：VScode 启动后的界面，在左边菜单栏依次是文件管理、搜索、版本控制、DEBUG调试、扩展安装、用户、设置等。上方一行的菜单都是中文，大家根据字面意思即可理解。大家可以直接打开项目或者直接从仓库中拉取代码即可。

插件安装

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

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

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

图片.png

ESlint

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

图片.png

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

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