精品久久久久久,亚洲AV日韩精品久久久久久,97久久国产亚洲精品超碰热

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

相關(guān)推薦：《vscode教程》

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

Eslint
檢查代碼是否符合規(guī)范
gitLens ?
Git提示

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
language-stylus ?
stylus語法支持
Path Intellisense ?
相對、絕對路徑提示
Prettier formatter ?
代碼格式化
Vetur ?
vue語法支持。包括語法高亮、語法代碼提示、語法lint檢測等
Vue vscode Snippets
Vue 語法片段擴(kuò)展
npm Intellisense ?
import、require npm模塊是自動補(bǔ)全
auto Close Tag
自動閉合html/xml標(biāo)簽
Auto Rename Tag
自動完成另一側(cè)標(biāo)簽的同步修改
JavaScript(es6) code snippets
ES6語法智能提示以及快速輸入，除JS外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間
HTML css Support
讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式
Bracket Pair Colorizer
給括號加上不同的顏色，便于區(qū)分不同的區(qū)塊，使用者可以定義不同括號類型和不同顏色

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

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

打開之后刪除里面的代碼復(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引入的組件需要注入到對象中才能使用", 			"components: {},", 			"data() {", 			"//這里存放數(shù)據(jù)", 			"return {", 			"", 			"};", 			"},", 			"//監(jiān)聽屬性 類似于data概念", 			"computed: {},", 			"//監(jiān)控data中的數(shù)據(jù)變化", 			"watch: {},", 			"//方法集合", 			"methods: {", 			"", 			"},", 			"//生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實(shí)例）", 			"created() {", 			"", 			"},", 			"//生命周期 - 掛載完成（可以訪問DOM元素）", 			"mounted() {", 			"", 			"},", 			"beforeCreate() {}, //生命周期 - 創(chuàng)建之前", 			"beforeMount() {}, //生命周期 - 掛載之前", 			"beforeUpdate() {}, //生命周期 - 更新之前", 			"updated() {}, //生命周期 - 更新之后", 			"beforeDestroy() {}, //生命周期 - 銷毀之前", 			"destroyed() {}, //生命周期 - 銷毀完成", 			"activated() {}, //如果頁面有keep-alive緩存功能，這個(gè)函數(shù)會觸發(fā)", 			"}", 			"</script>", 			"<style lang='less' scoped>", 			"//@import url($3); 引入公共css類", 			"$4", 			"</style>" 		], 		"description": "Log output to console" 	} }

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

vue安裝less

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