JavaScript代码质量及eslint

1

一、高质量代码标准

1. 精简 - 冗余性少

2. 重用 - 预见性好

3. 有序 - 阅读性好

2

3

三、eslint的使用

1、本地安装

如果你想包括ESLint作为你的项目构建系统的一部分,我们建议在本地安装。你可以使用npm:

npm install eslint -D

初始化一个配置文件:

./node_modules/.bin/eslint --init

运行eslint检测文件

./node_modules/.bin/eslint yourfile.js

2、全局安装

如果你想让ESLint可用到所有的项目,我们建议安装ESLint全局安装。你可以使用npm:

npm install eslint -g

初始化一个配置文件:

eslint --init

运行eslint检测文件

eslint yourfile.js

3、在项目根目录编写配置文件： .eslintrc

4、推荐的配置和插件

1. eslint-config-standard

2. eslint-config-airbnb

3. eslint-plugin-react

4. eslint-plugin-import

5. eslint-plugin-jsx-a11y

4

四、eslint在sublime text3中使用

1、先安装两个nodejs插件 {:.text-info}

npm install eslint -g

npm install babel-eslint -g

2、在sublime里安装eslint插件

1. 安装 SublimeLinter

2. 调出package      control搜索SublimeLinter进行安装

3. 安装 SublimeLinter-contrib-eslint

4. 调出package control搜索eslint安装即可，全名：SublimeLinter-contrib-eslint。注意：该插件只支持Sublime      text 3

5. SublimeLinter-eslint 替换      SublimeLinter-contrib-eslint

3、sublime中的效果

5

五、eslint在webpack中使用

1、在webpack配置中使用eslint加载器了。

2、也可以创建文件.eslintrc 并引入 webpack.config.js

3、使用webpack的preLoaders

4、webpack3 的配置

5、webpack执行效果

6

六、eslint在git中使用

1、安装git钩子

npm install husky@next -D

另一个git钩子 pre-commit

2、配置package.json

3、提交代码后的效果

7

七、eslint的自定义规则

1、eslint的原理 JavaScript解析

2、AST解析与规则开发工具

http://astexplorer.net/

3、创建一个简单的规则

4、eslint的规则脚手架

generator-eslint

npm install -g yo

npm install -g generator-eslint

generator-eslint使用

yo eslint:plugin

yo eslint:rule

5、安装本地eslint-plugin

npm install -D ./eslint-plugin-my

6、自定义规则的配置

7、自定义规则的效果