Webstorm 2024 使用 prettier格式化代码项目是普通的 html css 项目对于纯 HTML/C

项目是普通的 html css 项目

对于纯 HTML/CSS 项目，以下是配置 WebStorm 2024 使用 Prettier 格式化的步骤：

1. 安装 Prettier

插件安装：

项目依赖安装

即使是 HTML/CSS 项目，建议在项目根目录中添加 Prettier。可以在项目文件夹下运行以下命令来安装：

bash
复制代码
npm init -y # 如果还没有 package.json 文件
npm install --save-dev prettier

2. 添加 Prettier 配置文件

在项目根目录中创建一个 .prettierrc 或者 .prettierrc.js 文件，定义 Prettier 格式化选项，例如：

json
复制代码
{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "htmlWhitespaceSensitivity": "ignore"
}

或者，试一试

module.exports = {
    printWidth: 80,
    semi: true,
    singleQuote: true,
    trailingComma: 'none',
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: 'avoid',
    requirePragma: false,
    proseWrap: 'preserve'
};

3. 在 WebStorm 中配置 Prettier

打开 WebStorm 设置 (Ctrl + Alt + S)。
导航到 Languages & Frameworks > JavaScript > Prettier。
设置 Prettier Package 为 node_modules/.bin/prettier。
勾选 On code reformat 和 On save 选项，这样会在你保存或格式化时自动调用 Prettier。

4. 格式化 HTML 和 CSS

默认情况下，Prettier 支持 HTML、CSS、JSON 等文件的格式化。你可以使用 Ctrl + Alt + L（或你自定义的快捷键）来格式化代码。

5. 配置文件关联 (可选)

在设置中，确保 HTML 和 CSS 文件类型关联了 Prettier。可以在 File Types 中搜索并确认 .html 和 .css 受 Prettier 管理。

完成这些配置后，你的 HTML 和 CSS 文件将在 WebStorm 中按 Prettier 规则进行格式化。

Webstorm 2024 使用 prettier格式化代码

项目是 普通的 html css 项目