Vs?Code配置前端環(huán)境及運(yùn)行詳細(xì)指南
更新時間：2023年10月19日 16:18:50 作者：西蒙長歌笑
相信越來越多的前端開發(fā)者已經(jīng)遷移到VSCode陣營了,下面這篇文章主要給大家介紹了關(guān)于Vs?Code配置前端環(huán)境及運(yùn)行的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
Vs Code環(huán)境配置
下載Vs Code
鏈接：官網(wǎng)地址 或者 點(diǎn)擊這里 下載最新版本
進(jìn)入官網(wǎng)點(diǎn)擊-> Download for Windows，即可下載；如果是蘋果或Linux操作系統(tǒng)，點(diǎn)擊-> Download for Windows的箭頭就可以選擇對應(yīng)的版本。或者直接在電腦管家的軟件管理下載都可。
安裝Node
鏈接：官網(wǎng)地址 或者 點(diǎn)擊這里 直接下載
建議安裝16.18穩(wěn)定版
測試是否安裝成功：
- node -v 查看node的版本
- npm -v 查看npm的版本(新版的node安裝自帶安裝npm)
win+R，輸入cmd，進(jìn)入命令提示窗。
查看到版本號，則安裝成功。
安裝npm
打開Vs Code，點(diǎn)擊->拓展，在搜索欄里搜索npm。
安裝下圖的插件即可，我這里已經(jīng)安裝好了。
安裝Live Server
依然是在拓展里搜索Live Server，然后安裝。
運(yùn)行前端程序
點(diǎn)擊-> 文件 ->打開文件夾，選擇代碼存放的文件夾打開。
點(diǎn)擊-> 終端 ->新建終端
安裝依賴
npm install
建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug?？梢酝ㄟ^如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npmmirror.com
啟動服務(wù)
npm run dev
其他插件
- Debugger for Chrome, Ayu(主題擴(kuò)展)
- Beautify(美化代碼)
- Chinese (Simplified) (簡體中文)
- Code Runner(單獨(dú)運(yùn)行某段代碼)
- Code Spell Checker(源代碼拼寫檢查)
- Easy LESS(自動將less編譯為css)
- HTML CSS Support(用于css的智能感知)
- mage preview(預(yù)覽圖片)
- indent-rainbow(使縮進(jìn)更容易閱讀)
- JS & CSS Minifier (Minify)(縮小化JS和CSS)
- Material Icon Theme(圖標(biāo)主題)
- open in browser(瀏覽器打開文件)
- Prettier - Code formatter(代碼格式化)
- Rainbow Brackets(彩虹括號)
- stylus(一種預(yù)處理器), Vetur(vue工具)
- vscode-icons(文件圖標(biāo))
- vue(語法突出顯示)
- ue 3 Snippets(代碼片段擴(kuò)展),
- vue-beautify(美化vue代碼)
- vue-helper(vue增強(qiáng))
總結(jié)
到此這篇關(guān)于Vs Code配置前端環(huán)境及運(yùn)行的文章就介紹到這了,更多相關(guān)VsCode配置前端運(yùn)行環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
解決Fiddler在win7系統(tǒng)下的安全證書問題
今天小編就為大家分享一篇關(guān)于解決Fiddler在win7系統(tǒng)下的安全證書問題，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
本描述詳細(xì)解釋了使用Git同步遠(yuǎn)程最新代碼的方法,包括`git fetch --all-inch`、`git reset----hard origin//名`和`git pull`命令的使用場景與注意事項(xiàng),確保開發(fā)者能夠準(zhǔn)確同步遠(yuǎn)程代碼而保護(hù)本地修改2026-05-05
FlippingBook是一款收費(fèi)的圖書翻頁效果的flash播放器,這里為大家介紹下FlippingBook的使用方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了Git中常用的6種撤消更改的方法,包括git?amend、git?reset、git?rebase、git?revert和git?checkout等,通過這些命令,可以方便地處理項(xiàng)目代碼管理中的錯誤操作或需求變更,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了VSCode的使用配置以及VSCode插件的安裝教程詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了linux部署apache服務(wù)的步驟,部署apache服務(wù)的步驟本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2018-02-02
教你使用Typora?+?阿里云OSS?+?PicGo?搭建私人圖床(最新)
這篇文章主要介紹了教你使用Typora?+?阿里云OSS?+?PicGo?搭建私人圖床,我這里使用的是阿里云對象存儲OSS，你可以使用騰訊、七牛云對象存儲等皆可，需要的朋友可以參考下2022-04-04
大家都明白在團(tuán)隊(duì)開發(fā)中，遵循一個合理、清晰的Git使用流程，是非常重要的。否則，每個人都提交一堆雜亂無章的commit，項(xiàng)目很快就會變得難以協(xié)調(diào)和維護(hù)。所以這篇文章給大家分享了Git的使用規(guī)范流程，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家介紹了pycharm中venv文件夾自定義處理方式圖解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
將Git存儲庫克隆到本地IntelliJ IDEA項(xiàng)目中的詳細(xì)教程
這篇文章主要介紹了將Git存儲庫克隆到本地IntelliJ IDEA項(xiàng)目中的詳細(xì)教程,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10