介绍
在前端开发的过程中,我们希望保持代码的规范性,一种常用的方式是使用 ESLint 进行代码检查。而 eslint-config-finn 这个 npm 包则提供了基于 finscn 的代码规范配置,使用了 eslint,prettier 和 husky 等工具。使用这个包可以方便我们快速设置和使用 finscn 的代码规范进行代码检查。
安装
使用 npm 来安装 eslint-config-finn,可以在命令行中输入:
npm install --save-dev eslint-config-finn
配置
在项目中使用 eslint-config-finn 时,需要在根目录下创建一个 .eslintrc.js 文件,并进行如下配置:
module.exports = { "extends": ["finn"] }
这里我们使用了一个 extends 属性,并将值设置为 "finn"。这个配置告诉了 ESLint 来继承 finn 的代码规范。
在项目中使用
接下来我们需要在项目中使用 ESLint 进行代码检查,可以在 package.json 文件中增加如下配置:
-- -------------------- ---- ------- - ---------- - ------- ------- -- -- -------- - -------- - ------------- ---- --- ----- - - -
这里我们增加了一个 lint 脚本,用来进行代码检查,同时通过 husky 钩子,在提交代码之前自动进行代码检查。
示例代码
我们来看一下下面这段代码,它违反了 finscn 的代码规范。
const lodash = require('lodash'); const path = require("path")
通过 eslint-config-finn 的检查,会有如下的提示信息:
-- -------------------- ---- ------- --- ----- ---- ------- ---------- ------ ---- ----- -- ---------------------- ----------------- -------------- --------------------------------- ---- ----- ---------- ----- ------ --- ------- ------------------ ---- ----- --------- --- -------------------------------- --- ----- -------- ----------- -- - ------ --- ----- - --- ------ --- ----- ---------- ------------------ - - -------- -- ------- - ---------
修改后的示例代码如下:
"use strict"; import lodash from 'lodash'; import path from "path";
结论
通过本文的介绍,你已经了解了如何使用 eslint-config-finn 来进行代码检查。同时这个方法也可以用于其他 npm 包的使用,只需要按照上述步骤进行配置即可。本文也提供了示例代码,可以帮助你更好的理解如何使用这个方法。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67743