Vue – ESLint 语法规则及配置

ESLint 常见语法规则

详情可到 https://eslint.bootcss.com/docs/rules/ 查看其它规则

配置规则

想配置属于自己的语法规则，可进入项目的 .eslintrc.js 文件进行规则添加。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    // 不可使用 console ,如遇到 develop 开发模式下，则不限制，如遇到 production 生产模式下，则会提示警告
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

  }
}

举例

这个是 强制函数括号之前的空格 规则，可以使用以下设定规则进行个性化设置

{
    "space-before-function-paren": ["error", "always"],
    // 或者
    "space-before-function-paren": ["error", {
        "anonymous": "always",
        "named": "always",
        "asyncArrow": "always"
    }],
}

• always (默认) 要求在参数的 ( 前面有一个空格。
• never 禁止在参数的 ( 前面有空格。

字符串选项不会检查异步的箭头函数表达式以向后兼容。

你也可以对每种类型的函数分别设置选项。以下每个选项可以设置为 "always"、"never" 或 "ignore"。默认为 "always"。

• anonymous 针对匿名函数表达式 (比如 function () {})。
• named 针对命名的函数表达式 (比如 function foo () {})。
• asyncArrow 针对异步的箭头函数表达式 (比如 async () => {})。

把规则加进配置文件中

module.exports = {
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "space-before-function-paren": ["error", "always"],
  }
}

其它规则类似.