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. 测试
  • 编写有误还请大佬指正,万分感谢。
相关推荐
MUTA️4 小时前
pycharm中本地Docker添加解释器
ide·python·pycharm
织_网6 小时前
Visual Studio Code 中统一配置文件在团队协作中的应用
ide·vscode·编辑器
界面开发小八哥14 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
花花鱼15 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
到底起什么网名才能不重名19 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
不知所云,1 天前
3. lvgl 9.3 vscode 模拟环境搭建 lv_port_pc_vscode-release-v9.3
ide·vscode·编辑器·c·sdl·lvgl vscode·lvgl模拟器
墨小傲1 天前
基于Linux下的vscode c/c++开发环境搭建详细教程
linux·c语言·vscode
Percep_gan1 天前
idea的使用小技巧,个人向
java·ide·intellij-idea
tan180°2 天前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
万千思绪2 天前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm