原文网址:Webstorm--解决复制时class自动改为className的问题_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍解决Webstorm复制时class自动改为className的问题的方案。
解决方法
File=> Settings=> Editor=> General=> Smart Keys=> JavaScript=> 取消选中“Convert attributes when pasting HTML to JSX files”
问题复现
把下边内容复制到Webstorm的文件(Demo.vue)中
<template>
<div class="hello">
hello world
</div>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>
结果:标签上的class属性被改为了className
原因分析
vue和react都支持直接书写jsx的。
vue在指定类名的时候使用的是更符合直觉的class;react用的是classname。
WebStorm和VSCode等编辑器对vue jsx 的支持貌似是通过react jsx来实现的。这就导致了在自动补全代码的时候class会变成className。WebStorm有更奇葩的行为,复制粘贴代码的时候会自动把class统一替换成className。
解决方案
File=> Settings=> General=> Smart Keys=> JavaScript=> 取消选中“Convert attributes when pasting HTML to JSX files”
如下图所示:
解决之后的结果
可以看到,复制的时候class不会被重命名为className了。