Eslint安装配置教程

一、 安装

1、全局安装

npm i -g eslint
1

全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍；
全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用在项目上安装eslint：

2、项目安装(亲测)

npm i -D eslint
1

安装完成如下图所示

二、初始化Eslint配置

1、生成.eslintrc.js文件

npx eslint  --init
1

可以使用 ./node_modules/.bin/eslint --init 创建文件
.eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件
在 package.json 里创建一个 eslintConfig 属性，在那里，同样可以定义你的配置
如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在，则只读取 .eslintrc.js文件

如果 报错可以尝试运行npm install npx
选择你所需的配置

初始化成功如图所示

结束之后会在你的项目根目录下生成一个.eslintrc.js文件，如图所示

2、简单配置规则

    "rules": {
        'indent': [2, 2], // 强制使用一致的缩进
        'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
        'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI
        'quotes': [2, 'single']  // 强制使用一致的反勾号、双引号或单引号
    }
1
2
3
4
5
6

官方详细规则文档:点击进入

三、扩展事项

1、.eslintignore 忽略文件
在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。
步骤：

• .eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：

/dist/
/*.js
1
2

• eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的文件

2、VsCode中保存自动格式化
左下角点击设置图标—>设置—>右上角打开设置的json文件

在json文件中添加一项规则

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
1
2
3

如图

保存后即可生效