eslint 不能格式化tsx文件？eslint 配置不起效果？

青提柚柚

于 2024-06-05 20:33:48 发布

阅读量1k

点赞数 10

文章标签：前端 javascript 开发语言 typescript

本文链接：https://blog.csdn.net/qq_41437448/article/details/139480640

版权

问题

设置了eslint（不使用Prettier的情况下）等等规则，但是自动格式化一直不起效果，按照如下步骤可以一步步检查看看是哪里出了问题

步骤

一、确认插件和解释器的安装

@typescript-eslint/parser：这是一个ESLint解析器，它允许ESLint解析TypeScript代码。
@typescript-eslint/eslint-plugin：这是一个ESLint插件，它包含了一些针对TypeScript的特定规则。
eslint-plugin-react：这是一个ESLint插件，它包含了一些针对React和JSX的特定规则。
全局是否安装eslint
npm版本校验
node版本校验

（一）`@typescript-eslint/parser安装确认`

执行命令：

npm list @typescript-eslint/parser

结果一：（有类似输出说明已经安装）

your-project-name@1.0.0 /path/to/your/project

└── @typescript-eslint/parser@4.28.5

结果二：

（有类似输出说明未安装，安装命令：npm install --save-dev @typescript-eslint/parser）

npm ERR! code ELSPROBLEMS
npm ERR! extraneous: @typescript-eslint/parser@4.28.5 /path/to/your/project/node_modules/@typescript-eslint/parser

（二） `@typescript-eslint/eslint-plugin安装确认`

执行命令：

npm list @typescript-eslint/eslint-plugin

结果一：（类似以下已安装）

your-project-name@1.0.0 /path/to/your/project
└── @typescript-eslint/eslint-plugin@4.28.5

结果二：

（未安装，安装命令：npm install --save-dev @typescript-eslint/eslint-plugin）

npm ERR! code ELSPROBLEMS
npm ERR! extraneous: @typescript-eslint/eslint-plugin@4.28.5 /path/to/your/project/node_modules/@typescript-eslint/eslint-plugin

（三） `eslint-plugin-react 安装确认`

执行命令：

npm list eslint-plugin-react

结果一：（类似以下已安装）

输出eslint-plugin-react的版本号

结果二：

（未安装，安装命令：npm install --save-dev eslint-plugin-react）

输出empty

（四） eslint检查

确保项目中已经安装了ESLint。在终端中运行npm list eslint检查。如果没有安装，运行npm install --save-dev eslint来安装。

确保全局环境中安装ESLint。运行npm list -g eslint检查。如果没有安装，运行npm install -g eslint来安装。

确保VS Code已经安装了ESLint插件。在VS Code的插件面板中搜索"ESLint"来检查。如果没有安装，则在插件面板中找到ESLint插件并点击安装。

（五） npm版本校验

npm版本过低。ESLint需要npm的版本至少为5.2.0。运行npm -v来检查npm版本。如果版本过低，运行npm install -g npm来升级npm。

（六） node版本校验

Node.js版本过低。ESLint需要Node.js的版本至少为10.12.0。运行node -v来检查Node.js版本。如果版本过低，则升级Node.js。

二、`settings.json的配置检查`

（是否开启自动修复）

打开VS Code的设置。点击菜单栏的文件(File) > 首选项(Preferences) > 设置(Settings)来打开设置，或者使用快捷键Ctrl+,。

在搜索框中输入editor.codeActionsOnSave。

点击编辑在 settings.json 中链接，打开settings.json文件。

在settings.json文件中，添加或修改以下配置：

{

    "editor.codeActionsOnSave": {

        "source.fixAll.eslint": true

    }

}

保存settings.json文件。

三、.eslintrc 配置文件

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "rules": {
        // 你的规则
    }
}

同时也检查一下项目中是否有.eslintignore文件，如果有，确保它没有忽略TSX文件

四、eslint缓存清除重新加载

1.清除VS Code的ESLint缓存。

Ctrl+Shift+P快捷键来打开命令面板，在VS Code的命令面板中运行ESLint: Reset ESLint Cache命令

2.在VS Code中，打开命令面板（Ctrl+Shift+P），并输入运行ESLint: Restart ESLint Server命令

五、 PowerShell的执行策略问题

（一）问题

（执行eslint --init命令报错）

File C:\Program Files\nodejs\eslint.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.

（二）解决

1.打开一个PowerShell窗口，以管理员权限运行。

以管理员权限运行PowerShell窗口，步骤操作：

在Windows搜索栏中输入"PowerShell"。

在搜索结果中找到"Windows PowerShell"，然后右键点击它。

在弹出的菜单中选择"以管理员身份运行"。

2.运行以下命令来改变执行策略：

        Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

        这个命令将允许当前用户运行未签名的脚本。

如果你不希望改变执行策略，你也可以直接使用npx来运行eslint --init命令：

        npx eslint --init