Webstorm--解决复制时class自动改为className的问题

简介

说明

本文用示例介绍解决Webstorm复制时class自动改为className的问题的方案。

解决方法

File=> Settings=> 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了。