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版本的

2. 测试如下，就是成功了。配置生效

• 这里再推荐一个插件，显示错误信息在当前代码后，更直观

WebStorm怎么开启ESLint检测？

HBuilde怎么开启ESLint检测？

1. 插件安装，eslint-js、eslint-plugin-vue、stylelint、htmlhint

2. 配置

3. 测试

• 编写有误还请大佬指正，万分感谢。