Atom 是一款在前端广受欢迎的代码编辑器,它有丰富的插件生态系统,使我们可以通过安装插件来扩展编辑器的功能。在这篇文章中,我将会教你如何使用一个非常有用的 npm 包 - atom-fecs,来提高你的代码风格检查质量。
atom-fecs 是什么?
atom-fecs 是一个基于 FEC 规范的 Atom 插件,它可以帮助我们在写代码时,遵循 FE 团队中关于代码风格的约定,而减少因代码风格不一致造成的错误以及团队内部的协作成本提高。具体 FE 规范请参考 FEC 规范。
atom-fecs 插件的特点:
- 支持多种编码风格检查,包括 js、html、css。
- 支持快捷键,可以一键执行检查命令。
- 支持自动修复非规范代码。
安装 atom-fecs
使用 atom-fecs 前,我们先要安装它。使用 Atom 插件管理器进行安装。
打开 Atom,打开「Preferences」菜单,选择「Install」标签。在搜索框中输入「atom-fecs」,找到这个插件,点击「install」进行安装。
使用 atom-fecs
安装完 atom-fecs 插件后,我们可以使用它提供的命令来进行代码风格检查和自动修复。
1. 代码风格检查
从 Atom 菜单栏选择「Packages」,找到「atom-fecs」插件,选择「Check File」或「Check Directory」,来执行代码风格检查。
Atom-fecs 插件可以检查多种文件格式中的风格,当然需要在 .fecs.js
配置中添加对应的配置,例如:check: ['js', 'html', 'htm', 'less', 'css'],
支持的文件类型包括:js, html, htm, css, less, json, md, markdown, compat.js
,所有的命令都会使用 .fecs.js
中的配置。
在命令执行之后,插件会在代码中找出需要改进的地方,并在 Atom 中提供相应的标记,同时弹出错误列表。我们可以通过这种方式以相对独立的方式完成代码风格检查。
2. 自动修复非规范代码
atom-fecs 提供了修复非规范代码的快捷键 ctrl+alt+f
,只需选中需要修复的部分,使用此快捷键即可自动修复这部分代码。
也可以通过 Package->atom-fecs->Auto Fix
来自动修复整个文件中不符合规范的代码。
atom-fecs 配置文件
atom-fecs 的配置文件分成两个部分:公共配置部分和对应类型的配置部分,即针对全部类型使用的配置和特定类型所使用的配置。
- common 配置项是针对所有文件的配置项
该文件默认名称是 .fecs.js
,所在目录为当前项目的根目录,下面是一个简单的例子:
-- -------------------- ---- ------- -- -------- -------------- - - -- ---------- ------ ------ ------- ------ ------- ------- -- ---- -------- --------- --- -- --------- -- - --- - ---- ------------- ---------------------- -- ----- ---- - --- ------- ---- --------- ---- ------ -- -------- -- ------ ---------- -- ------- ----------- -- -------- -------------- ------ ------- -- ------- ---------------------------- ----- ------------ -- -------------------- -------- ------ -- --- -
- 针对特定文件类型的部分配置
比如在 .fecs.js
中加入以下配置用以目录配置规范:
-- -------------------- ---- ------- -- -------- -------------- - - -- --------- ------ ------ ------- ------ ------- ------- -- ------------------- --- - -- -- -- ----- --------------------- --- ------ - -- -- --------------------- --------- ----------------- ------ -- --- - -- -- --- -
atom-fecs 配置模板
fecs-config.js
里面预设了项目里 *.fecs.js 文件的默认配置模板:至少需要配置两个规则。
require-file-start-with-module
:所有 js 文件必须以一个 module.exports 字段为开头,防止非模块化代码污染全局环境。no-multi-assign
:未建立的变量在赋值操作之前不能多次声明,防止代码过多变量浪费空间。
当然了,如果公司/团队内部有自定义的配置规则,可以在 .fecs.js
中针对需要 customize 的规则进行覆盖即可。
以上就是 atom-fecs 的使用教程,该插件可以帮助我们更好地遵循 FE 团队规定的代码风格,提高代码质量和协作效率。同时 atom-fecs 还提供了丰富的配置选项,有助于满足团队内部规范的多样性需求。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055fcb81e8991b448dd50e