使用 eslint-config-twolfson npm 包的教程

简介

eslint-config-twolfson 是一个用于 ESLint 的 npm 包，它为 JavaScript/TypeScript 项目提供了一个严格的代码风格。它基于 Airbnb's JavaScript Style Guide 和 Google's TypeScript Style Guide ，并根据作者自己的经验进行了修改。在本文中，我们将探讨如何使用这个包来改善你的前端项目。

安装

首先，在你的项目中安装 eslint-config-twolfson 和相关依赖：

npm install --save-dev eslint eslint-config-twolfson eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

然后，创建 .eslintrc.json 文件，并将以下内容添加到文件中：

{
  "extends": ["twolfson"]
}

这将告诉 ESLint 使用 eslint-config-twolfson 中定义的规则。

配置

默认情况下，eslint-config-twolfson 支持 JavaScript 和 TypeScript。如果你只想使用其中一种语言，可以按如下方式更改 .eslintrc.json：

JavaScript

{
  "extends": ["twolfson/configurations/es6"]
}

TypeScript

{
  "extends": ["twolfson/configurations/typescript"]
}

React

如果你的项目中使用了 React，则需要按如下方式更改 .eslintrc.json：

{
  "extends": ["twolfson/configurations/react"]
}

注意，这个配置扩展了 twolfson/configurations/typescript，因此如果你正使用 TypeScript，则不需要同时添加这两个配置。

使用

现在，在你的项目中运行 ESLint：

npx eslint .

这将检查目录中的所有文件，并显示错误和警告。你可以通过以下方式解决它们：

• 手动更正问题： 如果你认为某个问题是一个错误，请修复它。否则，你可以忽略它或者禁用它。

• 禁用指定规则： 在 .eslintrc.json 中添加以下内容来禁用特定规则：

  {
    "rules": {
      "rule-name": "off"
    }
  }

• 重写规则： 在 .eslintrc.json 中添加以下内容来重写默认规则：

  {
    "rules": {
      "rule-name": "error"
    }
  }

示例代码

以下是一个示例 JavaScript 文件，它违反了 eslint-config-twolfson 中的一些规则：

const foo = 'bar';

if (foo == 'bar') console.log('Hello, world!');

function MyComponent(props) {
  return <div>{props.text}</div>
}

运行 npx eslint . 后，你将看到以下输出：

/path/to/file.js
  1:1  error    unexpected var, use let or const instead              no-var
  3:15 error    Expected '===' and instead saw '=='                     eqeqeq
  4:36 warning  Unnecessary semicolon                                  semi
  6:28 error    Missing return type on function                          @typescript-eslint/explicit-module-boundary-types
  7:16 error    'props' is missing in props validation                    react/prop-types

修复这些问题后，文件将如下所示：

-- -------------------- ---- -------
----- --- - ------

-- ---- --- ------ -
  ------------------- ---------
-

-------- ------------------ -
  ------ ------------------------
-

--------------------- - -
  ----- ---------------------------
--

现在，运行 npx eslint . 将不会输出任何东西，因为你的代码符合了 eslint-config-twolfson 中定义的规则。

结论

使用 eslint-config-twolfson 可以帮助你改善 JavaScript/TypeScript 项目的代码

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