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. 测试
  • 编写有误还请大佬指正,万分感谢。
相关推荐
深圳行云创新24 分钟前
Cloud IDE vs 本地IDE:AI编程时代的“降维打击“
ide·ai编程
iCxhust44 分钟前
Visual Studio 2022查看程序变量和堆栈
ide·visual studio
weixin_456904272 小时前
vscode离线下载依赖
ide·vscode·编辑器
weixin_456904272 小时前
vscode浏览器启动报错
ide·vscode·编辑器
撩得Android一次心动3 小时前
Android studio 高效使用
android·ide·android studio
△曉風殘月〆3 小时前
Visual Studio 命令和属性的常用宏定义(macros for MSBuild commands and properties)
ide·visual studio
初级炼丹师(爱说实话版)4 小时前
JVM的classpath
jvm·ide
小韩博14 小时前
IDEA的简单使用
java·ide·intellij-idea
@才华有限公司16 小时前
vscode使用翻译插件分享
ide·vscode·编辑器
lichong95117 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++