Vs Code環(huán)境配置

下載Vs Code

鏈接：官網(wǎng)地址 或者 點(diǎn)擊這里 下載最新版本

進(jìn)入官網(wǎng)點(diǎn)擊-> Download for Windows，即可下載；如果是蘋(píng)果或Linux操作系統(tǒng)，點(diǎn)擊-> Download for Windows的箭頭就可以選擇對(duì)應(yīng)的版本。或者直接在電腦管家的軟件管理下載都可。

安裝Node

鏈接：官網(wǎng)地址 或者 點(diǎn)擊這里 直接下載

建議安裝16.18穩(wěn)定版

測(cè)試是否安裝成功：

• node -v 查看node的版本
• npm -v 查看npm的版本(新版的node安裝自帶安裝npm)
  win+R，輸入cmd，進(jìn)入命令提示窗。

查看到版本號(hào)，則安裝成功。

安裝npm

打開(kāi)Vs Code，點(diǎn)擊->拓展，在搜索欄里搜索npm。

安裝下圖的插件即可，我這里已經(jīng)安裝好了。

安裝Live Server

依然是在拓展里搜索Live Server，然后安裝。

運(yùn)行前端程序

點(diǎn)擊-> 文件 ->打開(kāi)文件夾，選擇代碼存放的文件夾打開(kāi)。

點(diǎn)擊-> 終端 ->新建終端

安裝依賴

npm install

建議不要直接使用 cnpm 安裝依賴，會(huì)有各種詭異的 bug?？梢酝ㄟ^(guò)如下操作解決 npm 下載速度慢的問(wèn)題

npm install --registry=https://registry.npmmirror.com

啟動(dòng)服務(wù)

npm run dev

其他插件

• Debugger for Chrome, Ayu(主題擴(kuò)展)
• Beautify(美化代碼)
• Chinese (Simplified) (簡(jiǎn)體中文)
• Code Runner(單獨(dú)運(yùn)行某段代碼)
• Code Spell Checker(源代碼拼寫(xiě)檢查)
• Easy LESS(自動(dòng)將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(瀏覽器打開(kāi)文件)
• Prettier - Code formatter(代碼格式化)
• Rainbow Brackets(彩虹括號(hào))
• stylus(一種預(yù)處理器), Vetur(vue工具)
• vscode-icons(文件圖標(biāo))
• vue(語(yǔ)法突出顯示)
• 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論