当前位置: 代码网 > it编程>编程语言>其他编程 > Vs Code配置前端环境及运行详细指南

Vs Code配置前端环境及运行详细指南

2024年05月18日 其他编程 我要评论
vs code环境配置下载vs code链接:官网地址或者下载最新版本进入官网点击-> download for windows,即可下载;如果是苹果或linux操作系统,点击-> dow

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配置前端运行环境内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com