vscode开发vue项目的一些必备插件
2020-04-22 00:41
543 查看
-
Eslint
检查代码是否符合规范 -
GitLens
Git提示 -
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安装less
npm install less less-loader --save-dev # cli3以上不需配置任何东西 # 更改配置文件build/webpack.base.conf.js # cli3以下需要配置 rules: [ // 此处省略无数行,已有的的其他的规则 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ]
此时新建.vue文件 输入vue 按键盘的tab就行
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- VS Code开发Vue项目格式化代码空格被删除
- vscode开发html一些有用的插件
- Vue项目vscode 安装eslint插件的方法(代码自动修复)
- VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
- VSCode Vue开发推荐插件和VSCode快捷键
- 前端开发vscode必备插件
- 使用vscode开发vue项目,iview中标签报错
- vue项目中vscode安装eslint插件和错误自动修复(vue-cli2.0创建的项目)
- VS Code之Vue开发常用插件
- vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
- VSCode提高 Node 和 Vue 开发效率的插件推荐
- vscode前端开发必备插件
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
- Vscode高效开发必备插件
- VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)
- 使用vscode开发vue项目时候一直报错 '}' expected.Vetur(1005),遇到这种问题怎么解决,网上查了好多资料都没用
- VScode开发Vue项目,关闭eslint代码检查,以及相关配置
- vue项目vscode常用插件
- react开发vscode插件推荐