【Vscode安装ESlint插件、下载ESLint包以及他们之间的关系和使用】

前言

最近打算搞一个APP,学到了TypeScript语言,然后了解到了ESLint工具用于检查TypesScript和JavaScript语法错误。

但是,在实际安装和使用过程中碰壁,看了一大堆的视频和文章。跟着他们的教程步骤走,不是出现版本兼容性问题啊,就是出现其他问题。我真感觉奇怪诶,他们没有遇见这些问题吗,难道他们都是一遍过?

所以我这里分享一下我经历与对应问题的解决办法。

我的环境

一:前提-程序得是可以编译的,要不然检查什么

咱先把这一步搞通。

我的项目是使用TypeScript语言写了一个计算器程序。

我的项目最开始目录如下:

bash 复制代码
文件说明:
 1. Calculate.ts   # 计算器实现的程序
 2. npm使用.txt    # 这个不用管
 3. tsconfig.json  # TypeScript 项目的配置文件,用来告诉 TypeScript 编译器如何编译代码

关于tsconfig.json文件的说明:

  1. 它用来配置什么

  2. 必须有 tsconfig.json 吗

  3. 文件名必须叫 tsconfig.json 吗

    注意:如果在Vscode中的终端运行npm相关指令出现npm不识别或者什么其他的问题,但是在系统的命令提示符中运行npm指令却正常,可以尝试在vscode的终端中运行如下指令解决。

bash 复制代码
refreshenv

下面正式开始

在项目根目录下运行如下指令:

  1. 运行下面指令,初始化 npm 项目,运行完成后自动创建package.json文件(如果没有这个文件后面运行ESLint指令会报错的,官方原文如下)
bash 复制代码
npm init -y

我的项目运行该指令之后截图如下。

  1. 安装 TypeScript(如果还没有安装)
bash 复制代码
npm install --save-dev typescript

指令运行完成结果如下,项目目录中多了一个node_modules文件夹。在node_modules文件夹中可以看到typescript文件夹。好像"npm install --save-dev xxxxx"下载的包都会在node_modules文件夹中,当然package.json和package-lock.json也会有更新,可以自行查看

  1. 安装 Node.js 类型定义
bash 复制代码
npm install --save-dev @types/node

指令运行结果如下,可以看到node_modules文件夹中多了两个文件夹。

  1. 编译Calculate.ts文件
bash 复制代码
tsc

指令运行结果如下图,可以看到在dist目录下生成了Calculate.js文件。应该没有人问,这里为什么tsc指令后面不加文件名?关于这个问题可以翻到前面关于 tsconfig.json文件说明部分。

  1. 运行Calculate.js文件
bash 复制代码
node dist\Calculate.js

运行结果如下图,到这里前提条件已经完成,下面开始安装ESLint。

二、Vscode安装ESlint插件和ESlint包

之前我就有一个疑问,从Vscode扩展中下载的ESLint插件和使用命令下载的ESLint包,他们之间的关系是什么?

这里直接看官方原文,如下

也可以直接在Vscode中搜索ESLint扩展插件,也可以看见同样的描述(因为这个也是ESLint官方的)。

他们的关系就是:ESlint插件的工作需要依赖通过命令下载的ESLint包,下面是具体关系描述。

三、安装ESLint插件

vscode扩展中搜索ESLint,点击install即可,如下图。

四、安装ESLint包

在自己项目的根目录下,运行下面的指令进行安装(根据自己使用的工具选择对应的指令):

bash 复制代码
	# npm  
	npm install --save-dev eslint
	
	# yarn
	yarn add --dev eslint
	
	# pnpm
	pnpm add --save-dev eslint
	
	# bun
	bun add --dev eslint

运行结果如下图,安装的包都在node_modules文件夹中,在node_modules文件夹中可以看到eslint相关包。

安装ESLint包的后续步骤
  1. 运行如下命令,创建eslint配置
bash 复制代码
npm init @eslint/config@latest

这里关于该指令官方描述如下图,从官方的描述中可以得知"npm init @eslint/config@latest"指令即可下载eslint,也可以创建配置文件。所以后续想要省事直接运行"npm init @eslint/config@latest"指令,而不需要"npm install --save-dev eslint"指令,可以省去一个步骤。亲测是真的。

配置选择如下:

最后安装结果如下图,有一个警告,警告内容是"生成的配置文件本身可能不符合你设定的 linting 规则。"这很正常,直接忽略该警告

  1. 如果前面的配置文件类型选择的TypeScript就需要安装jiti,如果选择的是JavaScript就不需要。但我的选择管他呢,爷就是都要安装。在终端中执行如下指令:
bash 复制代码
npm install --save-dev jiti

指令结果如下图:

  1. 检查程序有无问题,终端中执行如下指令:
bash 复制代码
# npx eslint yourfile.js  
npx eslint dist\Calculate.js  

指令运行结如下图,从图中可以看出,ESLint检测到我的程序有一个错误,如果程序本身没有错误,是不会有任何输出内容的。恭喜,恭喜!到这里ESLint就已经弄好了。

如果程序出现问题,可以通过运行如下指令自动修复问题:

bash 复制代码
npx eslint Calculate.ts  					 #先检测我的Calculate.ts文件
npx eslint CalculateType_.ts --fix   # 自动修复问题的指令就是在后面加--fix

指令运行结果如下图,运行"npx eslint Calculate.ts"检测到11个错误,运行"npx eslint CalculateType_.ts --fix"之后,再运行"npx eslint Calculate.ts"没有检测到错误。

其他更多的eslint相关指令就自己去摸索吧!

相关推荐
lzj_pxxw7 小时前
STM32移植FreeRTOS(Cmake+CubeMX)
vscode·stm32·嵌入式硬件
独隅10 小时前
WebStorm 在 Linux 环境下的实战安装与高效开发指南
linux·ide·webstorm
modelmd11 小时前
离线安装与使用 vscode Remote SSH插件
ide·vscode·ssh
独隅13 小时前
WebStorm macOS 安装调优与实战效果全景
ide·macos·webstorm
Thanks_ks2 天前
【第 006 讲】搭建 PyCharm 开发环境:PyCharm 的下载与安装 | 初始设置与常用配置
ide·python·pycharm·开发工具·jetbrains·开发环境·集成开发环境
Ravenq~2 天前
无头转换:把 .docx 变成 PDF,不打开编辑器
pdf·编辑器
usdoc文档预览2 天前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
寂寞的船2 天前
【Unity知识速递】第4期 MCP for Unity:用 AI 自然语言控制编辑器
人工智能·unity·编辑器
寂寞的船3 天前
【Unity知识速递】第6期 URP性能优化完全指南:从内存到GPU的三维调优
unity·性能优化·编辑器
浮尘笔记3 天前
JetBrains差异设置被自动勾选的排查与根治实录
经验分享·程序人生·编辑器·intellij idea·phpstorm·webstorm