小編給大家分享一下開(kāi)發(fā)vue項(xiàng)目必須要裝的vscode插件有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了崇義免費(fèi)建站歡迎大家使用！

開(kāi)發(fā)vue項(xiàng)目的一些vscode必備插件

1. Eslint
   檢查代碼是否符合規(guī)范

2. GitLens ?
   Git提示

3. language-stylus ?
   stylus語(yǔ)法支持

4. Path Intellisense ?
   相對(duì)、絕對(duì)路徑提示

5. Prettier formatter ?
   代碼格式化

6. Vetur ?
   Vue語(yǔ)法支持。包括語(yǔ)法高亮、語(yǔ)法代碼提示、語(yǔ)法lint檢測(cè)等

7. Vue VSCode Snippets
   Vue 語(yǔ)法片段擴(kuò)展

8. npm Intellisense ?
   import、require npm模塊是自動(dòng)補(bǔ)全

9. Auto Close Tag
   自動(dòng)閉合HTML/XML標(biāo)簽

10. Auto Rename Tag
    自動(dòng)完成另一側(cè)標(biāo)簽的同步修改

11. JavaScript(ES6) code snippets
    ES6語(yǔ)法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間

12. HTML CSS Support
    讓 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式

13. Bracket Pair Colorizer
    給括號(hào)加上不同的顏色，便于區(qū)分不同的區(qū)塊，使用者可以定義不同括號(hào)類型和不同顏色

VSCode 初次寫(xiě)vue項(xiàng)目并一鍵生成.vue模版

文件–>選項(xiàng)–>用戶代碼片段–>搜索vue.json文件打開(kāi)

• 打開(kāi)之后刪除里面的代碼復(fù)制下面的代碼

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<p class='$2'>$5</p>",
			"</template>",
			"",
			"<script>",
			"//這里可以導(dǎo)入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）",
			"//例如：import 《組件名稱》 from '《組件路徑》';",
			"",
			"export default {",
			"//import引入的組件需要注入到對(duì)象中才能使用",
			"components: {},",
			"data() {",
			"//這里存放數(shù)據(jù)",
			"return {",
			"",
			"};",
			"},",
			"//監(jiān)聽(tīng)屬性 類似于data概念",
			"computed: {},",
			"//監(jiān)控data中的數(shù)據(jù)變化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 創(chuàng)建完成（可以訪問(wèn)當(dāng)前this實(shí)例）",
			"created() {",
			"",
			"},",
			"//生命周期 - 掛載完成（可以訪問(wèn)DOM元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 創(chuàng)建之前",
			"beforeMount() {}, //生命周期 - 掛載之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 銷(xiāo)毀之前",
			"destroyed() {}, //生命周期 - 銷(xiāo)毀完成",
			"activated() {}, //如果頁(yè)面有keep-alive緩存功能，這個(gè)函數(shù)會(huì)觸發(fā)",
			"}",
			"</script>",
			"<style lang='less' scoped>",
			"//@import url($3); 引入公共css類",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}

• ps:如果沒(méi)安裝less 運(yùn)行時(shí)會(huì)報(bào)錯(cuò)

vue安裝less

npm install less less-loader --save-dev
# cli3以上不需配置任何東西
# 更改配置文件build/webpack.base.conf.js
# cli3以下需要配置
rules: [
            //  此處省略無(wú)數(shù)行，已有的的其他的規(guī)則
            {
              test: /\.less$/,
              loader: "style-loader!css-loader!less-loader"
            }
         ]

此時(shí)新建.vue文件 輸入vue 按鍵盤(pán)的tab就行

以上是“開(kāi)發(fā)vue項(xiàng)目必須要裝的vscode插件有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：開(kāi)發(fā)vue項(xiàng)目必須要裝的vscode插件有哪些-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://m.newbst.com/article48/dehihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)