0%

Webstorm 中配置 vue3 + antd Vue + tailwindcss 开发环境

背景

既然要折腾,我们先看下 webstorm 中有哪些不理想的问题

  1. HTML 中编写 Tag 的 class 属性,提示混乱,甚至把 node_modules 里面的样式名称都提示出来了,见 [How to exclude class name (html class attr) suggestions from node_modules?][https://youtrack.jetbrains.com/issue/WEB-55582]
  2. antd 按需引入时,使用组件没有任何的语法提示
  3. vue3 的 setup 支持不佳
  4. tailwindcss 支持不佳

class 提示问题

因为我们使用了 tailwindcss 理所应当的希望编辑代码时候,能有样式名称的提示。但是它好像索引了整个 node_modules 中的样式文件

img

即使我们设置了 exclude 也没用

img

解决方法

这个原因是,项目中默认会在 Preferences | Languages & Frameworks | JavaScript | Libraries 中默认存在一个 node_modules 的配置,因此导致即使我们把 node_modules 的文件夹设置为 exclude, 但是它依然会索引 node_modules 里面的文件。

我们只需要把它左边的复选框取消掉勾选即可

注意

如果我们把 node_modules 左边的复选框取消掉后,会导致整个项目的代码提示(只要涉及到 npm 的包)都会失效,比如 vue, vue-router, pinia 我们如果在 script 中编写 composition api 现在直接自动引入都没有了。

这个原因是我们把 node_moduels 取消后,关于 vue 包的索引都消失了,我们需要照葫芦画瓢把 vue 这个库的依赖再次添加到 Preferences | Languages & Frameworks | JavaScript | Libraries 中,

点击右侧的 ADD 后,添加对应的几个需要代码提示的包即可,比如 vue, @vue

后续如果遇到有些 npm 的包,我们在编写代码时,没有语法提示,也不会自动引入时,我们只需要在此处进行下配置即可

后续

此时会出现一个矛盾的问题,比如一个包,我们需要提示里面的 js 代码部分,比如导出的 methods 或者变量,但是同时也不希望它的 css 文件被索引

如果我们直接讲这个包,添加到 Libraries 中,它会同时给 css 文件建立索引。

为了解决这个问题,我们只需要讲这个包导出的文件,添加到配置文件中即可 (按住 shift 键可以加选)

antd 语法提示

语法不提示问题请参考
如何修复 WebStorm 不提示 antd-vue 3 的组件问题

vue3 的 setup 支持不佳

截止到当前最新的 2022.1.1 版本已经对 vue3 的支持很完善了,https://youtrack.jetbrains.com/issue/WEB-46511 更新下编辑器版本即可

tailwindcss 支持不佳

截止到当前最新的 2022.1.1 版本已经对 tailwindcss 的支持很完善了,https://www.jetbrains.com/help/webstorm/tailwind-css.html 更新下编辑器版本即可