从零搭建前端开发环境(零)——扩展篇:4.eslint统一代码规范

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

统一代码规范的重要性,相信稍微有点项目经验的同学一定会有所感触,光靠人为的约定限制,效果是无法保证的。所以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  

展开阅读全文

没有更多推荐了,返回首页