什么是 @hasaki-ui/eslint-config-hsk-kayle
@hasaki-ui/eslint-config-hsk-kayle 是基于 ESLint 的一款前端代码规范工具。它是 @hasaki-ui 团队推出的一款专门针对 Vue 和 React 项目的代码规范。
安装
使用 npm 进行安装：
--- ------- ---------- ---------------------------------- ------
如果你的项目使用了 Vue，需要额外安装 eslint-plugin-vue：
--- ------- ---------- -----------------
配置
在项目根目录新建一个 .eslintrc.js 文件，并添加如下配置：
-------------- - -
-------- -
-----------------------------------------
-- -- -------------------------------------------
-
-你可以根据你的项目中使用的框架选择 vue 或 react 配置。
使用
你可以在 package.json 中通过如下方式给 eslint 添加一个脚本命令：
-
---------- -
------- ------- --- ----- -------- ------
-
-然后在命令行中运行：
--- --- ----
即可对 eslint 进行代码检查和自动修复。
高级配置
如果你想要对一些规则进行覆盖或自定义，可以在配置文件中添加：
-------------- - -
-------- -
-----------------------------------------
--
------ -
-- --- ---- ----- ----
--
-------- -
-- --- ---- ------- ----
--
-示例
下面是一个使用 @hasaki-ui/eslint-config-hsk-kayle 的 Vue 单文件组件示例：
----------
-----
------ ----- -------
----
--- ----------- -- ------ ----------------- --------- -------
-----
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
----- -------
-------- ------- -------
--
------ -
----- ------
-------- -- -- --
-
--
--------- -
------------- -
------ ------------------- -- -- ---- - -----
-
-
-
---------运行 npm run lint，你会发现该组件中的代码符合 @hasaki-ui/eslint-config-hsk-kayle 的代码规范，同时也是 Vue 的官方规范。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005773081e8991b448eac89