前端工程化(webpack-eslint)

前面讲了,wepack一些相关的知识,这里集成一下eslint的相关配置。
首先安装对应模块:

  • 安装eslint模块
  • 安装eslint-loader模块
  • 初始化 .eslintrc.js文件配置

安装完成后先初始化配置:
yarn eslint --init
然后回答一些问题:
1.我们选择检查语法,发现问题,执行统一代码风格
2.模块化这里我们使用javascript modules(es6语法)
3.我们目前假设说配置的是个react项目,选react
4.我们这里使用ts,选yes(使用ts的时候要先把ts安装下来,不然后续操作会报错)
5.最终我专门这个工程运行时浏览器Browser
6.我们使用市面上主流风格 选择了第一个 (使用了开源社区的规范Standard: https://github.com/standard/s...
7.配置文件使用了js格式
8.最后自动安装一些其他的包
最后配置文件js
image.png
如果有一些全局要用的东西可以添加,例如jQuery
globals:{

"jQuery":"readonly"

}

eslint配置注释
http://eslint.cn/docs/user-gu...

webpack 中loader配置
image.png

然后就是eslint结合git hooks钩子在提交之前检测代码
使用husky
首先进行安装

npm install husky --save-dev

然后对应package.json配置
image.png
husky属性配置 pre-commit 这个git钩子阶段,来进行我们的npm run test来进行检查
然后 npm scripts里对应添加test命令,

test: "eslint --ext .js,.vue src/"

我们检测src目录下的所有文件.

我们可以手动在添加一个修复命令用来手动执行

test:"eslint --fix --ext .js,.vue src/"

也可以git commit时自动格式化然后再add回来:
首先安装

npm install -D lint-staged

然后配置package.json,
通过procommit调起lint-staged

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": ["eslint --fix" , "git add"]
  },
  "husky":{
    "hooks":{
        "pre-commit":"npm run precommit"
    }
  }
}

这样就能在commit之前,先用eslint修复在git add了。

如果想和Prettier配合起来一起使用的话请参考如下:
Prettier介绍与基本用法

阅读 147

推荐阅读

世界核平

0 人关注
28 篇文章
专栏主页