問題

在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 屬性不會被格式化為多行。這樣，你的代碼在保存時會保持一致的格式，而不會在每個屬性之間插入換行。