IntelliJ IDEA启用Eslint保存自动代码修复

时间：2025-03-04 15:37:14

前言

做开发已经有几个年头了，一直想写些什么，把自己成长旅程的点点滴滴记录下来，却因为各种原因中途搁浅。这次终于下定了决心！好好倒腾倒腾。但是话总得有个头哇，古人云：工欲善其事，必先利其器，想想还是先从工具开始吧。

Eslint是什么

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。使用它可以避免低级错误和统一代码的风格。详细学习建议直接去看官方文档，eslint的文档详细易懂，没有比看官方文档更好的学习方式了。

配置editorconfig

1、在项目根目录下新建文件.editorconfig文件，并配置,想了解更多去看详细文档。

# 
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

复制代码

安装并配置eslint

规范采用腾讯alloy团队开源的AlloyTeam ESLint 规则。

1、eslint全局安装

npm install --save-dev eslint babel-eslint eslint-config-alloy
复制代码

2、创建.eslintrc配置文件，并复制一下代码：

{
    "extends": [
        "eslint-config-alloy"
    ],
    "globals": {
        // 这里填入你的项目需要的全局变量
        // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
        //
        // jQuery: false,
        // $: false
    },
    "rules": {
        "quotes": [
            "error",
            "double",
            {
                "avoidEscape": true,
                "allowTemplateLiterals": true
            }
        ]
    }
}
复制代码

配置IntelliJ IDEA

Save Actions自动格式化代码

Save Actions是webstorm的一个插件，主要用途就在编辑文件后保存的时候，进行格式化代码，这样我们就不用手动去操作了。打开setting -> plugins搜索Save Actions，安装重启，搞定。

启用Eslint时配置IDEA

1、启用Eslint
打开配置窗口，找到Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint，勾选最上面的Enable，如下图

2、webstorm导入eslint的配置

导入操作很简单，只要在项目的.eslint.*文件上右键，选择Apply ESLint Code Style Rules就OK了。 这里实现了js文件遵守eslint的检测规则，下一步根据eslint规则自动检测修复javascript文件。

3、设置快捷键

打开设置 -> Keymap 搜索 Fix ESLint Problems，双击配置快捷键，这里使用的是Ctrl + S。 OK，搞定了，快快体验一把！！注意：这里与保存文件的快捷键冲突了，建议使用别的快捷键如Ctrl + Q

相关文章