前言
在日常的前端开发中，我们可能会用到很多技术工具和框架。其中，eslint 是一款非常流行的 JavaScript 代码检查工具，可以帮助我们检查代码风格和排查一些潜在的问题，在开发的过程中起到非常重要的作用。
但是，在实际应用中，我们发现配置 eslint 是一项非常琐碎的任务，并且我们需要选择一套规范，如 airbnb、standard 等，如果我们没有很好的理解和熟练掌握，就很难配置出符合自己需求的代码规范。
而今天，我们要介绍的 npm 包 @absolunet/eslint-config-nwayo 就是一个针对 nwayo 框架进行封装的 eslint 规范包。它包含了一套实用的代码规范和自定义的规则，能够帮助我们快速配置出符合 nwayo 规范的 eslint 配置，让我们能够更加专注于业务代码开发。
下面就让我们来详细了解并学习如何使用该 npm 包。
安装和使用
首先，我们需要在项目中引入该包。可以通过以下命令来进行安装：
npm install --save-dev @absolunet/eslint-config-nwayo
安装完毕后，我们需要在项目根目录下创建 .eslintrc 文件，并配置如下：
{
"extends": [
"@absolunet/nwayo"
]
}这里我们使用 @absolunet/nwayo 继承自 @absolunet/eslint-config-nwayo，就可以使用 nwayo 规范来检查代码了。
规范说明
下面，我们来详细介绍一下该规范的主要内容。
代码风格
在该规范中，代码风格方面做出了如下约定：
- 使用 2 个空格缩进。
- 使用单引号代替双引号。
- 区分开关键字和变量声明。
- 禁止使用
var，应该使用let或const来声明变量。 - 禁止在单行代码块中使用空格。
- 禁止在注释前使用空格。
自定义规则
除了一些基本的约定之外，该规范还包含了以下自定义规则：
nwayo/import-ordering
该规则要求 nwayo 组件在引入时，在第一组中始终按字母顺序排序，其他组根据使用情况排序。例如：
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import component from './component';
import styles from './styles.scss';
import utils from '../../../utils/index';nwayo/jsx-indent
该规则要求在所有的 jsx 属性中，都应该使用 2 个空格缩进。例如：
<MyComponent className="my-class" propOne="one" propTwo="two" />
nwayo/namespace-modules
该规则要求在所有 nwayo 项目中，不使用命名空间模块。即，不使用中划线命名方式，如 my-module。而应该使用驼峰式命名，如 myModule。
示例代码
下面，我们来看一下一些常见的错误代码，以及如何使用该规范检查。
var a = 1;
使用该规范，我们可以得到以下报错：
1:1 error Unexpected var, use let or const instead no-var
修改之后应该是这样的：
const a = 1;
再来看一个 nwayo 的组件引入的正确示例：
import React, { PropTypes } from 'react';
import component from './component';
import { connect } from 'react-redux';
import styles from './styles.scss';
import utils from '../../../utils/index';使用该规范之后，我们可以得到以下报错：
5:1 error Imports should be ordered: react before third-party, then components before subclasses, then siblings and styles in a group nwayo/import-ordering 6:1 error Unexpected indentation of 4 spaces nwayo/jsx-indent 7:1 error Unexpected indentation of 4 spaces nwayo/jsx-indent 9:1 error Unexpected indentation of 4 spaces nwayo/jsx-indent
我们可以根据这些报错，检查并修改我们的代码：
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import component from './component';
import styles from './styles.scss';
import utils from '../../../utils/index';通过以上示例，我们可以看出使用该规范可以帮助我们减少不必要的错误，并提高我们代码的质量和可维护性。
总结
到这里，我们详细介绍了如何使用和配置 npm 包 @absolunet/eslint-config-nwayo，以及该规范的主要内容和自定义规则。通过使用该规范，我们能够更加专注于业务代码开发，同时也能够及时发现和修正代码质量上的问题。希望本文能对您学习和使用该规范有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98192