AIS Javascript 编码规范

Usage

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

npm install --save-dev eslint-config-ais

> - ps1. 安装本包会同时安装eslint、eslint-plugin-import、eslint-plugin-react这三个依赖包。因为这三个包需要安到根目录的node_modules下，所以peerDependencies和dependencies中都写了这三个包，保证npm2和npm3都可以把他们安到根目录的node_modules下。
> - ps2. 对于以前安过 eslint-config-ais 包（0.0.11之前的版本）的工程，需要先执行下面命令清一下旧的包：npm uninstall eslint-config-ais eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

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

对ES6项目

``json
{
"extends": "eslint-config-ais",
}
`

对ES5项目

`json
{
"extends": "eslint-config-ais/es5",
}
`

对react项目(es6环境)

`json
{
"extends": "eslint-config-ais/react",
}
`

3.配置IDE

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

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

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


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

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

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

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


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

`json
// 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报错情况，线上也将使用此命令进行扫描
- 注意：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-ais安装到全局，可直接使用eslint命令。但是写在package.json中的还是建议写成node_modules/.bin/eslint，因为无法保证其他人全局安装了eslint和相关的config。

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


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




代码规范和本包的介绍

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

包的结构如下图：

!screenshot

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




$3

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

#### base

`javascript
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

`javascript
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
}
};

`

$3


`javascript
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',
],
}]
}
};
``

#### es5

暂无