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

前言

---

作开发已经有几个年头了，一直想写些什么，把本身成长旅程的点点滴滴记录下来，却由于各类缘由中途搁浅。此次终于下定了决心！好好倒腾倒腾。可是话总得有个头哇，古人云：工欲善其事，必先利其器，想一想仍是先从工具开始吧。

Eslint是什么

---

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

配置editorconfig

---

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

# http://editorconfig.org
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 规则。

一、eslint全局安装

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

二、建立.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

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

二、webstorm导入eslint的配置

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

三、设置快捷键

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