webstorm自定义文件模板

平时最喜欢用的开发工具就是webstorm，vscode尝试过无数次最后都放弃了。看来看去websotrm的界面最深入人心了，且功能也非常齐全。

以前每次新建一个vue项目，都会自己手动去补全很多相似的模板，这简直是在浪费大好日光，现在想起来，真是觉得自己很蠢。不过好在现在把这些都配置好了，只要开始了，怎么都不算晚对吧。下面开始正题部分。

我的版本是2022.1.2，安装了汉语插件的，英语实在是有困难。诉求就是，针对不同的vue项目，输入自定义的标识后，即可生成代码框架。

找到设置窗口：文件 > 设置
找到编辑器 > 文件和代码模板 > Vue single File Component

能看到红色区域就是webstorm自带的vue模板，但是我们需要自定义，所以先将红色区域全部删除，然后点击“应用”保存。接下来就根据不同的vue项目版本写自定义模板。

vue2 + js

继续在设置窗口，点击编辑器 > 实时模板 > Vue，然后点击窗口右侧的“+”按钮，选择实时模板
在缩写输入框输入自定义的内容以及这个模板的描述
在模板文本里输入你想要的组件代码框架
点击“定义”下拉框，选择Vue
选择默认为Tab
最后点击应用保存该模板

// vue2的代码框架
<template><div id="container"></div>
</template><script>
export default {name: "ComponentName"
};
</script><style scoped></style>

测试一下自定义的模板，在项目目录下新建一个vue文件，默认显示为空，然后输入vueb的时候已经出现的vuebasin的补全，点击Tab键，自动生成vue2的代码框架。

vue2 + ts

重复上面的步骤，在实时模板里新建缩写为vuets+Tab的快捷键，模板文本设置为

<template><div id="container"></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';@Component
export default class ComponentName extends Vue {}
</script><style scoped></style>

webstorm自定义文件模板相关推荐

xcode4自定义文件模板(Creating Custom Xcode 4 File Templates)
翻译:http://www.bobmccune.com/2012/03/04/creating-custom-xcode-4-file-templates/ 其实说是翻译有些牵强.我想实现的东西很简单 ...
Webstorm添加新建文件类型创建文件模板
Webstorm添加新建文件类型以创建Vue文件为例: File-Setting-Editor-File and Code Template分支,点击添加,依次输入Name和Extension, ...
Xcode代码文件模板
效果图背景鉴于公司非常注重代码规范,所以需要有良好的代码标注(MARK.FIXME.TODO),有利于代码文件目录清晰. 代码文件内部基本一致的集成风格,比如每个Controller都有必须实现固 ...
odoo 自定义视图_如何使用Windows的五个模板自定义文件夹视图
odoo 自定义视图 If you're particular about how Windows displays the contents of your folders, you can cut ...
php项目开发免费后台模板,自定义后台模板文件
当需要修改后台模板时可以采用此方法来修改,不影响对程序的升级一.自定义后台模板文件例如需要修改系统默认模板:/dayrui/Core/Views/api_my.html 此文件位于Core目录下, ...
TFS2008自定义过程模板之 Power Tools 工具篇
上午写了一篇关于自定义过程模板的文章http://www.cnblogs.com/sansi/archive/2010/03/11/1683355.html,是手工直接处理xml文件.刚刚发现原来是有 ...
VSCode 自定义html5模板
新建html快捷键当我们想在VSCode中新建html代码时,可以输入! 然后回车或者Tab即可自动生成一个html文件模板,效果如下: (二)自定义html5模板但我们每次新建html模板时候 ...
MyEclipse自定义servlet模板
每次用MyEclipse默认的servlet的模板创建servlet的时候,里面会生成好多没有用的代码.因此,我们可以自定义servlet模板.步骤如下: 找到com.genuitec.eclipse ...
用Visual Studio2019自定义项目模板
项目模板简介众所周知,在我们使用VS新建项目时,都需要选择一个项目模板,如下图: 我们选择完项目模板进行创建,创建完成之后,可以发现项目中已经包含了一些基础的文件.例如MVC: 可以看到,MVC项目 ...
ASP.NET 自定义项目模板
前言在微服务架构盛行的时代,一言不合就新建一个服务,虽然搭建服务并没什么难度,但不可避免的是每个人搭建出来的架子会存在差异,这很合理,因为每个开发者的个人风格.工作经验都不一样,难免认为自己喜欢的才 ...

webstorm自定义文件模板

webstorm自定义文件模板相关推荐

最新文章

热门文章