vscode开发vue项⽬的⼀些必备插件
Eslint
检查代码是否符合规范
GitLens 
Git提⽰
vscode代码规范
language-stylus 
stylus语法⽀持
Path Intellisense 
相对、绝对路径提⽰
Prettier formatter 
代码格式化
Vetur 
Vue语法⽀持。包括语法⾼亮、语法代码提⽰、语法lint检测等
Vue VSCode Snippets
Vue 语法⽚段扩展
npm Intellisense 
import、require npm模块是⾃动补全
Auto Close Tag
⾃动闭合HTML/XML标签
Auto Rename Tag
⾃动完成另⼀侧标签的同步修改
JavaScript(ES6) code snippets
ES6语法智能提⽰以及快速输⼊，除js外还⽀持.ts，.jsx，.tsx，.html，.vue，省去了配置其⽀持各种包含js代码⽂件的时间HTML CSS Support
让 html 标签上写class 智能提⽰当前项⽬所⽀持的样式
Bracket Pair Colorizer
给括号加上不同的颜⾊，便于区分不同的区块，使⽤者可以定义不同括号类型和不同颜⾊
VSCode 初次写vue项⽬并⼀键⽣成.vue
⽂件–>⾸选项–>⽤户代码⽚段–>搜索vue.json⽂件打开
打开之后删除⾥⾯的代码复制下⾯的代码
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这⾥可以导⼊其他⽂件（⽐如：组件，⼯具js，第三⽅插件js，json⽂件，图⽚⽂件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引⼊的组件需要注⼊到对象中才能使⽤",
"components: {},",
"data() {",
"//这⾥存放数据",
"return {",
"",
"};",
"},",
"//监听属性类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//⽅法集合",
"methods: {",
"",
"},",
"//⽣命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//⽣命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //⽣命周期 - 创建之前",
"beforeMount() {}, //⽣命周期 - 挂载之前",
"beforeUpdate() {}, //⽣命周期 - 更新之前",
"updated() {}, //⽣命周期 - 更新之后",
"beforeDestroy() {}, //⽣命周期 - 销毁之前",
"destroyed() {}, //⽣命周期 - 销毁完成",
"activated() {}, //如果页⾯有keep-alive缓存功能，这个函数会触发",            "}",
"</script>",
"<style lang='less' scoped>",
"//@import url($3); 引⼊公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
ps：如果没安装less 运⾏时会报错
vue安装
npm install less less-loader --save-dev
# cli3以上不需配置任何东西
# 更改配置⽂件build/f.js
# cli3以下需要配置
rules: [
//  此处省略⽆数⾏，已有的的其他的规则
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
此时新建.vue⽂件输⼊vue 按键盘的tab就⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。