# eslint是个啥？

同一个项目，保持代码风格的一致，是非常重要的一个规范。

eslint可以极大的提高团队代码的一致性和规范性，eslint可以根据配置自动修复和格式化代码。

# 那该如何安装这个玩意呢？

通过Node安装eslint包

在命令行敲下如下代码即可：

npm install eslint -g

恭喜你，已经完成了eslint的安装。

在项目根目录下添加.eslintrc.js文件

此文件是用于校验代码格式，自行编写校验规则:

module.exports = {
  // eslint校验规则
}

规则查询官网 (opens new window)。

配置vscode，保存时自动格式化代码

"eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
// 需要校验的文件类型，具体情况看实际需求
"eslint.validate": [
    "javascript",
    {
        "language": "vue", 
        "autoFix": true
    },
    {
        "language": "jsx", 
        "autoFix": true
    }
    {
        "language": "html",
        "autoFix": true
    },
],

想了解更多的话，可以看看vscode的eslint (opens new window)插件。

# 大功告成

现在vscode保存代码时，就可以自动校正和修复代码。

当然也可以通过命令修复指定文件:

eslint --ext .js,.vue src --fix // 修复src文件夹下的js和vue文件
eslint test.js --fix // 修复根目录下的test.js文件

# 类似的代码校验工具

除了eslint，其他优秀的代码校验工具。

FECS (opens new window)

# 最后

各大厂整理好的eslint规则，不用自己一条一条来配置，开箱即用。

百度 eslint (opens new window)

当然，如果这些规则与你实际使用规则有冲突时，还可以强行覆盖。

例如：

module.exports = {
    root: true,
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/import',
        '@ecomfe/eslint-config/vue'
    ],
    rules: {
        'vue/html-self-closing': true,
        'import/no-unresolved': true
    }
};

← 介绍 PHP →