Eslint在工程中和VScode上的使用

stayong
3,063 阅读3分钟

代码规范化在日益庞大的前端多人协作项目中越来越凸显它的价值，eslint是前端代码规范方案中很优秀的代表。它提供了对句法、错误、代码格式的检测能力。但是使用eslint对于很多开发同学一般并不会那么顺利，它涉及的场景和环境情况很多。

本文描述了eslint的安装、配置和使用，重点描述了其在工程中命令行场景、git hook场景中的使用，还描述了在vscode中如何设置自动提醒和保存时自动eslint格式化。欢迎交流~

安装

npm install eslint -g

安装后可以在项目命令行使用 eslint -h 查看是否安装成功，安装成功后，该命令可以正常查看。

配置文件

生成配置文件

eslint --init

按提示选择对应的场景 即可自动生成对应的.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "eslint:recommended",  
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

使用

1、主动时机触发

(1)手动调用脚本使用

在package.json中配置script

"scripts": {
    "lint": "eslint --ext .vue,.js src",
    "lintfix": "eslint --ext .vue,.js src --fix"
 },

在命令行执行: npm run lint 和 npm run lintfix 即可对src目录下对应的文件进行检测。

(2)与git hook搭配使用

保证提交到git的代码都是经过eslint的，这样整个团队的代码才能真的统一风格。只靠自觉是不可靠的。

husky 和 lint-staged
 npm install husky --save-dev
 npm install  lint-staged  --save-dev

husky：可以在git commit执行前触发特定指令 lint-staged： 只对在git add 的暂存区中的文件进行特定处理
在package.json中使用

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e"
    }
 },
 "lint-staged":{
    "src/**/*": ["eslint --fix", "git add"]
 }

这样一来就可以在git commit 前自动触发一次lint-staged 执行，lint-staged可以指定对git暂存区中的可以自己指定的文件进行eslint fix 和 git add（如果自动修复后没有检测问题，就可以直接通过commit了，避免还需要自己手动add commit 一次）

2、VScode 自动提醒

安装vscode的eslint扩展 扩展会先去使用工作空间的eslint库，如果没有就会使用全局的；所以它会按本地的.eslintrc.js的配置来自动进行检查。
默认只会对工作空间的js文件进行检查，如果想让它检查其他的文件类型需要在vscode的setting.json中配置:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
],

这样就可以对js vue文件进行检查了,右侧的就是检查出来的提示错误数量：

3、vscode代码保存时自动eslint格式化

在vscode的setting.json中进行配置：

"eslint.autoFixOnSave": true,

配置该项后，当js文件进行保存时会自动按该工作区 的.eslintrc.js的规则进行自动格式化；
但是.vue文件内保存不会eslint格式化，要在.vue上自动保存eslint格式化需要添加如下配置：

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    {
        "language": "vue",
        "autoFix": true
    },
    "javascriptreact",
    "vue"
],

这样.js .vue文件就可以都自动保存eslint格式化了。 这里有个坑！！！ 保存自动格式化在多个场景可能都会生效，vscode自带保存格式化的能力，另外安装了vetur也可能有自动格式化的设置，需要在vscode设置中去除调这些相互冲突的格式化：

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    {
        "language": "vue",
        "autoFix": true
    },
    "javascriptreact",
    "vue"
],
// "editor.formatOnSave": true,  //注释调vscode自带的保存格式化 避免冲突

总结

本文介绍了eslint的安装、配置和使用。重点介绍了不同的使用场景：在命令行中手动触发，git commit前自动触发，在vscode中设置自动提醒，保存代码时自动按eslint的规则fix格式化，希望对你或团队的开发效能提升能有所帮助。

如果本文对你有用可以给作者点赞和评论喔，欢迎交流~

avatar
文章
阅读
粉丝