eslint 保存自动格式化_ESLint一款可组装的JavaScript和JSX检查工具

使用vs code为例，创建项目ESLintDemo

npm initnpm install --save-dev eslingeslint --init

项目的基本目录

产生.eslintrc文件，根据执行过程中选择会产生不同格式的文件类型，这里以json格式为例，比如我在项目中配置的.eslintrc.json文件

{    "env": {        "es6": true,        "node": true    },    "extends": "eslint:recommended",    "globals": {        "Atomics": "readonly",        "SharedArrayBuffer": "readonly"    },    "parserOptions": {        "ecmaFeatures": {            "jsx": true        },        "ecmaVersion": 2018,        "sourceType": "module"    },    "plugins": [        "react"    ],    "rules": {        // 不否允许对象中出现结尾逗号        "comma-dangle": [            "error",            "never"        ],        // 必须在代码尾部添加分号        "semi": "error",        // 把双引号换成单引号        "quotes": [            "error",            "single"        ],        // 强制驼峰命名规则        "camelcase": [            2,            {                "properties": "never"            }        ],        // 两个缩进空格        "indent": [            "error",            2        ],        // 不允许出现空代码块，除了catch        "no-empty": [            "error",            {                "allowEmptyCatch": true            }        ],        // 要求使用 isNaN() 检查 NaN        "use-isnan": "error",        "require-await": "error",        // 禁止 if 作为唯一的语句出现在 else 语句中        "no-lonely-if": "error",        // 强制在注释中 // 或 /* 使用一致的空格        "spaced-comment": [            "error",            "always",            {                "line": {                    "markers": [                        "/"                    ],                    "exceptions": [                        "-",                        "+"                    ]                },                "block": {                    "markers": [                        "!"                    ],                    "exceptions": [                        "*"                    ],                    "balanced": true                }            }        ],        // 强制模块内的 import 排序        "sort-imports": [            "error",            {                "ignoreCase": false,                "ignoreDeclarationSort": false,                "ignoreMemberSort": false,                "memberSyntaxSortOrder": [                    "none",                    "all",                    "multiple",                    "single"                ]            }        ],        // 优先使用数组和对象解构        "prefer-destructuring": [            "error",            {                "array": true,                "object": true            },            {                "enforceForRenamedProperties": false            }        ],        // 禁止出现多行空行,最多两行        "no-multiple-empty-lines": "error",        "brace-style": [            "error",            "1tbs"        ],        // 禁用魔术数字        "no-magic-numbers": "error",        // 禁止使用var        "no-var": "error",        // 禁止 case 语句落空        "no-fallthrough": "error"    }}

不知道配置也没关系，打开官方文档，选择ESLint Demo,可视化选择需要的选项，自动生成配置好的文件，直接到底部下载文件即可使用。

展开rules configuration(默认是合上的)

底部点击链接就可以下载完整的配置文件。

每个rules的key的使用说明，选择“用户指南”》“规则”有详细的说明。

常用的命令

// 执行对src目录下的文件执行规范检测并进行修正eslint ./src --fix

文档中，在加了--fix参数的时候，标识了小扳手的选项表示可以自动进行修复。

配合vs code可以在保存的时候自动执行eslint格式化

"editor.codeActionsOnSave": {

"source.fixAll": true,

"source.fixAll.eslint": true

}

项目配合package.json的scripts可以通过npm run xxx进行执行，比如配合webpack等插件，能在编译打包的前自动进行规范检查。

如果要排除某些文件或者目录的检查，添加.eslintignore文件，在文件配置上要排除的文件或者目录。

下面来做个试验

那么要排除掉ignoretest目录的检查，那么对.eslintignore进行修改

如果没用添加.eslintignore，也可以在package.json中进行过滤配置，ESLint 将在 package.json 文件中查找 eslintIgnore 键，来检查要忽略的文件，值得注意的是，如果有.eslintignore文件，package.json的配置将失效。

注意点：

如果配置了"no-undef": "error"

nodejs的一些全局变量比如：process,__dirname等就会报错，配合使用

"no-global-assign": "error"

env的配置项，同时要设置"node":true

更详尽的说明可以参考ESLint的官网http://eslint.cn