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. 测试
  • 编写有误还请大佬指正,万分感谢。
相关推荐
一骑红尘荔枝来2 小时前
转载:VSCODE 关闭文件和资源管理器关联
ide·vscode·编辑器
float_六七4 小时前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
android_xc6 小时前
Android Studio国内仓库配置
android·ide·android studio
雁于飞7 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
Teletele-Lin10 小时前
Miniconda安装与VSCode搭建远程Python、Jupyter开发环境
vscode·python·jupyter·环境配置·远程开发
AiTop10011 小时前
腾讯推出AI CLI工具CodeBuddy,国内首家同时支持插件、IDE和CLI三种形态的AI编程工具厂商
ide·人工智能·ai·aigc·ai编程
android_xc18 小时前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
云梦谭18 小时前
Cursor 编辑器:面向 AI 编程的新一代 IDE
ide·人工智能·编辑器
zhong liu bin21 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
_BugMan1 天前
【IDEA】干活?一个IDEA即可,集成开发平台打造攻略
java·ide·intellij-idea