ESlint 添加浏览器兼容检查 & 新增检查规则

Published on

2024 了还在整 Eslint..😶‍🌫️

快速开始： https://eslint.org/docs/latest/use/getting-started

npm init @eslint/config@latest
// (考虑一些旧的插件包，配置文件尽量使用.cjs文件，使用 CMS 规范)

添加浏览器兼容检测

ESLint 用于检测 JS 代码，通过一些规则和条件约束，给出警告/报错。对于具体代码在浏览器上的兼容，经常会需要使用 can i use 站点 来检查，而也有成熟的 ESlint 插件支持了浏览器兼容检测： eslint-plugin-compat

https://github.com/amilajack/eslint-plugin-compat

(eslint-plugin-compat 插件使用的是 browserslist, 专门用于为各个前端工具共享目标浏览器和 nodejs 版本)

browserslists 需要从自身的配置文件.browserslistrc或者package.json -> browserslists字段读取。根据实际代码中需要兼容的代码特性如 custom-element、fetch、promise、class 等，或者强制需要兼容的浏览器版本，添加 .browserslistrc 文件。 如：

    #  browserslist  主要取spz custom-element & fetch 兼容性
    #  浏览器平台和名称：https://github.com/browserslist/browserslist?tab=readme-ov-file#browsers

    defaults
    Chrome >= 54
    Edge >= 79
    Safari >= 10.1
    Baidu >= 13.52
    Opera >= 41
    ios_saf >= 10.3  # iOS edge safari chrome
    Samsung >= 5.4
    Android >= 129   # Android webview
    and_chr >= 129   # Android chrome edge
    Firefox >= 63
    FirefoxAndroid >= 130  # android Firefox
    and_uc >= 15.5   # android UC
    and_qq >= 14.9  # android QQ
    not ie < 11
    not op_mini all

添加 .browserslistrc 文件指定浏览器版本，安装插件并引入至配置文件 eslint.config.cjs :

const globals = require('globals')
const pluginJs = require('@eslint/js')
const liquid = require('@shoplazza/eslint-plugin-liquid')
const compat = require('eslint-plugin-compat')

module.exports = [
  {
    ...pluginJs.configs.recommended,
    files: ['theme/**/*.js', 'theme/**/*.liquid', 'theme-app/**/*.js', 'theme-app/**/*.liquid'],
    plugins: {
      liquid,
    },
    processor: 'liquid/liquid',
    languageOptions: {
      globals: globals.browser,
      sourceType: 'script',
    },
    rules: {
      // custom rules here
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'liquid/no-arrow-in-class': 'error',
    },
  },
  compat.configs['flat/recommended'],
]

完成后 npx eslint . 检查代码问题。

自定义规则禁止 class 中使用成员箭头函数

class 和箭头函数是 ES6 中引入的，单独使用加 babel 转一层一般不再需要额外处理。但如果直接在 Safari13 上，class + ()=> 不通过 babel 却会报错，如模板渲染文件直接插入的 JS，在 BrowserStack 上检测就会有问题：

在https://www.browserstack.com/上测试，需要到 safari 14(+)的版本才能正常运行。 根据项目约束使用模版语言，在 ESLint 里加上一条规则，class 中限制使用箭头函数。

  1. ESlint.config.cjs 中引入规则，设置为 error ：
  2. 同级新增目录 rules, 目录下新增文件 index.js, no-arrow-in-class.js
  • index.js :
    module.exports = {
  rules: {
    'no-arrow-in-class': require('./no-arrow-in-class'),
  },
}
  • no-arrow-in-class.js ：
    module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: '禁止在类内部使用箭头函数',
      category: 'Possible Errors',
      recommended: false,
    },
    schema: [], // No options
  },
  create: function (context) {
    return {
      ArrowFunctionExpression: function (node) {
        if (
          node.type == 'ArrowFunctionExpression' &&
          node.parent.type == 'PropertyDefinition' &&
          node.parent.parent.type == 'ClassBody'
        ) {
          context.report({
            node,
            message: '不允许在类内部使用箭头函数。',
          })
        }
      },
    }
  },
}

ESLint 新增规则参考：

已知问题记录：

  1. 使用较新的 Node 版本（20+）
  2. eslint.config.cjs 配置中 ， files 字段不要轻易变更，files: ["**/*.js", "**/*.liquid"], ** 任意目录， * 任意文件。在检测 html/liquid 文件时，也要带上 **/*.js 文件匹配，不写会不检测 html/liquid
  3. 执行 npx eslint . 之后，如果命令输出有检查出错误，但对应文件内没有对代码报错提示，可以重启 eslint server (command+shift+p, 输入 eslint，选择 Restart ESLint Server)