采用 JavaScript 开发时，代码风格的统一化是非常必要的。而我们可以使用 ESLint 来对代码风格进行校验和规范。本文将着重介绍使用 ESLint 的一个配置包——eslint-config-classeur。
ESLint 的作用和作用范围
ESLint 是一个静态代码分析工具，它能够帮助我们检查 JavaScript 代码的风格和逻辑错误，以保证代码的代码质量。ESLint 主要实现以下功能：
- 校验代码风格
- 语法检查
- 安全检查
ESLint 校验范围包括 JavaScript 文件，Vue 文件，React 文件等。
eslint-config-classeur
eslint-config-classeur 是一个由 Classeur 团队开发的 ESLint 配置包，它封装了一套严格的代码规范，作为一个轻量级的代码规范方案使用。
其包含的规则覆盖了变量声明、函数声明、命名、控制流、注释、模块化等方面。通过 eslint-config-classeur 配置后，我们的代码规范性将更加统一化。
安装
安装 eslint-config-classeur 及其所需的依赖包：
npm i -D eslint-config-classeur eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
配置
进行全局配置
在你的项目根目录下创建并编辑 .eslintrc.js 文件，加入以下内容：
module.exports = {
extends: [
'eslint-config-classeur'
]
};进行局部配置
如果你只想在某个模块内使用 eslint-config-classeur，可以进行以下配置：
module.exports = {
extends: [
'classeur'
]
};rules 规则
eslint-config-classeur 定义了一些规则，这些规则在我们进行代码开发时需要注意。它们包括：
- 语法样式
- 变量申明样式
- 函数申明样式
- 控制流规则
- 模块化规则
- 注释规则
详细的规则可以在 eslint-config-classeur 的 github 仓库中查看。
示例代码
通过使用 eslint-config-classeur 配置后，我们将会严格规范化代码风格。下面是使用 eslint-config-classeur 和 vue-cli 搭建的 Vue 应用的示例代码：
-- -------------------- ---- -------
----------
---- --------------
----- -----
------
-----------
--------
------ ------- -
----- -------------
------- -- -
------------------ -------
--
-------- -
----------- -- -
----------------------
-
-
-
---------
------ -------
------ -
---------- -----
-
--------结论
本文简介了 ESLint、eslint-config-classeur 的基本介绍、安装使用方法、rules 规则以及示例代码。学习使用 eslint-config-classeur 不仅能统一代码风格，提升代码质量，同时也可以增强团队合作效率，和避免不同开发者对同一项目的代码风格看法不同所带来的混乱。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f180a9e403f2923b035c406