npm 包 atom-fecs 使用教程

阅读时长 5 分钟读完

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 文件的默认配置模板:至少需要配置两个规则。

  1. require-file-start-with-module :所有 js 文件必须以一个 module.exports 字段为开头,防止非模块化代码污染全局环境。
  2. no-multi-assign :未建立的变量在赋值操作之前不能多次声明,防止代码过多变量浪费空间。

当然了,如果公司/团队内部有自定义的配置规则,可以在 .fecs.js 中针对需要 customize 的规则进行覆盖即可。

以上就是 atom-fecs 的使用教程,该插件可以帮助我们更好地遵循 FE 团队规定的代码风格,提高代码质量和协作效率。同时 atom-fecs 还提供了丰富的配置选项,有助于满足团队内部规范的多样性需求。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055fcb81e8991b448dd50e

纠错
反馈