Vs Code配置前端环境及运行详细指南
更新时间：2023年10月19日 16:18:50 作者：西蒙长歌笑
相信越来越多的前端开发者已经迁移到VSCode阵营了,下面这篇文章主要给大家介绍了关于Vs Code配置前端环境及运行的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
Vs Code环境配置
下载Vs Code
进入官网点击-> Download for Windows，即可下载；如果是苹果或Linux操作系统，点击-> Download for Windows的箭头就可以选择对应的版本。或者直接在电脑管家的软件管理下载都可。
安装Node
建议安装16.18稳定版
测试是否安装成功：
- node -v 查看node的版本
- npm -v 查看npm的版本(新版的node安装自带安装npm)
win+R，输入cmd，进入命令提示窗。
查看到版本号，则安装成功。
安装npm
打开Vs Code，点击->拓展，在搜索栏里搜索npm。
安装下图的插件即可，我这里已经安装好了。
安装Live Server
依然是在拓展里搜索Live Server，然后安装。
运行前端程序
点击-> 文件 ->打开文件夹，选择代码存放的文件夹打开。
点击-> 终端 ->新建终端
安装依赖
npm install
建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
启动服务
npm run dev
其他插件
- Debugger for Chrome, Ayu(主题扩展)
- Beautify(美化代码)
- Chinese (Simplified) (简体中文)
- Code Runner(单独运行某段代码)
- Code Spell Checker(源代码拼写检查)
- Easy LESS(自动将less编译为css)
- HTML CSS Support(用于css的智能感知)
- mage preview(预览图片)
- indent-rainbow(使缩进更容易阅读)
- JS & CSS Minifier (Minify)(缩小化JS和CSS)
- Material Icon Theme(图标主题)
- open in browser(浏览器打开文件)
- Prettier - Code formatter(代码格式化)
- Rainbow Brackets(彩虹括号)
- stylus(一种预处理器), Vetur(vue工具)
- vscode-icons(文件图标)
- vue(语法突出显示)
- ue 3 Snippets(代码片段扩展),
- vue-beautify(美化vue代码)
- vue-helper(vue增强)
总结
到此这篇关于Vs Code配置前端环境及运行的文章就介绍到这了,更多相关VsCode配置前端运行环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
今天小编就为大家分享一篇关于解决Fiddler在win7系统下的安全证书问题，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
本描述详细解释了使用Git同步远程最新代码的方法,包括`git fetch --all-inch`、`git reset----hard origin//名`和`git pull`命令的使用场景与注意事项,确保开发者能够准确同步远程代码而保护本地修改2026-05-05
FlippingBook是一款收费的图书翻页效果的flash播放器,这里为大家介绍下FlippingBook的使用方法,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了Git中常用的6种撤消更改的方法,包括git amend、git reset、git rebase、git revert和git checkout等,通过这些命令,可以方便地处理项目代码管理中的错误操作或需求变更,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了VSCode的使用配置以及VSCode插件的安装教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了linux部署apache服务的步骤,部署apache服务的步骤本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2018-02-02
教你使用Typora + 阿里云OSS + PicGo 搭建私人图床(最新)
这篇文章主要介绍了教你使用Typora + 阿里云OSS + PicGo 搭建私人图床,我这里使用的是阿里云对象存储OSS，你可以使用腾讯、七牛云对象存储等皆可，需要的朋友可以参考下2022-04-04
大家都明白在团队开发中，遵循一个合理、清晰的Git使用流程，是非常重要的。否则，每个人都提交一堆杂乱无章的commit，项目很快就会变得难以协调和维护。所以这篇文章给大家分享了Git的使用规范流程，有需要的可以参考借鉴。2016-09-09
这篇文章主要为大家介绍了pycharm中venv文件夹自定义处理方式图解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
将Git存储库克隆到本地IntelliJ IDEA项目中的详细教程
这篇文章主要介绍了将Git存储库克隆到本地IntelliJ IDEA项目中的详细教程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
最新评论