eslint 换行_eslint 常用配置

前言

在团队协作开发中，为了统一代码风格，避免一些低级错误，应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能，JavaScript也有类似的工具：ESLint。除了可以集成到构建工具中(如：Gulp)在构建过程中检查代码风格以外；还可以通过将ESLint和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code使用ESLint来提供代码风格的实时校验。

配置原则

能够帮助发现代码错误的规则，全部开启

配置不应该依赖于某个具体项目，而应尽可能的合理

帮助保持团队的代码风格统一，而不是限制开发体验

配置解读

每一条配置都有注释说明此配置的用途

对于理解困难的配置，都在注释中有举例

对于有争议的配置，都在注释中说明了为什么要这么配置的原因

对于关闭掉的配置，都在注释中有对应的原因说明，以及 @off 的标识

对于能够 autofix 的配置，都在注释中有标注 @autofix

EsLint提供以下支持：

ES6

AngularJS

JSX

Style检查

自定义错误和提示

EsLint提供以下几种校验：

1.语法错误校验

2.不重要或丢失的标点符号，如分号

3.没法运行到的代码块(使用过WebStorm的童鞋应该了解)

4.未被使用的参数提醒

5.漏掉的结束符，如}

6.确保样式的统一规则，如sass或者less

7.检查变量的命名

详细的配置内容在这里：

/**

* AlloyTeam ESLint 规则 - React

*

* 包含所有 ESLint 规则，以及所有 eslint-plugin-react 规则

* 使用 babel-eslint 作为解析器

*

* @fixable 表示此配置支持 --fix

* @off 表示此配置被关闭了，并且后面说明了关闭的原因

*/

module.exports = {

extends: [

'./index.js',

],

plugins: [

'react'

],

rules: {

// 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头

// @off 不强制要求写 propTypes

'react/boolean-prop-naming': 'off',

// 一个 defaultProps 必须有对应的 propTypes

// @off 不强制要求写 propTypes

'react/default-props-match-prop-types': 'off',

// 组件必须有 displayName 属性

// @off 不强制要求写 displayName

'react/display-name': 'off',

// 禁止在自定义组件中使用一些指定的 props

// @off 没必要限制

'react/forbid-component-props': 'off',

// 禁止使用一些指定的 elements

// @off 没必要限制

'react/forbid-elements': 'off',

// 禁止使用一些指定的 propTypes

// @off 不强制要求写 propTypes

'react/forbid-prop-types': 'off',

// 禁止直接使用别的组建的 propTypes

// @off 不强制要求写 propTypes

'react/forbid-foreign-prop-types': 'off',

// 禁止使用数组的 index 作为 key

// @off 太严格了

'react/no-array-index-key': 'off',

// 禁止使用 children 做 props

'react/no-children-prop': 'error',

// 禁止使用 dangerouslySetInnerHTML

// @off 没必要限制

'react/no-danger': 'off&#