关于项目开始引进eslint的思考

最近项目中开始大量使用Eslint，导致前端同学，一个头两个大，哈哈哈，我也试了下，确实有点头大，毕竟前面都习惯了各种各种的风格，突然写两行就是一个红色的线，我这强迫症患者看着都难受，还有就是一些之前的写法都要改，如：

// 错误写法
const item = result[0];
// 正确写法
const [item] = result;

好多之前的写法全部要改成es6的，没用的变量全部要删，换行符等,侧面证明了大前端的发展是有多快,但是为了后期项目的维护，这些规范该引进的还是得引进

话不多说，现在研究下怎么引进

准备

项目就使用，我自己开发的一个小项目做实验了

https://gitee.com/makalochen/cnblog-tool

Eslint插件安装和配置

https://eslint.bootcss.com/docs/user-guide/getting-started

Eslint 规范配置就使用阿里的规范配置了

npm：https://www.npmjs.com/package/eslint-config-ali

github：https://github.com/alibaba/f2e-spec

安装

这里仅针对原生 JavaScript 项目哈，其他的

打开终端执行

# 安装eslint
npm install eslint --save-dev
# 安装ali相关配置
npm i -D eslint-config-ali @babel/core @babel/eslint-parser eslint-plugin-import

配置

这里使用配置文件配置

在你项目的根目录加入两个文件

.eslintignore 不检查的目录配置，类似于.gitignore

.eslintrc.js eslint配置项

并在.eslintrc.js中写入以下配置

module.exports = {
  extends: ['eslint-config-ali'],
};

使用

此时你可以查看以下你的项目 ，此时你应该能感受到前端同学的绝望，哈哈哈

全是红的，这么多红的，不可能一个个的改，所以还是有一键修复的,可以在你的scripts选项中加入下面的配置

"lint": "eslint --fix --ext .js ."

终端执行

npm run lint

即可