ESLint文件规则实践及配置说明

一、ESLint的介绍

ESLint是JavaScript代码检查工具，由于JavaScript语言本身的缺陷以及各种小众库的开发者要求更严格的代码规范和风格统一，ESLint出现了。

ESLint具有的几个特点：

1、ESLint是完全可配置的，可以通过配置文件配置规则，以适应不同的项目环境。

2、ESLint支持插件扩展功能，可以支持非常多的规则。

3、ESLint社区规则库非常完善，可以满足大多数编程需求。

二、ESLint的使用

1. 项目中引入ESLint

npm install eslint --save-dev

2. 创建ESLint配置文件

在项目根路径下创建.eslintrc.js文件，并添加如下代码：

module.exports = {
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 8,
        sourceType: 'module',
        ecmaFeatures: {
            impliedStrict: true
        }
    },
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
        // 推荐使用单引号
        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
        'semi': ['error', 'never'],
    }
}

注：ESLint规则给出的是一个规范文档，我们可以通过 "extends" 来继承 ESLint 推荐的规范文档，从而解决在配置 ESLint 时对每种规则的配置。

3. 命令行检测

npx eslint [filename or dir]

4. 模块加载检测

//引入
import {a} from 'a'; 

//使用
a();

5. NODEJS项目检测

在脚本中使用 "global" 变量。

/* global require, module */
const { foo } = require('./foo');

module.exports = {
  foo,
};

三、ESLint常见问题

1. 如何关闭ESLint检测

在当前文件或指定代码上，添加规则注释。

/* eslint-disable */
alert('foo');

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');

2. ESLint报错怎么解决

我们可以使用注释的方式来解决，例如“可以忽略此行严重报错”。

//可以忽略此行严重报错
/* eslint-disable */
alert('foo');

3. ESLint和Prettier的区别

ESLint和Prettier都是用来规范代码的工具，二者在目的上是有所区别的。

ESLint - 用于静态代码检测，指导开发者遵循一些产品制造的最佳实践。

Prettier - 更像是代码格式化器，强调的是代码编写的统一风格。

ESLint通过检测代码可读性和一致性，Prettier则强制统一代码格式。

4. ESLint:null-parsing error问题的解决

修改parserOptions即可改变解析器，观察下方的代码：

//这里默认解析器为acmaVersion 6
module.exports = {
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 8,
        sourceType: 'module',
        ecmaFeatures: {
            impliedStrict: true
        },
        //修改为babylon
        parser: 'babylon'
    },
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
        //推荐使用单引号
        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
        'semi': ['error', 'never'],
    }
};

5. ESLint与VIM中缩进问题的解决

在Vim中配置"editor.tabSize"和"editor.insertSpaces"，确保Vim与ESLint一致，具体可以参考如下代码：

//.eslintrc.js文件
// 确保ESLint在Vim中的缩进为2
{
  "env": {
      "browser": true
      },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 8,
      "sourceType": "module",
      "ecmaFeatures": {
          "impliedStrict": true
      }
  },
  "rules": {
      "indent": ["error", 2], // 包含“对象字面量缩进问题”解决方案
      "linebreak-style": ["error", "unix"],
      "semi": ["error", "never"]
  }
}

// .vimrc文件
let g:jsx_indent_disable = 1 // 禁用缩进2空格的设置
set tabstop=2
set shiftwidth=2
set softtabstop=2
set autoindent
set expandtab // 将制表符转换为空格，以确保与ESLint一致