问题
在create-next-app创建项目的时候,只要我没有选择eslint的时候,就不会在保存的时候每个属性之间有换行,但是创建项目的时候选择eslint,保存的时候就会在每条属性间有换行
回答
当你使用 create-next-app
创建项目并选择使用 ESLint 时,Next.js 默认会配置 ESLint 和相关的格式化规则。在保存文件时,如果每个 CSS 属性之间出现换行,可能是因为 ESLint 或 Prettier 的规则影响了代码格式化。
解决方法
以下是解决此问题的几种方法:
-
配置 Prettier 以避免多行属性:
- 如果你希望使用 Prettier 来格式化代码,可以通过配置
.prettierrc
文件来控制 CSS 属性的格式化行为。
- 如果你希望使用 Prettier 来格式化代码,可以通过配置
-
调整 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 属性不会被格式化为多行。这样,你的代码在保存时会保持一致的格式,而不会在每个属性之间插入换行。