React CSS开发中ClassName自动补全工具及实现方式咨询

不需要手动编写所有ClassName，有几款实用的编辑器插件和原生支持可以解决这个问题：

• VS Code 可用插件：

  • CSS Modules IntelliSense：能识别项目中导入的普通CSS文件内的类名，在JSX的className属性中自动弹出补全提示。
  • HTML CSS Support：通用型CSS类名补全工具，适配React的JSX文件，可关联当前项目所有CSS文件的类名。
  • Tailwind CSS IntelliSense：如果用Tailwind CSS，它不仅补全类名还附带样式预览，对普通CSS的基础补全也兼容。

• WebStorm/IDEA 系列编辑器：
  编辑器原生支持类名自动补全，只要CSS文件与组件文件在同一项目中，会自动扫描CSS里的类名，在className处直接给出提示，无需额外装插件。

另外，改用CSS Modules（将CSS文件命名为[name].module.css）能获得更精准的补全体验，因为模块式CSS会导出类名对象，可通过.语法直接访问：

/* login.module.css */
.LoginForm {
  padding: 20px;
  border: 1px solid #eee;
}

import styles from './login.module.css';

function Login() {
  return <div className={styles.LoginForm}>
       Hello World
    </div>
}

export default Login;

内容的提问来源于stack exchange，提问作者Undefined