vue模板配置与webstorm代码格式规范设置

目录
  • 1、编译器代码格式规范设置
  • 2、vue模板配置

1、编译器代码格式规范设置

通常我们写代码时，代码缩进都是4个空格，但是在前端中，据全球投票统计，建议使用2个空格来进行代码缩进。

首先我们打开webstorm中的设置，如果使用的是mac的同学直接使用command +  ,快捷方式，来到Editor-->Code Style-->HTML，将Tab size和Indent的值改为2，同理在JavaScript中也改为2

2、vue模板配置

在我们使用html练习vue时，如果我们不想每次都要创建一次vue实例对象，那么我们可以在html中配置一个模板，以后直接使用vue标签，就能直接引入代码

我们打开webstorm中的设置，来到Editor-->Live Templates，选择vue，点击右上角的+

选择Live Template，然后在Abbrevition中写入vue，在Template text中写入需要配置的模板文本内容即可

最后在当前页面，有个!的地方，点击Define

然后勾选HTML，点击ok完成

最后实现的效果，我们在HTML中直接输入vue，然后按tab，我们就会立马出现刚刚配置好的模板代码

到此这篇关于vue模板配置与webstorm代码格式规范设置的文章就介绍到这了,更多相关 vue webstorm内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webstorm+vue初始化项目的方法

    vue新项目准备: 1.安装nodejs,官网下载傻瓜安装 node -v 验证 2.npm包管理器,是集成在node中的,所以安装了node也就有了npm npm -v 验证 3.安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org (完成之后,我们就可以用cnpm代替npm来安装依赖包了.如果想进一步了解cnpm的,查看淘宝npm镜像官网.) 4.安装vue-cli脚手架构建工具 npm install -g

  • 基于vue项目设置resolves.alias: '@'路径并适配webstorm

    基于vue项目设置resolves.alias: '@'路径并适配webstorm

    在webpack的配置项中添加下面代码 function resolve (dir) { return path.join(__dirname, dir) } webpackConfig = { resolve: { alias: { '@': resolve('src') } } } 然后再设置一下下,在你的IDE中按住CTRL就能根据路径跳转到对应文件了 描述: ctrl+alt+s 搜索 webpack 然后选择\node_modules\@vue\cli-service\webpack.

  • WebStorm无法正确识别Vue3组合式API的解决方案

    WebStorm无法正确识别Vue3组合式API的解决方案

    1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信WebStorm是可以做到的,只是某些配置没有正确,笔者尝试过在设置的Libraries中勾选上node_modules,但是没有效果. 3 解决办法 最终的解决办法参考了此处(图源): 选择node_modules文件夹,右键选择Mark Directory as,最后选择Not Excluded即可.

  • 如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目 无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令 第二步:配置这里 第三步:第二步点开以后就是这个界面 其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置 第四步:这就是配置文件,里面是命令 第五步

  • 如何使用Webstorm和Chrome来调试Vue项目

    如何使用Webstorm和Chrome来调试Vue项目

    前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西, 所以这里整理自己搭建成功的过程分享出来.可能不同的Webstorm版本会导致效果不一样,所以这里先列出我的版本. Webstorm版本: 2018.3.4 一.新建Vue项目 为了演示一个完整的示例,所以从创建项目开始,这里通过 vue脚手架命令 开始创建一个项目 vue init webpack debug-vue 如果运

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • webstorm和.vue中es6语法报错的解决方法

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html

  • webstorm建立vue-cli脚手架的傻瓜式教程

    webstorm 文件 -> new -> project 1.尽量不要勾选 Use the default project setup (babel, eslint) 默认建立的项目好多的配置不全,后期再装很麻烦. 2.点击 create 后出现以下选项,按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动 3.选择配置,这时你会看见一些选项,你要集成什么就选就行

  • vue: WebStorm设置快速编译运行的方法

    WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步 点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项: 第二步 打开启动设置页面后,点击左上角的加号添加新的运行方式: 第三步 在弹出的选择框中,选择node.js启动模式: 第四步 在新打开的设置页面中,在红色圈中的地方设置如图路径的文件: 至此设置成功,直接点启动按钮就可以部署项目. 以上这篇vue:

  • webstorm中vue语法的支持详解

    俗话说,要想攻其玉,必先利其器.工作中老是在用angular开发,但慢慢会有vue的业务,所以需要学习学习vue.今天开始折腾vue,我是用webstorm开发前端的,当使用vue-cli创建好一个项目后,使用webstorm打开简直不能入目啊,倒是没有啥错误提示,倒是一大堆的各种编辑器警告,无奈,还得去搞好IDE对vue的支持啊. 前提 vue的官方文档上建议新手是先不要使用vue-cli,而是直接先用类似于JQuery一样的方式引入vue来学习.鉴于前面已经搞过了angular的cli,所以

随机推荐