金诚集团 Javascript 编码规范

Usage

1.在项目根目录下安装 eslint-config-jcf：

npm install --save-dev eslint-config-jcf

• ps1. 安装本包会同时安装eslint、eslint-plugin-import、eslint-plugin-react这三个依赖包。因为这三个包需要安到根目录的node_modules下，所以peerDependencies和dependencies中都写了这三个包，保证npm2和npm3都可以把他们安到根目录的node_modules下。

2.在项目根目录创建.eslintrc文件，这是一个json格式的eslint配置文件，向其中添加"extends": "eslint-config-jcf"

对ES6项目

{
  "extends": "eslint-config-jcf",
}

对ES5项目

{
  "extends": "eslint-config-jcf/es5",
}

对react项目(es6环境)

{
  "extends": "eslint-config-jcf/react",
}

3.配置IDE

webstrom： 在Preferences里搜索eslint，按下图配置： EsLint package要选当前项目目录下node_modules中的eslint。

Atom： Atom是各IDE里对eslint支持最好的，需安装插件linter和linter-eslint，配色好看，报错的规则有链接，可直接点过去看，推荐使用：

配置完成后，编辑器即可实时显示eslint报错信息。 其他编辑器的配置请看官网的integrations

4.可以根据项目情况修改.eslintrc，下面是一份完整的.eslintrc文件示例：

{
  "extends": "eslint-config-jcf",
  "parser": "babel-eslint",
  "env": {
    "mocha": true
  },
  "globals": {
    "mytest": true
  },
  "rules": {
    "max-len": 0 //关闭最大长度限制
  }
}

配置文件参数解释：

• parser: 使用babel-eslint解析器代替eslint默认的解析器espree，推荐在使用babel的项目中使用。npm install babel-eslint --save-dev
• env: 说明代码的环境，不同环境下eslint会允许使用不同的全局变量，eslint-config-jcf,node,jquery环境
• globals: 在这里写上项目中用到全局变量，在这里设置后再代码中就不会报no-undef
• rules: 规则设置，对某条规则不满，可以在这里修改，然后告诉我补充到公共的eslint-config-ais里

更多参数说明请看官网的configuring

5.几条常用的eslint命令，可以将这3条命令写在package.json的script中：

// package.json
{
	...
	"scripts": {
	  "eslint": "node_modules/.bin/eslint src/",
	  "eslint-output": "node_modules/.bin/eslint -f html src/ > eslint-result.html",
	  "eslint-fix": "node_modules/.bin/eslint --fix src/"
	},
	...
}

• eslint src/ 对src目录下的文件执行eslint，可以使用--quiet参数只输出error不输出warn
• eslint --fix src/ 对src目录下的文件可修复的lint错误进行修复，可修复的属性见 这里，后面有小扳手的都是修复的属性。注意：修复缩进时可能会有问题（如空格、tab混用时），所以建议每次使用--fix命令后diff一下文件确认是否有问题。
• eslint -f html src/ > eslint-result.html 对src目录下的文件执行eslint，并将结果格式化为html输出到当前目录的eslint-result.html，此命令可以查看项目整体的eslint报错情况，若有持续集成，可以使用此命令进行扫描并形成html报告
• 注意：eslint命令默认只处理后缀为.js的文件，其他后缀的文件需要用命令行的--ext参数指定，目前不支持在配置文件中设置扩展名，只能在命令行中使用--ext参数指定，比如对于使用.jsx做后缀的项目上面三条命令要变为：

eslint --ext .jsx,.js src/
eslint --fix --ext .jsx,.js src/
eslint -f html --ext .jsx,.js src/ > eslint-result.html

• 注意：由于npm install本包后会将eslint安装到工程目录，上面命令中的eslint需要替换成node_modules/.bin/eslint。或者可以npm install -g eslint-config-jcf安装到全局，可直接使用eslint命令。但是写在package.json中的还是建议写成node_modules/.bin/eslint，因为无法保证其他人全局安装了eslint和相关的config。

其他命令行操作请看官网的command-line-interface

关于eslint更多的介绍 请看官网，报错的属性在官网搜索，即可看到详细的解释。 如果遇到接受不了的报错，可以先在.eslintrc的rules里修改，之后告知我补充到公共的eslint-config-jcf里：》

代码规范和本包的介绍

本包以『Airbnb编码规范』 作为规范，在它的基础上了做一层自己的修改。

包的结构如下图：

rules/的airbnb目录下是从eslint-config-airbnb(v.12.0.0)中摘出来的airbnb的规则，jcf/目录下是我们自己的规则，最后通过extends组合成es6.js, es5.js, react.js三个供引用的配置文件。

定制化部分

这里列出了不同于『Airbnb编码规范』的规则，主要是对一些规则报错级别的放松。

base

module.exports = {
  rules: {
    /**
     * best-practices
     */
    // 不允许修改函数的入参
    // airbnb推荐值：[2, { 'props': true }] disallow reassignment of function parameters and parameter object manipulation
    'no-param-reassign': 0,
    // 不允许不执行的表达式（需要函数调用或赋值） disallow usage of expressions in statement position
    // airbnb推荐值：2
    'no-unused-expressions': [2, { allowShortCircuit: true, allowTernary: true }],
    // for in循环中必须使用hasOwnProperty.call做判断
    // airbnb推荐值：2
    'guard-for-in': 0,
    // disallow the use of leading or trailing decimal points in numeric literals
    // airbnb推荐值：2
    'no-floating-decimal': 1,
    // disallow certain syntax forms
    // airbnb推荐值：'ForInStatement'也不允许
    'no-restricted-syntax': [
      2,
      'DebuggerStatement',
      'LabeledStatement',
      'WithStatement',
    ],
    // require return statements to either always or never specify values
    // airbnb推荐值：2，虽然合理，但很多老代码都没这么写，先改为warn
    'consistent-return': 1,
    // disallow else after a return in an if
    // airbnb推荐值：2，意义不大，先改为warn
    'no-else-return': 1,
    // requires to declare all vars on top of their containing scope
    // airbnb推荐值：2
    'vars-on-top': 1,
    // require the use of === and !==
    // airbnb推荐值：['error', 'allow-null']，降低报错级别
    eqeqeq: [1, 'allow-null'],

    /**
     * style
     */
    // 尽量使用驼峰命名
    // airbnb推荐值：[2, { 'properties': 'never' }]
    camelcase: [1, { properties: 'never' }],
    // disallow dangling underscores in identifiers
    // airbnb推荐值：[2, { 'allowAfterThis': false }]
    'no-underscore-dangle': 0,
    // enforces new line after each method call in the chain to make it
    // more readable and easy to maintain
    // airbnb推荐值：[2, { 'ignoreChainWithDepth': 3 }]
    'newline-per-chained-call': 0,
    // require function expressions to have a name
    // airbnb推荐值：1，我们的老代码里有很多用匿名函数的地方，所以先去掉这条规则
    'func-names': 0,
    // specify the maximum length of a line in your program
    // airbnb推荐值：[2, 100, ...]，先设为1并且扩大长度到200
    'max-len': [1, 200, 2, {
      ignoreUrls: true,
      ignoreComments: false
    }],
    // require a capital letter for constructors
    // airbnb推荐值：[2, { 'newIsCap': true }]，为了js-to-java包改一下
    'new-cap': [2, { newIsCap: true, properties: false }],
  },
  env: {
    // 默认打开常用环境
    browser: true,
    node: true,
    jquery: true
  }
};

es6

module.exports = {
  rules: {
    // 使用字符串模板代替字符串拼接。有些场景下，比如 $(item).attr('data-cnname') + '不能为空' 这种场景 比 ${$(item).attr('data-cnname')}不能为空 更清晰，所以用1，推荐但不强制
    // airbnb推荐值：2
    'prefer-template': 1,
    // enforces no braces where they can be omitted
    // airbnb推荐值：[2, 'as-needed']
    'arrow-body-style': [1, 'as-needed'],
    // require all requires be top-level
    // http://eslint.org/docs/rules/global-require
    // airbnb推荐值：'error'，因为babel中的有时会用到局部的require，如img的src，所以关掉
    'global-require': 0,
    // enforce that class methods use "this"
    // http://eslint.org/docs/rules/class-methods-use-this
    // 降低级别，改为warn
    'class-methods-use-this': [1, {
      exceptMethods: [],
    }],
    // 对象末尾的逗号：多行的对象可以加可以不加，单行的一定不能加
    // airbnb推荐值：es6: [2, 'always-multiline'], es5: [2, 'never']
    // 即ES6中需要使用末尾逗号，ES5中不允许使用末尾逗号；单行的对象，不允许使用末尾逗号
    'comma-dangle': [2, 'only-multiline'],

    /**
     * import plugin
     */
    // ensure imports point to files/modules that can be resolved
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
    // airbnb推荐值：[2, { 'commonjs': true }] 因为有的项目使用webpack的 resolve alias，先置为0
    'import/no-unresolved': 0,
    // disallow AMD require/define
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-amd.md
    // airbnb推荐值：2
    'import/no-amd': 0,
    // Forbid the use of extraneous packages
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
    // 有的工程里会用别名代替一个路径，这时本规则会报错，虽然eslint-import-resolver-webpack这类包可以解决，但需要额外安装包和配置，所以还是去掉
    'import/no-extraneous-dependencies': 0,
    // Ensure consistent use of file extension within the import path
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md
    // 同上，使用别名时会有问题，所以去掉
    'import/extensions': 0
  }
};

react

module.exports = {
  rules: {
    // Require stateless functions when not using lifecycle methods, setState or ref
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
    'react/prefer-stateless-function': 1,
    // Prevent usage of .bind() in JSX props
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
    'react/jsx-no-bind': [1, {
      ignoreRefs: true,
      allowArrowFunctions: true,
      allowBind: false,
    }],
    // Prevent missing props validation in a React component definition
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
    'react/prop-types': [1, { ignore: [], customValidators: [] }],
    // 降低级别，改为warn
    'class-methods-use-this': [1, {
      exceptMethods: [
        'render',
        'getInitialState',
        'getDefaultProps',
        'componentWillMount',
        'componentDidMount',
        'componentWillReceiveProps',
        'shouldComponentUpdate',
        'componentWillUpdate',
        'componentDidUpdate',
        'componentWillUnmount',
      ],
    }]
  }
};