npm 包 @modulus/standard 使用教程

在前端开发过程中，有很多的样式规范和代码规范需要遵循，不仅有利于提高代码质量，也方便团队协作。这时候就需要使用一些工具来帮助规范代码，而 npm 包 @modulus/standard 就是一个很好的选择。

什么是 @modulus/standard？

@modulus/standard 是一个基于 ESLint 和 Prettier 的 JavaScript 和 TypeScript 代码风格规范工具，通过定义一些规范，自动修复代码中不符合规范的部分，并通过钩子函数来保证代码一直处于规范状态。

使用步骤

1. 安装

使用 npm 或 yarn 安装 @modulus/standard：

npm install @modulus/standard --save-dev

yarn add @modulus/standard --dev

1. 配置

在根目录创建 .eslintrc.js 和 .prettierrc.js 两个文件，并分别写入以下内容：

.eslintrc.js

module.exports = {
  extends: "@modulus/standard"
};

.prettierrc.js

module.exports = {
  ...require("@modulus/standard/.prettierrc.js")
};

1. 配置钩子函数

为了保证代码一直遵循规范，需要在 package.json 中添加如下钩子函数：

{
  "scripts": {
    "fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" && eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" && eslint \"src/**/*.{js,jsx,ts,tsx}\""
  }
}

其中，fix 命令表示自动修复代码中不符合规范的部分，check 命令则是检查代码是否符合规范。

1. 使用

可以通过以下两种方式来使用 @modulus/standard：

• 在编辑器中使用插件，如 VSCode 插件 ESLint 和 Prettier。当代码保存时，插件会自动修复不符合规范的部分。
• 在命令行中运行 npm run fix 命令，自动修复代码中不符合规范的部分。

示例代码

下面是一段 TypeScript 代码，使用 @modulus/standard 后，代码符合 TypeScript 代码规范：

-- -------------------- ---- -------
--------- ---- -
  ----- -------
  ---- -------
-

-------- ---------- ---- -
  ----- ---- - -
    ----- -----
    ---- --
  --
  ------ -----
-

总结

通过使用 @modulus/standard，可以简化代码规范的维护，提升代码质量，方便团队协作。不过需要注意的是，这个工具只是代码规范的一种体现，有时候需要针对具体的项目来进行调整。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447a9