关于eslint:前端工程化webpackeslint

33次阅读

共计 1062 个字符,预计需要花费 3 分钟才能阅读完成。

后面讲了,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

如果有一些全局要用的货色能够增加, 例如 jQuery
globals:{

"jQuery":"readonly"

}

eslint 配置正文
http://eslint.cn/docs/user-gu…

webpack 中 loader 配置

而后就是 eslint 联合 git hooks 钩子在提交之前检测代码
应用 husky
首先进行装置

npm install husky --save-dev

而后对应 package.json 配置

husky 属性配置 pre-commit 这个 git 钩子阶段,来进行咱们的 npm run test 来进行查看
而后 npm scripts 里对应增加 test 命令,

test:"eslint . src/"

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

咱们能够手动在增加一个修复命令用来手动执行

test:"eslint --fix . 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 介绍与根本用法

正文完
 0