webstorm配置vue文件模板和代码样式

vue文件模板

• preference -> Editor -> File and Code Templates
• 红色箭头的选项是在这个模板的基础上再格式化一遍，去掉勾选就会按照上面的原样呈现
• 这里的模板语言使用的是Apache Velocity
• 其他类型文件配置同理

webstorm的内置变量：
${PROJECT_NAME}- 项目名称
${NAME} - 新建文件名称（不包括后缀名）
${USER} - 用户名
${DATE} - 当前日期YYYY/MM/DD
${TIME} - 当前系统时间hh:mm 上午/下午
${YEAR} - the current year.
${MONTH} - the current month.
${DAY} - the current day of the month.
${HOUR} - the current hour.
${MINUTE} - the current minute.
${PRODUCT_NAME} - IDE名称
${MONTH_NAME_SHORT} - 月份前三个字母缩写
${MONTH_NAME_FULL} - 月份英文全称

image.png

代码默认格式

有时候你的eslint配置跟IDE代码样式对不上，就会出现上图比较尴尬的情况，然后就要每次都去改代码，这时候就得安排安排IDE了

IDE自动引入

• preference -> Editor -> Code Style -> JavaScript -> Punctuation

image.png