如何关闭Nuxt.js中ESLint的HTML标签换行警告？

Hey there! Those warnings are triggered by two Vue-focused ESLint rules: vue/singleline-html-element-content-newline (for single-line elements) and vue/multiline-html-element-content-newline (for multi-line ones). Here are straightforward ways to turn them off or adjust them to fit your coding style:

1. Disable Globally (Project-Wide) #

The easiest way to get rid of these warnings everywhere is to update your ESLint configuration file (usually .eslintrc.js in your Nuxt root folder). Add the following lines to the rules section:

module.exports = {
  // ... other existing configs
  rules: {
    // Turn off single-line HTML element newline requirement
    "vue/singleline-html-element-content-newline": "off",
    // Turn off multi-line HTML element newline requirement
    "vue/multiline-html-element-content-newline": "off"
  }
}

After saving the file, restart your npm run dev server for the changes to take effect.

2. Disable for a Single File #

If you only want to suppress these warnings in one specific component, add this comment at the very top of the .vue file:

<!-- eslint-disable vue/singleline-html-element-content-newline, vue/multiline-html-element-content-newline -->

3. Disable for Specific Lines #

For even more control, you can disable the warning just for the line that's triggering it. Use a line-specific comment right above the element:

<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<v-card-title>Your card title content</v-card-title>

4. Tweak the Rules (Instead of Disabling) #

If you don't want to turn off the rules entirely but want to exclude certain elements (like the ones in your warnings: <v-card-title>, <p>, <a>, <v-btn>), you can configure the rules to ignore those tags:

module.exports = {
  rules: {
    "vue/singleline-html-element-content-newline": ["warn", {
      ignoreElements: ["v-card-title", "p", "a", "v-btn"]
    }],
    "vue/multiline-html-element-content-newline": ["warn", {
      ignoreElements: ["p", "a", "v-btn"]
    }]
  }
}

This way, the rules will still apply to other elements but leave your preferred tags alone.

内容的提问来源于stack exchange，提问作者priosshrsth