ES6 中的 ESLint 插件技巧

在前端开发中，代码规范是非常重要的一环。为了保证代码的可读性、可维护性和可扩展性，我们需要使用代码规范工具来规范我们的代码。其中，ESLint 是一个非常流行的 JavaScript 代码规范工具。

在 ES6 中，由于新增了很多语法特性，如箭头函数、模板字符串、解构赋值等，所以我们需要使用 ESLint 插件来辅助我们进行代码规范检查。本文将介绍 ES6 中常用的 ESLint 插件及其使用技巧，帮助大家更好地使用 ESLint 进行代码规范检查。

1. eslint-plugin-import

eslint-plugin-import 是一个用于检查 import/export 语法规范的插件。它可以帮助我们检查 import/export 的路径、文件是否存在、是否使用了默认导入等问题。

安装

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

配置

在 .eslintrc.js 文件中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  plugins: ['import'],
  rules: {
    'import/no-unresolved': 'error',
    'import/named': 'error',
    'import/default': 'error',
    'import/namespace': 'error',
    'import/no-restricted-paths': 'error',
    'import/no-absolute-path': 'error',
    'import/no-dynamic-require': 'error',
    'import/no-internal-modules': 'error',
    'import/no-webpack-loader-syntax': 'error',
    'import/no-self-import': 'error',
    'import/no-cycle': 'error',
    'import/no-useless-path-segments': 'error',
    'import/export': 'error',
    'import/no-named-as-default': 'error',
    'import/no-named-as-default-member': 'error',
    'import/no-deprecated': 'warn',
    'import/no-extraneous-dependencies': 'warn',
    'import/no-mutable-exports': 'error',
    'import/first': 'error',
    'import/exports-last': 'error',
    'import/no-duplicates': 'error',
    'import/order': [
      'error',
      {
        groups: [['builtin', 'external'], 'internal', ['parent', 'sibling', 'index']],
        'newlines-between': 'always',
      },
    ],
  },
};

用法

在代码中，我们可以使用 import/export 语法进行模块化开发。使用 eslint-plugin-import 插件可以帮助我们检查 import/export 语法是否符合规范。

例如，我们在代码中使用了以下语法：

import { foo } from './foo.js';

使用 eslint-plugin-import 插件可以检查以下问题：

• ./foo.js 文件是否存在；
• ./foo.js 导出的 foo 是否存在；
• 是否使用了默认导入；
• 是否使用了命名空间导入等。

2. eslint-plugin-promise

eslint-plugin-promise 是一个用于检查 Promise 使用规范的插件。它可以帮助我们检查 Promise 是否正确使用了 then/catch/finally 等方法，以及是否正确处理了异常情况。

安装

npm install eslint-plugin-promise --save-dev

配置

在 .eslintrc.js 文件中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  plugins: ['promise'],
  rules: {
    'promise/always-return': 'error',
    'promise/no-return-wrap': 'error',
    'promise/param-names': 'error',
    'promise/catch-or-return': 'error',
    'promise/no-native': 'off',
    'promise/no-nesting': 'warn',
    'promise/no-promise-in-callback': 'warn',
    'promise/no-callback-in-promise': 'warn',
    'promise/avoid-new': 'off',
    'promise/no-new-statics': 'error',
    'promise/no-return-in-finally': 'error',
    'promise/valid-params': 'error',
  },
};

用法

在代码中，我们使用 Promise 进行异步编程。使用 eslint-plugin-promise 插件可以帮助我们检查 Promise 是否正确使用了 then/catch/finally 等方法，以及是否正确处理了异常情况。

例如，我们在代码中使用了以下语法：

new Promise((resolve, reject) => {
  // 异步操作
}).then((result) => {
  // 处理结果
}).catch((error) => {
  // 处理异常
});

使用 eslint-plugin-promise 插件可以检查以下问题：

• 是否正确处理了异常情况；
• 是否正确使用了 then/catch/finally 等方法；
• 是否正确处理了 Promise 返回值等。

3. eslint-plugin-react

eslint-plugin-react 是一个用于检查 React 代码规范的插件。它可以帮助我们检查 React 组件的命名、属性、事件等规范。

安装

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

配置

在 .eslintrc.js 文件中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  plugins: ['react'],
  extends: ['plugin:react/recommended'],
  rules: {
    'react/display-name': 'off',
    'react/prop-types': 'off',
    'react/no-unused-prop-types': 'error',
    'react/no-unused-state': 'error',
    'react/no-typos': 'error',
    'react/no-unsafe': 'error',
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-no-target-blank': 'error',
    'react/jsx-no-undef': 'error',
    'react/jsx-fragments': ['error', 'syntax'],
    'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
    'react/jsx-curly-newline': ['error', { multiline: 'consistent', singleline: 'consistent' }],
    'react/jsx-curly-spacing': ['error', { when: 'always', children: true }],
    'react/jsx-wrap-multilines': ['error', { declaration: true, assignment: true, return: true }],
    'react/jsx-indent': ['error', 2, { checkAttributes: true, indentLogicalExpressions: true }],
    'react/jsx-indent-props': ['error', 2],
    'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'always' }],
    'react/jsx-one-expression-per-line': ['error', { allow: 'literal' }],
    'react/jsx-closing-bracket-location': ['error', 'tag-aligned'],
    'react/jsx-closing-tag-location': 'error',
    'react/jsx-tag-spacing': ['error', { beforeSelfClosing: 'always' }],
    'react/jsx-boolean-value': ['error', 'never'],
    'react/jsx-pascal-case': 'error',
    'react/jsx-sort-props': ['error', { callbacksLast: true, shorthandFirst: true }],
    'react/jsx-sort-default-props': ['error', { callbacksLast: true }],
    'react/jsx-sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
    'react/jsx-handler-names': ['error', { eventHandlerPrefix: 'handle', eventHandlerPropPrefix: 'on' }],
    'react/no-access-state-in-setstate': 'error',
    'react/no-array-index-key': 'error',
    'react/no-danger': 'error',
    'react/no-danger-with-children': 'error',
    'react/no-deprecated': 'error',
    'react/no-did-mount-set-state': 'error',
    'react/no-did-update-set-state': 'error',
    'react/no-direct-mutation-state': 'error',
    'react/no-find-dom-node': 'error',
    'react/no-is-mounted': 'error',
    'react/no-multi-comp': ['error', { ignoreStateless: true }],
    'react/no-redundant-should-component-update': 'error',
    'react/no-render-return-value': 'error',
    'react/no-set-state': 'off',
    'react/no-string-refs': 'error',
    'react/no-this-in-sfc': 'error',
    'react/no-unescaped-entities': 'error',
    'react/no-unknown-property': 'error',
    'react/no-unused-prop-types': 'error',
    'react/prefer-es6-class': ['error', 'always'],
    'react/prefer-stateless-function': 'error',
    'react/require-default-props': 'error',
    'react/require-optimization': 'off',
    'react/self-closing-comp': 'error',
    'react/sort-comp': [
      'error',
      {
        order: [
          'static-variables',
          'static-methods',
          'instance-variables',
          'lifecycle',
          'rendering',
          'methods',
          'everything-else',
        ],
        groups: {
          rendering: ['/^render.+$/', 'render'],
        },
      },
    ],
    'react/state-in-constructor': ['error', 'never'],
    'react/static-property-placement': 'error',
    'react/style-prop-object': 'error',
    'react/void-dom-elements-no-children': 'error',
  },
};

用法

在代码中，我们使用 React 进行组件化开发。使用 eslint-plugin-react 插件可以帮助我们检查 React 组件的命名、属性、事件等规范。

例如，我们在代码中使用了以下语法：

// www.javascriptcn.com code example
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;

使用 eslint-plugin-react 插件可以检查以下问题：

• 组件是否正确命名；
• 组件是否正确继承自 React.Component；
• 组件是否正确使用了 state/props；
• 组件是否正确处理了事件等。

结语

ESLint 插件是帮助我们进行代码规范检查的重要工具。本文介绍了 ES6 中常用的 ESLint 插件及其使用技巧，希望能够帮助大家更好地使用 ESLint 进行代码规范检查。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d33e33a941bf71346201ff