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. 测试
  • 编写有误还请大佬指正,万分感谢。
相关推荐
kiss strong2 小时前
好用的自带AI功能的国产IDE
ide
成遇10 天前
在Vscode中安装Sass并配置
vscode·rust·sass
API开发10 天前
苹果芯片macOS安装版Homebrew(亲测) ,一键安装node、python、vscode等,比绿色软件还干净、无污染
vscode·python·docker·nodejs·openssl·brew·homebrew
微风好飞行10 天前
Vite 打包 vscode 扩展遇到的模块问题
javascript·vscode·vite
Jay_51510 天前
如何获取 vscode 的 vsix 离线插件安装包
vscode·vsix
:-)10 天前
VSCode新窗口背景水印logo修改美化
ide·vscode·编辑器
HarryHY10 天前
Vscode自定义代码快捷方式
前端·javascript·vscode
未来之窗软件服务10 天前
酒店住宿自助入住系统——店铺自动运营—仙盟创梦IDE
ide·微信支付·仙盟创梦ide·东方仙盟·自动运营·自助缴费
黑塞12311 天前
Vscode 编写Markdown支持 plantuml书写
ide·vscode·编辑器·markdown·plantuml
linweidong11 天前
一站式用AI编程神奇Cursor/Trae(VScode环境)开发运行Scala应用
大数据·vscode·后端·大模型·scala·ai编程·cursor