如何使用 ESLint 改善 JavaScript 代码质量

什么是 ESLint？

ESLint 是一个 JavaScript 代码检查工具，可以帮助我们发现代码中的错误、潜在的问题以及编码风格问题。通过使用 ESLint，我们可以知道如何改进代码质量，以便提高我们的开发效率和代码质量。

如何配置 ESLint？

1. 在项目初始化时安装 eslint

npm install --save-dev eslint

1. 局部/全局配置文件（推荐使用局部）

全局配置文件路径：~/.eslintrc.js

局部配置文件路径：项目根目录下的 .eslintrc.js

局部优先于全局。

1. 创建基本配置

在你的配置文件中添加以下行，以为你的 lint 环境设置一组基础规则：

// javascriptcn.com 代码示例
module.exports = {
  root: true, // 以当前目录为根目录，不再向上查找 .eslintignore 文件
  env: {
    browser: true, // browser 全局变量。开启浏览器环境。
    commonjs: true, // commonjs API 全局变量
    es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量
    node: true, // node.js 全局变量和作用域。
  },
  parserOptions: {
    ecmaVersion: 6, // 使用的 ECMAScript 版本
    sourceType: 'module', // 使用的 JS 模块化类型
    ecmaFeatures: {
      experimentalObjectRestSpread: true, //启用对对象字面量的扩展，允许在定义对象时使用 { ...a, ...b } 结构。
    },
  },
  extends: [
    'eslint:recommended', // eslint 推荐规则
  ],
};

常用 ESLint 规则

1. no-console

禁止在代码中使用 console，因为生产环境中不需要。

"no-console": "warn"

1. no-alert

禁止在代码中使用弹框。

"no-alert": "error"

1. no-unused-vars

禁止定义未使用的变量。

"no-unused-vars": "error"

1. semi

检查代码中是否忘记加分号。

"semi": ["error", "always"]

ESLint 插件

ESLint 使用插件的方式来增强其规则，可以使用社区编写的不同的插件，以满足你的代码检查需求。在 ESLint 的官方网站上，插件都有对应的文档，可以通过搜索找到。

目前比较流行的插件有：

1. eslint-plugin-react

专注于检测 React 代码。

npm install eslint-plugin-react --save-dev

1. eslint-plugin-import

专注于检查模块导入和导出。

npm install eslint-plugin-import --save-dev

1. eslint-plugin-jest

专注于检测 Jest 测试框架代码。

npm install eslint-plugin-jest --save-dev

应用示例

// javascriptcn.com 代码示例
module.exports = {
  root: true,
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  plugins: ['react-hooks', 'prettier'],
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  rules: {
    'no-console': 'warn',
    'no-var': 'error',
    'prefer-const': 'error',
    'no-empty': ['error', { allowEmptyCatch: true }],
    'no-extra-semi': 'error',
    'no-unused-vars': ['error', { ignoreRestSiblings: true }],
    semi: ['error', 'always'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'import/first': 'error',
    'import/newline-after-import': 'error',
    'import/no-duplicates': 'error',
    'prettier/prettier': [
      'error',
      {},
      {
        usePrettierrc: true,
      },
    ],
  },
};

总结

综上所述，使用 ESLint 的好处在于：优化代码质量，提高代码可读性，加快开发流程，提高代码的一致性和可维护性。通过使用 ESLint，可以保持代码风格的统一，以及避免常见的代码错误，提高开发质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6531df717d4982a6eb3df269