介绍
eslint-config-tidy 是一个基于 eslint 的前端开发工具，用于规范 JavaScript/TypeScript 代码风格和书写习惯。它提供了一套常见的代码规则和最佳实践，有助于团队内统一代码风格，从而提高协作和维护效率。
安装和配置
首先，需要在项目中安装 eslint 和 eslint-config-tidy：
npm install --save-dev eslint eslint-config-tidy
然后，在 .eslintrc.js 文件中配置 tidy 配置项：
module.exports = {
extends: ['tidy'],
// 其他配置...
};如果你的项目使用 TypeScript，可以使用 tidy/typescript 配置：
module.exports = {
extends: ['tidy/typescript'],
// 其他配置...
};规则说明
eslint-config-tidy 的规则包括但不限于以下几类：
基本规则
no-unused-vars：禁止未使用的变量。no-empty：禁止空块语句（例如，只有一个分号的语句）。no-multi-spaces：禁止多余的空格。no-trailing-spaces：禁止行尾空格。curly：强制所有控制语句使用一致的括号风格。eqeqeq：禁止使用==和!=，应该使用===和!==。
ES6 规则
arrow-body-style：要求箭头函数体使用块语句。arrow-parens：要求箭头函数的参数使用圆括号。no-confusing-arrow：禁止在可能会被误解为箭头函数的地方使用箭头操作符。prefer-const：要求使用const声明不会被重新赋值的变量。template-curly-spacing：强制模板字符串中空格的使用方式。
React 规则
react-hooks/rules-of-hooks：强制在 React 函数组件中使用 Hooks。react-hooks/exhaustive-deps：检查 React 的依赖项数组是否正确。react/jsx-indent：强制 JSX 的缩进规则。react/jsx-wrap-multilines：强制 JSX 的多行元素包裹规则。
示例代码
-- -------------------- ---- -------
-- ------------
-------------- - -
-------- ---------
-------------- -
------------ -----
----------- ---------
------------- -
---- -----
--
--
---- -
-------- -----
----- -----
---- -----
--
------ -
-- --------
--
--
-- --------
----- --- - --- -- -- - - --
------------------ ----
-- -------
------ ----- ---- --------
-------- ---------- -
----- - ----- - - ------
------ -----------------
-
------ ------- ----总结
eslint-config-tidy 可以帮助我们遵循一些常见的代码规则和最佳实践，从而提高代码质量和协作效率。在使用时，可以根据自己的需要进行配置，扩展或覆盖默认规则，从而达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42565