eslint && 自动修复eslint报错

简介: eslint && 自动修复eslint报错

eslint && 自动修复报错



   随着前端团队人员的拓展,团队编码规范成为我们必须要关注的一个话题。eslint随之而来,本文我们来讲讲eslint以及它相关的内容。


前言

   相信前端开发的同学都知道eslint是为了解决什么问题,用来做什么,这篇文章,我们一起来巩固下。


eslint规则

在官网上给我们列举了9大类别的eslint规则:

1:Possible Errors       这些规则与 JavaScript 代码中可能的错误或逻辑错误有关。

2: Best Practices       这些规则是关于最佳实践的,帮助你避免一些问题。

3:Strict Mode       该规则与使用严格模式和严格模式指令有关。

4:Variables       这些规则与变量声明有关。

5:Node.js and CommonJS       这些规则是关于Node.js 或 在浏览器中使用CommonJS 的。

6:Stylistic Issues       这些规则是关于风格指南的,而且是非常主观的。

7:ECMAScript 6       这些规则只与 ES6 有关, 即通常所说的ES2015。

8:Deprecated

9:Removed


手动修复eslint报错

   我们在项目开启eslint校验后,对eslint规则还不太熟悉的同学,建议自己手动把不符合eslint规则的语法解决下。一来可以熟悉eslint的规则,二来可以让自己养成这些编码习惯。


vscode自动修复eslint报错

   在熟悉了eslint的规则后,我们二次开发别人的项目的时候。我们开启eslint校验,我们不想把不符合规则的语句一个一个修改。这个时候,我们可以使用vscode的一些配置,来帮我们自动修复。

【Tip:  有一些还是需要自己手动修复的,不是一步到位的。】


   接下来,我们来讲讲步骤。

1、安装vscode eslint插件     PS: 插件有好几种,自由选择就好。

2、在setting(设置)那里,搜索eslint;我默认自动修复功能是关闭的,我们开启。

"eslint.autoFixOnSave": true,


image.png


一些简单的配置【可不阅读】:


image.png


结语

   前端团队协作需要团队的每一位伙伴一起磨合,不是一篇文章一次分享能够立马看到效果的,这需要前端团队伙伴的付出。

   happy coding~

相关文章
vscode莫名其妙的错误:eslint的语法校验规则
vscode莫名其妙的错误:eslint的语法校验规则
153 0
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
29 2
|
JavaScript 前端开发
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。 下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
1360 29
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
|
6月前
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
233 0
|
6月前
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
429 0
|
4月前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
4月前
eslint 规则的配置方法(含关闭指定eslint 规则的方法)
eslint 规则的配置方法(含关闭指定eslint 规则的方法)
478 0
vscode配置eslint保存自动修复
vscode配置eslint保存自动修复
250 1
|
JavaScript 前端开发
ESlint + Stylelint + VSCode自动格式化代码(2023)
ESlint + Stylelint + VSCode自动格式化代码(2023)
247 0
|
6月前
如何关闭eslint
如何关闭eslint
178 0