npm 包 eslint-config-liferay 使用教程

如果你是一名前端开发者，你一定会经常听到 ESLint 这个名词。ESLint 是一个非常流行的 JavaScript 代码静态检查工具，它可以帮助我们在编写代码的时候遵守一些最佳实践，从而提高代码的质量和可维护性。但是在实际的项目中，我们可能需要遵循特定的编码规范，这时候就需要用到 ESLint 的配置文件了。而今天我要介绍的是来自 Liferay 公司的一款 ESLint 配置包：eslint-config-liferay，下面就是使用教程。

安装

在使用 eslint-config-liferay 之前，我们需要先安装依赖的包。在命令行中输入以下命令即可安装：

yarn add eslint-config-liferay eslint prettier eslint-plugin-prettier eslint-config-prettier --dev

这里使用了 yarn 包管理器，如果你喜欢使用 npm，也可以使用 npm install 命令完成安装。

配置

在安装完成之后，我们需要在项目中创建一个 .eslintrc.js 文件，并引入 eslint-config-liferay：

module.exports = {
  extends: ['liferay'],
};

这里，我们通过 extends 关键字指定了 eslint-config-liferay 包，这意味着我们将按照 Liferay 公司的规范进行代码检查了。

除了引入 eslint-config-liferay，我们还需要引入 eslint-plugin-prettier 和 eslint-config-prettier。这两个包用于支持 Prettier 的格式化代码规则：

module.exports = {
  extends: ['liferay', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

这里的 rules 关键字用于指定自定义的规则，我们定义了一个 prettier/prettier 规则，将 Prettier 对于格式化代码的结果作为 ESLint 的错误返回。

如果你使用了 React，还需要额外引入 eslint-plugin-react 和 eslint-plugin-react-hooks：

module.exports = {
  extends: ['liferay', 'prettier', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
  plugins: ['prettier', 'react', 'react-hooks'],
  rules: {
    'prettier/prettier': 'error',
  },
};

使用

配置完成之后，我们就可以通过在命令行中执行 eslint [your code path] 或者 yarn eslint [your code path] 的方式检查代码了。这里我们需要注意，如果你的代码中有自定义的规则，你需要将 eslint-config-liferay 放在你的自定义规则之前：

module.exports = {
  extends: ['your rules', 'liferay', 'prettier'],
  plugins: ['your plugins', 'prettier'],
  rules: {
    'your rule': 'off',
    'prettier/prettier': 'error',
  },
};

总结

通过本篇文章的介绍，相信对于从事前端开发的小伙伴们来说，对于 eslint-config-liferay 的使用已经不再是难点了。不仅如此，文章中也提到了 eslint-plugins 和 eslint-configurations 的使用，读者朋友们可以再结合自己对于前端代码规范的理解，来对于自己使用 ESLint 检查前端代码的方式，做出更好的规范。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66400