介绍
@36node/eslint-config
是一款前端开发常用的 ESLint 配置包,主要用于规范 JavaScript 代码的书写。该包基于 eslint 和 prettier 进行了自定义配置,在代码书写过程中能够发现代码中的错误和不规范的写法,并给出相应的提示和解决方案。该包已在多个项目中实际使用,并得到了良好的反馈。
安装
使用 npm 安装该包:
npm install @36node/eslint-config --save-dev
使用
配置文件
安装完成后,在项目的根目录下创建 .eslintrc.js
文件,并填入以下代码:
module.exports = { extends: [ "@36node/eslint-config" ], rules: { // 在这里可以添加/覆盖 eslint 的规则 } }
其中,extends
指定了使用的 eslint 配置,@36node/eslint-config
表示使用该包的配置。rules
可以用来添加和覆盖已有的规则,例如:
module.exports = { extends: [ "@36node/eslint-config" ], rules: { "no-console": "off" } }
以上配置中,我们关闭了 no-console
规则,运行时可以使用 console
。
在命令行中使用
该包也可以直接在命令行使用,命令为:
npx eslint <files...>
其中,<files...>
表示需要检测的文件或目录。
例如,我们想要检测 src
目录下所有的 JavaScript 文件,可以运行以下命令:
npx eslint src/**/*.js
在 VS Code 中使用
在 VS Code 中使用该包,需要安装 eslint
插件,并在工作空间的 settings.json
文件中添加以下配置:
-- -------------------- ---- ------- - ---------------------- ----- --------------------------- - ----------------------- ---- -- ------------------ - ------------- ------------------ ------------- ----------------- - -
以上配置中,editor.formatOnSave
表示在保存文件的时候格式化代码,editor.codeActionsOnSave
中的配置会在保存文件的时候自动修复 eslint 的错误,eslint.validate
指定了需要检测的文件类型。
示例代码
以下是一段使用了该包的示例代码:
-- -------------------- ---- ------- ----- - - - -------- ------ -- - -- ------- - --- -------- -- ------ - --- --------- - ----- --- -------- --- - ---- -- --------- - ------ - - - - - - ------------------ ---
在 VS Code 中,以上代码会被自动格式化并修复一些错误,如下图所示:
总结
通过使用 @36node/eslint-config
包,我们可以方便地在项目中使用 eslint,并规范代码书写。在不同的开发场景中,我们可以使用不同的 eslint 配置,以达到更高效地开发和更高质量的代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/155224