PHPStorm等jetbrains编辑器仅格式化部分代码的实现
之前写Vue文件的时候,有一个需求,因为我写css代码时,喜欢连行写(大多数人习惯一句一换行的写法),因为经常使用到代码格式化(ctrl+shift+L),格式化时,会将写好的css代码格式化为一句一行的写法,很影响体验。
一开始的时候,我是尝试想修改下idea编辑器默认的格式化规则,想让他帮我格式化为我需要的样式,但是折腾一圈没整好。后来转变思路,在想如何在格式化的时候不要格式化 style内部的代码。这个功能在PHPStorm,WEBStorm等jetbrains编辑器里是默认提供的功能,今天就分享下,以便和我有同样需求的小伙伴借鉴。
在设置中的代码样式里,jetbrains的IDE为我们提供了在代码注释中标记打开和关闭格式化的标签。将这个代码复制到我们不希望格式化的代码前,即可。也可以直接在新建文件模板的地方进行修改,如下:
直接在<style>标签之前加上:@formatter:off即可,因为vue的使用习惯是样式文件在最后面,所以,在结束标签</style>的后面,我们没必要再打开格式化开关了,如果你的<style>标签不在最后面,那么就还是需要加上:@formatter:on 打开代码格式化的开关的。
以上截图是在PHPStorm中截图的,在jetbrains的其他IDE里,如WebStorm、IntelliJ IDEA等编辑器里也是一致的。
- CSS颜色函数--rgb()、rgba()的语法和使用
rgb()函数和rgba()函数是前端切图工作当中经常用到的颜色函数,根据光学三原色红(red)、绿(green)、蓝(blue)三种颜色的不同分量进行混合后来
- CSS最大值计算函数--max()函数的定义和使用
max()函数的作用是从一系列用逗号分割的参数中选取最大的一个,作为属性值,参数可以是直接数值,字面量、数学表达式、css函数等,支持嵌套。与min()函数的作
- 后台发布文章时自动保存草稿功能的实现
“正在系统后台编辑文章,顺手看了下群里的视频,关视频的时候不小心连网页一起关闭了,写了大半的文章说没就没了?”,相信很多人都遇到过这种场景,辛辛苦苦码了半天的字
- CSS获取属性值函数--attr()函数的定义和使用
attr()函数为CSS返回元素属性值函数一、attr()函数的语法:该函数接收一个单一参数:attribute-name,即属性名,attr()函数返回被选择
- 富文本编辑器CKEditor5接入指南
在后端制作CMS等需要用到富文本编辑器的时候,经常会陷入选择困难症,众所周知,目前市面上的富文本编辑器大概有数十种,比如百度的ueditor、TinyMCE、w
- WebStorm中如何配置SCSS
WebStorm是一款很优秀的用于前端开发的IDE,用于开发基于HTML、CSS、JS等的应用时非常应手,当然JetBrains旗下的其他IDE,如PHPSto
- CSS颜色函数--rgb()、rgba()的语法和使用
rgb()函数和rgba()函数是前端切图工作当中经常用到的颜色函数,根据光学三原色红(red)、绿(green)、蓝(blue)三种颜色的不同分量进行混合后来
- CSS限定属性值函数--clamp()函数的语法和使用
clamp()的作用是将属性值限制在最大、最小值之间,当值介于最大最小值范围中时,则使用给定的首选值。一、clamp()函数的语法clamp(MIN, VAL,