【实用指南】VSCode配置Tailwind代码格式化前言查了一圈资料，要么把vscode讲解的太复杂，要么就是讲一堆

查了一圈资料，要么把vscode讲解的太复杂，要么就是讲一堆插件的原理，最后，还是没解决Ctl+S保存后Tailwind代码自动格式化的问题，下面我们就来着手解决这个刚需。

开始之前，我们先理解下插件和依赖包的关系：

简单说，插件就是编辑器会用到的东西，如果你的在编辑器做了什么操作，这个插件又刚好配置上了，就会触发这个插件的功能，比如，你在编辑器里按了Ctl+S，或是其他快捷键。

既然有了插件，为什么还要依赖包呢？你可以理解为，依赖包就是插件的插件，如果依赖包默认的功能满足不了需求，就需要下载额外的依赖包来增强功能。

插件的配置文件。通过配置文件，可以添加额外的插件（也就是依赖包），这样，插件的功能就可以扩展了。

好了，理解完上面三个问题，我们开始解决问题，主要分为三步：

安装插件这步问题不大，搜索“Prettier”进行安装即可，主要是配置vscode：

首先，在项目根目录下新建一个文件夹“.vscode”，其次，再新建一个settings.json文件，代码如下：

// ./vscode/settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

npm install -D prettier prettier-plugin-tailwindcss

最后一步，添加配置文件，连接Prettier和Tailwind依赖包

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