webstorm、vscode、HBuilder配置eslint检查

你们好,我是金金金。

场景

每个人写的代码都有自己所属的风格,所以项目中统一代码风格特别重要,新开的项目中如何快速配置ESLint呢?

安装

  1. npm install --save-dev eslint ----安装eslint
  2. npm install --save-dev eslint-plugin-vue ------检测.vue文件里的js
  3. npm install --save-dev @typescript-eslint/eslint-plugin ------ ts
  4. npm install --save-dev @typescript-eslint/parser ------ ts

初始化配置

npx eslint --init

  • 随后会出现一些配置项让你选择,根据项目需求对应选择就好,完成后会在当前项目的根目录下自动生成.eslintrc.js文件,随后你在里面配置对应的规则即可

以下是我配置的一些简单规则

vscode怎么开启eslint检测?

  1. 下载ESLint插件

这里有个大坑,我刚开始安装的最新版本的,配置好了 始终没效果,检查了许久,在群里面问了大佬才知道新版本有这个坑,退回上一个版本就好了,我安装的是2.4.2版本的

  1. 测试如下,就是成功了。配置生效
  • 这里再推荐一个插件,显示错误信息在当前代码后,更直观

WebStorm怎么开启ESLint检测?

HBuilde怎么开启ESLint检测?

  1. 插件安装,eslint-js、eslint-plugin-vue、stylelint、htmlhint
  1. 配置
  1. 测试
  • 编写有误还请大佬指正,万分感谢。
相关推荐
CAE虚拟与现实12 小时前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
路边闲人214 小时前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
小蕾Java14 小时前
Java 开发工具,最新2025 IDEA使用(附详细教程)
java·ide·intellij-idea
CAE虚拟与现实15 小时前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实15 小时前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
资讯第一线15 小时前
《RAD Studio 13.0》 [DELPHI 13.0] [官方原版IOS] 下载
ide
过-眼-云-烟17 小时前
新版Android Studio能打包但无法run ‘app‘,编译通过后手机中没有安装,顶部一直转圈
android·ide·android studio
Stardep17 小时前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
扯淡的闲人1 天前
多语言编码Agent解决方案(4)-Eclipse插件实现
java·ide·eclipse
superior tigre1 天前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode