npm 包 eslint-config-fhfe 使用教程

前言

JavaScript 的灵活性也成为它的缺点。在开发时经常会出现变量名称不一致，缺少分号等问题，这些问题会被忽略导致代码风格混乱，不易于维护和协作。为了让开发变得更加规范，我们需要使用一些工具使代码风格更加一致，其中eslint是一个不错的选择。在这里我们将详细介绍一个npm包 eslint-config-fhfe 的使用方法。

简介

eslint-config-fhfe 是一个eslint的配置文件，它支持ECMAScript 6, 7和React，并且是根据腾讯这些年前端团队编码规范的实践而制定的，因此可以保证代码的可读性和可维护性。你可以在你的项目中使用它来做代码规范检查。

安装

使用npm安装

npm install eslint-config-fhfe

使用

eslint-config-fhfe 依赖于 eslint 和 eslint-plugin-react, 在使用前请先安装这两个依赖。

npm install eslint eslint-plugin-react

在根目录下创建 .eslintrc.json 配置文件，将eslint-config-fhfe 添加到 extends 属性中。

{
  "extends": "eslint-config-fhfe"
}

实例化一个代码检查对象并遍历你的代码文件夹进行检测。

eslint your_folder/

配置

如果您的项目对于某些规则有特殊要求，可以在 .eslintrc.json 文件中覆盖配置规则，其中 rules 属性规定了一个规则对象，每个key对应一个规则id，value是这个规则的选项和配置。

{
  "extends": "eslint-config-fhfe",
  "rules": {
    "no-eval": "off",
    "no-console": "off",
    "react/jsx-no-undef": "off"
  }
}

其中no-eval禁用 eval() 函数，no-console禁用console.log()等一些开发过程中常用的调试函数，react/jsx-no-undef 控制组件中未定义变量的报错。

指定浏览器环境

{
  "extends": "eslint-config-fhfe",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

上述配置中，我们指定了浏览器、Node.js、ECMAScript 6 这 3 种环境，这将使 ESLint 不会抛出对这些环境内置变量的未定义提示。

总结

通过使用eslint-config-fhfe，我们可以得到一个与腾讯前端开发规范一样的代码检测标准，为项目提供代码质量访问。同时，我们也了解了如何覆盖.eslintrc.json中的规则。

示例代码

使用eslint-config-fhfe检测如下代码：

import React, {Component} from 'react'
import {react} from 'global'

const MyComponent = () => (<div className='my-component'>
    MyComponent
</div>)

export default MyComponent

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