问题

在create-next-app创建项目的时候,只要我没有选择eslint的时候，就不会在保存的时候每个属性之间有换行，但是创建项目的时候选择eslint，保存的时候就会在每条属性间有换行

回答

当你使用 create-next-app 创建项目并选择使用 ESLint 时，Next.js 默认会配置 ESLint 和相关的格式化规则。在保存文件时，如果每个 CSS 属性之间出现换行，可能是因为 ESLint 或 Prettier 的规则影响了代码格式化。

解决方法

以下是解决此问题的几种方法：

1. 配置 Prettier 以避免多行属性：

   • 如果你希望使用 Prettier 来格式化代码，可以通过配置 .prettierrc 文件来控制 CSS 属性的格式化行为。

2. 调整 ESLint 配置：

   • 有时 ESLint 配置会与 Prettier 的配置冲突，导致格式化行为不符合预期。可以调整 ESLint 配置以避免这些冲突。

详细步骤

1. 配置 Prettier

确保项目中有一个 .prettierrc 文件，并添加以下配置：

{"printWidth": 80,"tabWidth": 2,"useTabs": false,"semi": true,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"arrowParens": "avoid","proseWrap": "never","endOfLine": "lf","overrides": [{"files": "*.css","options": {"singleAttributePerLine": false}}]
}

2. 安装并配置 Prettier 插件

确保你已经安装了 Prettier 插件，并在项目中配置了 Prettier：

• 安装 Prettier 和相关插件：

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• 在 ESLint 配置文件（如 .eslintrc.json）中添加 Prettier 的配置：

{"extends": ["next/core-web-vitals","plugin:prettier/recommended"],"rules": {"prettier/prettier": ["error",{"singleAttributePerLine": false}]}
}

3. VSCode 配置

确保 VSCode 的配置与 Prettier 和 ESLint 配置一致：

• 打开 VSCode 设置文件（settings.json），添加以下配置：

{"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"prettier.singleAttributePerLine": false
}

4. 禁用 ESLint 格式化规则

如果 ESLint 的某些规则与 Prettier 冲突，禁用这些 ESLint 规则：

• 在 ESLint 配置文件中添加禁用规则的配置：

{"rules": {"newline-per-chained-call": "off","newline-before-return": "off",// 根据需要禁用其他规则}
}

通过以上配置，你可以确保在使用 ESLint 和 Prettier 时，CSS 属性不会被格式化为多行。这样，你的代码在保存时会保持一致的格式，而不会在每个属性之间插入换行。