Tailwindcss-4.x 代码格式化-VSCode插件

概念

VSCode插件是什么？ 插件是为了添加某些VSCode没有的或者增强某些已有的功能而发布的代码片段

插件依赖包是什么？ 插件没办法适配所有的项目，有一些特殊的功能需要针对不同的项目做不同的分析的时候，需要安装插件的依赖。

多人协作的项目使用tailwindcss作为样式库的时候，为了保证tailwindcss格式统一美观，使用第三方插件Prettier。相关文档很多介绍的比较详细，但内容都比较繁琐。这里提取核心步骤

• 插件安装Prettier
• 配置VSCode保存自动格式化
• 安装Tailwindcss依赖包
• 添加Prettier配置文件

插件安装

VScode中打开插件市场，搜索关键字 Prettier，找到之后点击安装即可。

保存自动格式化

在项目根目录下新建一个文件夹“.vscode”，然后再新建一个settings.json文件（如果之前存在则不创建），添加代码如下：

// ./vscode/settings.json
{
  // 开启保存后自动格式化
  "editor.formatOnSave": true,
  // 默认格式化器，这里我们选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

安装Tailwindcss依赖包

（注意！！！ 如果使用的其他包管理工具，比如yarn、pnpm，切换成其他的安装命令）

Prettier是一个专门格式化代码的插件，支持很多种语言，为了增强对tailwindcss的支持，需要安装这个依赖包。这个依赖包专门服务于tailwindcss样式。

npm install -D prettier prettier-plugin-tailwindcss

添加Prettier配置文件

如果之前存在则直接打开编辑内容

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

如果使用了git管理代码，一定要将添加的文件加入都git提交列表中，如此安装了prettier插件的协作成员都支持tailwindcss的自动格式化