如何设置 VSC / ESlint 不将 css 类 移动到新行？
How to set VSC / ESlint not to move css classes to new line?
好吧，当我有更多 类 时，vsc / eslint 会为我将它们带到新的一行，如您在随附的屏幕截图中所见。如何仅对 css 类 禁用此移动？
EDIT: [24th of May 2021]
The author of this question notified me that it was required that they reset there catch in order to get the default VSCode HTML Language Features Formatter to format their code properly. After some research I found that this is often caused by VSCode extensions that format HTML. Its important to use extensions that have an active developer that responds to GitHub issues, and/or extensions that are reputable.
Original Post: [22nd of May 2021]
You can safely say its not ESLint formatting your class tags, because its not a formatter, and its not for Markup/HTML. I went into my VSCode editor to try and reproduce the formatting that your images showed -- I already had a project open so I just .gitignore'd a test HTML file and wrote a long class attribute inside of a header tag, right away it formatted the class attribute the same as your example. This was a bit bizar because when I write html, I don't get this result, but the project I had open was a Node.js Project. Right away I knew it had to do with the formatter I was using. I reconfigured VSCode to use its default formatter with settings that I have typed an example of below. This will fix your problem if you understand what you are doing and do it correctly.
Bellow is a list of settings that configure the default HTML formatter that comes with VSCode:
{
// local settings.json @ _projectroot/.vscode/settings.json
"html.format.wrapLineLength": 200,
"html.format.wrapAttributesIndentSize": 4,
"html.format.wrapAttributes": "auto",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.formatOnSave": true
}
}
The above sets the html defaultFormatter editor to its default setting which is the VSCode HTML formatter, but just incase you should probably also do the following.
Open the HTML file you want to format, and press the [F1] Key.
When the quick-input above drops open type Format Document and select the Format Document With... option.
Select Configure Default Formatter at the very bottom.
And choose HTML Language Features
VSCode does not split the attribute tags up, as shown in your example, under any configuration that I could find. What was causing it my VSCode editor was PRETTIER which you can use, but you have to set a special language options setting to using the html parser for html files, however, even if you are using a formatter for your JavaScript the above solution I offered should be the most straight forward & robust solution.
就我而言，我正在开发 Vue 项目，所以我有 Vetur 扩展，它使用更漂亮的格式 html。
Prettier 将 html 属性换行。为了防止这种情况，
在 .prettierrc 文件中添加 "printWidth": 300。保存时，这会将多个 css 类 格式化为同一行。
好吧，当我有更多 类 时，vsc / eslint 会为我将它们带到新的一行，如您在随附的屏幕截图中所见。如何仅对 css 类 禁用此移动？
EDIT: [24th of May 2021]
The author of this question notified me that it was required that they reset there catch in order to get the default VSCode HTML Language Features Formatter to format their code properly. After some research I found that this is often caused by VSCode extensions that format HTML. Its important to use extensions that have an active developer that responds to GitHub issues, and/or extensions that are reputable.
Original Post: [22nd of May 2021]
You can safely say its not ESLint formatting your class tags, because its not a formatter, and its not for Markup/HTML. I went into my VSCode editor to try and reproduce the formatting that your images showed -- I already had a project open so I just .gitignore'd a test HTML file and wrote a long class attribute inside of a header tag, right away it formatted the class attribute the same as your example. This was a bit bizar because when I write html, I don't get this result, but the project I had open was a Node.js Project. Right away I knew it had to do with the formatter I was using. I reconfigured VSCode to use its default formatter with settings that I have typed an example of below. This will fix your problem if you understand what you are doing and do it correctly.
Bellow is a list of settings that configure the default HTML formatter that comes with VSCode:
{
// local settings.json @ _projectroot/.vscode/settings.json
"html.format.wrapLineLength": 200,
"html.format.wrapAttributesIndentSize": 4,
"html.format.wrapAttributes": "auto",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.formatOnSave": true
}
}
The above sets the html defaultFormatter editor to its default setting which is the VSCode HTML formatter, but just incase you should probably also do the following.
Open the HTML file you want to format, and press the
[F1]Key.When the quick-input above drops open type
Format Documentand select theFormat Document With...option.Select
Configure Default Formatterat the very bottom.And choose
HTML Language Features
VSCode does not split the attribute tags up, as shown in your example, under any configuration that I could find. What was causing it my VSCode editor was PRETTIER which you can use, but you have to set a special language options setting to using the html parser for html files, however, even if you are using a formatter for your JavaScript the above solution I offered should be the most straight forward & robust solution.
就我而言，我正在开发 Vue 项目，所以我有 Vetur 扩展，它使用更漂亮的格式 html。
Prettier 将 html 属性换行。为了防止这种情况，
在 .prettierrc 文件中添加 "printWidth": 300。保存时，这会将多个 css 类 格式化为同一行。