nuxt-module-eslint-mom

Mom 基于 ESLint，用来检查 JS/JSX/TS/TSX 语法的注入模块，基于Nuxt 2.15.3+框架。

特性

• 完全兼容Nuxt 2.15.3+框架
• 默认集成到 @mega-apps/cli/config/nuxt.config.js 中
• 支持运行开发服务或构建时，自动执行规则检查
• 支持监视文件变化，执行规则检查
• 支持自动修复大部分规则错误

特别注意

nuxt-module-eslint-mom 包，默认执行以下约定：

• （可选，非强制）不建议自己额外使用eslint的配置；（原因：每个衍生项目，各自为政，规则各自修改，规则会越来越混乱，统一及管控将越来越困难）
• （可选，非强制）一般不建议通过 git hooks 提交代码的时候，运行代码检查，（原因：很多人通过命令参数，绕过 git hook，代码检查未执行；为防止这一点，新代码，自己或者别人全新运行，有问题就会报错，直接退出，更容易发现问题）；如果需要，建议提交代码规则应用的是项目构建。

检查规则说明

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  extends: [
    /* 引入 eslint-config-airbnb-base 规则 */
    "airbnb-base",
    "@nuxtjs",
    "prettier",
    "prettier/vue",
    "plugin:prettier/recommended",
    "plugin:nuxt/recommended",
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    // eslint 对eslint 内置规则的定制
    ...{
      "import/no-extraneous-dependencies": [
        "warn",
        {
          devDependencies: false,
          optionalDependencies: false,
          peerDependencies: false,
          bundledDependencies: true,
        },
      ],
      "import/no-unresolved": ["warn", {}],
    },

    // prettier/prettier 对prettier规则的定制
    ...{
      "prettier/prettier": [
        "error",
        {
          // 使用 2 个空格缩进
          tabWidth: 2,
          // 不使用缩进符，而使用空格
          useTabs: false,
          // 行尾需要有分号
          semi: true,
          // 不使用单引号
          singleQuote: false,
          // 对象的 key 仅在必要时用引号
          quoteProps: "as-needed",
          // jsx 不使用单引号，而使用双引号
          jsxSingleQuote: false,
          // 末尾不需要逗号
          trailingComma: "es5",
          // 大括号内的首尾需要空格
          bracketSpacing: true,
          // jsx 标签的反尖括号需要换行
          jsxBracketSameLine: true,
          // 箭头函数，只有一个参数的时候，也需要括号
          arrowParens: "always",
          // 每个文件格式化的范围是文件的全部内容
          rangeStart: 0,
          rangeEnd: Infinity,
          // 不需要写文件开头的 @prettier
          requirePragma: false,
          // 不需要自动在文件开头插入 @prettier
          insertPragma: false,
          // 使用默认的折行标准
          proseWrap: "preserve",
          // 根据显示样式决定 html 要不要折行
          htmlWhitespaceSensitivity: "css",
          // 换行符使用 lf
          endOfLine: "lf",
        },
        {
          usePrettierrc: false,
        },
      ],
    },
  },
};

使用说明

默认的 eslint 的配置是在 nuxt.config.js 中，已经定义，如下面代码：

/**
 * nuxt.config.js 部分源码
 **/

buildModules: [
  '@mega-apps/nuxt-module-eslint-mom'
],

// https://eslint.org/docs/developer-guide/nodejs-api#-new-eslintoptions
eslint: {
  fix: false
}

高级配置

如何开启自动修复

默认配置中，自动修复功能是关闭的，可通过如下配置，开启

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  fix: true;
}

如何开启开发日志模式

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  debug: true;
}

如何关闭检测到错误就终止运行

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  exitOnHasErrorOnBootstrap: false;
}

如何关闭文件变化监听

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  watching: false,
}

如何关闭对 MomBuildDir 的文件变化监视

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  watchChangeForMomBuildDir: false;
}

如何关闭强制的 ESLintrc 文件覆盖，使用自己的规则文件

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  enableExportEslintrcOverrideFileForIDE: false;
}

如何导出默认的 ESLint 规则配置文件到项目根目录

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  enableExportEslintrcOverrideFileForIDE: true;
}

如何在生产环境下关闭规则检测

/**
 * nuxt.config.js 部分源码
 **/

eslint: {
  disableForProductionEnv: true;
}