作为前端人员，代码规范是非常重要的一个方面。eslint 是一个非常流行的 JavaScript 代码检查工具，可以大大提高代码质量和可维护性。为了减少在配置 eslint 上的时间，开发者会封装很多 eslint 配置包。本文将介绍一个非常好用的 eslint 配置包：eslint-config-sagastandard。
什么是 eslint-config-sagastandard？
eslint-config-sagastandard 提供了一套与 JavaScript Standard Style 相似的代码规范，它包含了常见的 lint 规则，用于检查常见的代码错误和约定。
该包基于 airbnb 的 eslint-config-airbnb 和 eslint-plugin-react，但是通过大量的封装和使用经验，把配置调整得更加符合中文开发者的使用习惯和项目特点。
如何使用？
安装
npm install eslint eslint-config-sagastandard eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks --save-dev
配置
在根目录创建一个文件 .eslintrc.js 或者在 package.json 中的 eslintConfig 字段里配置相关内容。
-- -------------------- ---- -------
-
---------- -
--------------
--
-------- -
-- -------------------------
------- --- ---------
--------- --- ----------
------------------- -----
-
-检查
在终端中运行：
eslint your-file.js
可以检查你的代码是否符合 eslint 规范，如果没有错误则不会有输出。
配置说明
ESLint
在使用 eslint-config-sagastandard 之前需要安装 ESLint 和 eslint-plugin-import。
npm install eslint eslint-plugin-import --save-dev
React
如果你的项目中使用了 React，那么你需要安装 eslint-plugin-react。
npm install eslint-plugin-react --save-dev
React Hooks
如果你的项目中使用了 React Hooks，那么你需要安装 eslint-plugin-react-hooks。
npm install eslint-plugin-react-hooks --save-dev
配置文件说明
| 文件名 | 描述 |
|---|---|
| .eslintrc.js | 项目 ESLint 配置文件，如果你选择在 package.json 中配置，则不需要这个文件 |
| index.js | 项目主要代码，暴露了所有的 ESLint 规则，你的配置会继承这里的规则 |
| react.js | 如果项目中使用了 React，需要加载这个配置文件，在 index.js 中已经默认引入 |
| hooks.js | 如果项目中使用了 React Hooks，需要加载这个配置文件，在 react.js 中已经默认引入了 |
配置规则说明
在 .eslintrc.js 文件中，你可以调整或者关闭某个规则，如果不需要可以不写。这里列出一些常用的配置项：
| 配置项 | 描述 |
|---|---|
| "indent" | 缩进规则，number 或者 "tab" |
| "quotes" | 使用双引号 " 或者单引号 ' |
| "semi" | 句末是否使用分号 ; |
| "no-console" | 禁止使用 console |
| "no-debugger" | 禁止使用 debugger |
| "no-unused-vars" | 变量定义了但是没用过 |
| "no-param-reassign" | 禁止篡改参数的值 |
| "react/jsx-uses-react" | 检查 jsx 语法是否引入了 React |
| "react/jsx-uses-vars" | 检查 jsx 是否使用了已经声明的变量 |
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
----- --- - -- -- -
----- ---- - -- -- -------- --
----- ----------- - - -- -
------------------
----------------------
-
------ -
--
---------- -- --------------------- --- ---- ---------------- ---
------- ---------------------- ----- --- ---------
---
-
-
------ ------- ---总结
eslint-config-sagastandard 提供了非常丰富的代码规范，它可以有效地提升代码的可维护性和可读性。组件化开发的趋势下，更好的代码规范可以加快项目开发的进度。本文提供了非常详细的使用指导，相信你会很快使用起来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f781e8991b448d5101