从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范

1. 从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化
2. 从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置
3. 从零搭建前端开发环境（零）——扩展篇：3.jest单测
4. 从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范
5. 从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架

注：扩展篇里的内容，并不是建立项目的必要条件，属于可选范围。但是如果项目复杂到了一定程度，终究还是要面对的。

统一代码规范的重要性，相信稍微有点项目经验的同学一定会有所感触，光靠人为的约定限制，效果是无法保证的。所以eslint这种强制性的代码规范还是很有必要引入的，不过代码规范到底选择什么版本，估计选择困难症的同学会纠结了。那么就由我不负责任的来提供一套方案，据说airbnb号称史上最严格标准，那么我们就用它。

1、查看airbnb依赖并安装

我们现在只需要安装最基础的eslint-config-airbnb-base就可以了，react、vue什么的后文再说。

 

$ npm info "eslint-config-airbnb-base@latest" peerDependencies

 

我们会看到如下信息（版本信息要注意，不一定会跟这里一模一样）

{ eslint: '^4.9.0', 'eslint-plugin-import': '^2.7.0' }

 

接下来就是按照它的提示安装了，注意，你的版本很可能跟我的不一样，要写自己的，再加上一个eslint-import-resolver-webpack来兼容webpack。

$ npm i -D eslint-config-airbnb-base eslint@4.9.0 eslint-plugin-import@2.7.0 eslint-import-resolver-webpack

2、配置.eslintrc.js

新建.eslintrc.js

const path = require('path');
const root = __dirname;

module.exports = {
  root: true,
  extends: 'airbnb-base',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: path.resolve(root, 'config/webpack.base.js')
      }
    }
  }
}

还有.eslintignore（不过笔者发现用vscode如果在工作区不是直接引得demo目录，比如引得demo的父目录之类的，这个.eslintigonre不会生效，不过不影响eslint的自检查）

/config/
/dist/
/*.js
/test/**/coverage/
/test/**/reports/

之后，如果你用的vscode，就搜索eslint这个扩展（可以实时提示语法问题，虽不是必须，但是强烈推荐，如果电脑配置较低，有可能会很卡，往后看，还是有办法的），安装一下。然后，你就会看什么叫史上最严格标准……

运行下面的命令

$ ./node_modules/eslint/bin/eslint.js src/**/*.js

就可以看到它报告的结果，不要被吓到哦。写了这么久的代码，才发现我的代码竟然这么不规范。。。在上面的命令后面加上 --fix 可以修复部分警告。为了方便，我们在package.json的scripts里面加上一条命令（为了方便以后，我们把jsx也加进来了，反正影响不大，实在不需要删掉就好），来自动修复一些简单的格式。

"lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",

只要运行这条命令，就可以修复一些缩进之类的小问题了，大问题还是得自己修复的。

还有更狠的，如果我们装上了eslint-loader，那么你要是代码不符合规范，那每次开发时保存，都会一片片的飘红，甚至过不了。

$ npm i -D eslint-loader

webapck.base.js配置相应改一下

      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader','eslint-loader'],
      },

可以了，去修改你不规范的代码吧，编译不通过别怪我没提醒过啊～

3、配置展示

全部变化可看笔者的github记录，还是很清晰的。

package.json

{
  "name": "code-history",
  "version": "1.0.0",
  "description": "Use to show the change of code in blog!",
  "main": "index.js",
  "scripts": {
    "test": "jest --config config/jest.config.js",
    "prod": "webpack --config config/webpack.prod.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js --open",
    "lint": "node ./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx --fix",
    "start": "npm run dev"
  },
  "keywords": [],
  "author": "zhaolandelong@163.com",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.2",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.1.0",
    "jest": "^22.4.3",
    "jest-babel": "^1.0.1",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.3",
    "postcss-url": "^7.3.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.2",
    "webpack-merge": "^4.1.2"
  }
}

 

目录结构

 

demo    
  |- config/  
    |- jest.config.js  
    |- webpack.base.js    
    |- webpack.dev.js    
    |- webpack.prod.js    
  |- src/    
    |- assets/    
     |- logo.jpg  
    |- util/  
      |- index.js  
    |- index.css    
    |- index.js    
  |- test/  
    |- spec/  
      |- util.spec.js  
  |- .babelrc    
  |- .eslintignore
  |- .eslintrc.js
  |- .gitignore    
  |- .postcssrc.js    
  |- index.html    
  |- package.json