如何在Vue.js的<template>中禁用段落eslint max-len规则并调整长度？

针对你遇到的这两个需求，我整理了具体的实现方法：

1. 把最大行长度从100调整为120 #

你需要修改项目根目录下的ESLint配置文件（常见的是.eslintrc.js、.eslintrc.json或者.eslintrc），在rules字段里更新max-len规则的配置：

如果你用的是JS格式的配置文件（.eslintrc.js）： #

module.exports = {
  // 保留你原有的其他配置（比如extends: 'airbnb-base'之类的）
  rules: {
    // 替换原有的max-len规则
    'max-len': ['error', { code: 120 }]
  }
};

如果你用的是JSON格式的配置文件（.eslintrc.json）： #

{
  "rules": {
    "max-len": ["error", { "code": 120 }]
  }
}

这个配置会把所有代码的最大允许行长度改成120，你也可以把error改成warn，根据自己的需求调整提示级别。

2. 禁用段落文本的max-len检查 #

如果不想让ESLint检查模板里的长文本段落，有两种方式可选：

方式一：全局禁用所有字符串/模板文本的行长度检查 #

在刚才的max-len规则里添加ignoreStrings: true选项，这样所有字符串（包括Pug模板里的文本内容）都会被跳过行长度检查：

module.exports = {
  rules: {
    'max-len': ['error', { 
      code: 120,
      ignoreStrings: true // 忽略字符串和模板文本的行长度检查
    }]
  }
};

方式二：仅禁用某一行的检查（适合个别长文本） #

如果只是个别行需要跳过，可以在对应的Pug行上方添加ESLint的单行禁用注释：

<template lang="pug">
 div
  .container
   .row
    .col-xl-10.mx-auto
     <!-- eslint-disable-next-line max-len -->
     p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
</template>

这样只会跳过这一行的max-len检查，其他代码的规则依然生效。

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