什么是 @hasaki-ui/eslint-config-hsk-kayle
@hasaki-ui/eslint-config-hsk-kayle 是基于 ESLint 的一款前端代码规范工具。它是 @hasaki-ui 团队推出的一款专门针对 Vue 和 React 项目的代码规范。
安装
使用 npm 进行安装：
npm install --save-dev @hasaki-ui/eslint-config-hsk-kayle eslint
如果你的项目使用了 Vue，需要额外安装 eslint-plugin-vue：
npm install --save-dev eslint-plugin-vue
配置
在项目根目录新建一个 .eslintrc.js 文件，并添加如下配置：
module.exports = {
extends: [
'@hasaki-ui/eslint-config-hsk-kayle/vue',
// or '@hasaki-ui/eslint-config-hsk-kayle/react',
]
}你可以根据你的项目中使用的框架选择 vue 或 react 配置。
使用
你可以在 package.json 中通过如下方式给 eslint 添加一个脚本命令：
{
"scripts": {
"lint": "eslint src --ext .js,.vue --fix"
}
}然后在命令行中运行：
npm run lint
即可对 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