【前端必会】eslint搞起

介绍

eslint进行代码审查，统一代码风格，预防潜在BUG

官网

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

安装

init时提示无法执行脚本



参考 https://www.cnblogs.com/jackadam/p/15704911.html

初始化

./node_modules/.bin/eslint --init

package.json添加启动命令

scripts:{
   "lint":"eslint scripts/**",
   "fix":"eslint scripts/** --fix",
}

index.js

let a = 0
let str = 'aaa';
let b = ((a * b) *10);;
console.log(a+1,str)
console.log(a == 1)

执行npm run lint 提示（命令已经添加到package.json）



执行npm run fix 修复（命令已经添加到package.json）

默认推荐的规则

https://eslint.bootcss.com/docs/rules/

VScode整合

为了在编辑器中实时查看到ESlint的校验结果，我们还要安装一下ESLint的插件，vscode会自动读取工程目录下的eslint配置

安装ESLint插件



安装完后已经可以实时看到问题了

修改一下规则.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "quotes":["error","single"]
    }
}

配置eslint为默认的格式化工具

格式化后会自动修复问题

总结

1. 从最基本的一个文件了解eslint
2. 验证：eslint yourfile.js
3. 处理：eslint yourfile.js --fix
4. 目前不会自动处理，不会自动验证
5. 没事多看看eslint的规则清单，或者项目中使用的规则
6. 安装eslint插件后可以将eslint设置为格式化工具