ESlint那些事儿

为了使项目代码规范化及提升可读性、可维护性，我们通常使用ESlint进行规范化处理；好处不言而喻，下面介绍如何使用

一、如何使用ESlint

1、初始化

# 先决条件：Node.js (>=6.14), npm version 3+

###
 # 1. 全局安装 ESLint
### 

# 为了保证eslint一些操作命令生效，建议全局安装
# 这句命令从 npm 仓库安装了 ESLint CLI
npm install eslint -g

# 进入项目
cd ~{username}/workspace/ESLint-Test

# 初始化 package.json，已有文件跳过此步骤
npm init -y

# 初始化 ESLint 配置
eslint --init


###
 # 2. 项目内安装 ESLint
### 
npm install eslint --save

# 进入项目
# 初始化 package.json，已有文件跳过此步骤

# 初始化 ESLint 配置
./node_modules/.bin/eslint --init

eslint --init 对话框选项，可选不同的配置

经过以上对话选择后，生成一个.eslintrc.js文件，如下：

注意：.eslintrc.js可单独配置修改，后续可自己补充或在 npmjs.com 搜索 "eslint-config" 使用别人创建好的配置

2、ESlint命令行进行格式化

使用以下命令行运行ESLint进行代码校验文件或者文件夹：

eslint [options] [file|dir|glob]*

# 比如：
eslint file1.js file2.js

# 或者：
eslint lib/**

更多命令行语句请参考ESlint Command Line

二、项目中使用ESlint的配置

1.`ES6+`以上语法配置

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

parser 设置

# 安装parser
$ npm install eslint @babel/core @babel/eslint-parser --save-dev
# or
$ yarn add eslint @babel/core @babel/eslint-parser -D

// .eslintrc.js 配置 parser
module.exports = {
    extends: "eslint:recommended",
    parser: "@babel/eslint-parser",
    env: {
        browser: true,
        node: true,
        commonjs: true,  // 使用require()不会报错
        es2021: true,
    },
    parserOptions: {
        requireConfigFile: false,
        ecmaVersion: 6,
        sourceType: 'module',
    },
    rules: {
    },
};

2、vue项目中的ESlint使用

新项目 一般在 vue create hello-world 选择默认的babel,ESlint配置即可

老项目

# 执行安装eslint
vue add @vue/eslint

安装完 @vue/cli-plugin-eslint 会让你选择eslint风格及校验时机，完成图类似

然而以上两种方式，可能在你git commit时，可能并不会执行文档中体现的eslint --fix功能，我们接下来解决一下这个问题。

3、搭配Git使用

在上图中我们选择了在代码保存时进行eslint校验，另外我们也可以补充配置在git commit之前进行校验

安装husky包, husky
安装lint-staged包，lint-staged

yarn add husky lint-staged --save-dev
# or
npm install husky lint-staged --save-dev

# lint-staged intall
# 此条命令执行完成后不用再执行其他安装命令
npx mrm lint-staged

# husky intall
# npx husky install

# 创建一个hook
# npx husky add .husky/pre-commit "npx lint-staged"

执行npx mrm lint-staged过程中，可能会出现以下问题

原因：mrm当前版本 3 似乎与 lint-staged 不兼容，要解决此问题，您必须通过运行指定 mrm 版本 2npx mrm@2 lint-staged

需要执行:

    npx mrm@2 lint-staged

执行完npx mrm lint-staged后，项目文件中会生成.husky文件夹，如图

package.json多出配置

  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }

现在在运行git commit即可看到 eslint 的执行效果，大功告成。

其他辅助开发配置

1. vscode编辑器插件设置

配置vscode插件ESlint是对开发者在编辑修改代码时就能根据校验规则进行提前规范化。

插件市场搜索 ESlint 进行install安装

vscode setting.json补充配置

// eslint 对以下类型进行校验    
"eslint.validate": ["javascript", "vue"]

// 文件保存时，依据eslint配置的规则进行格式化
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

2、ESlint在小程序中的额外配置

/**
 * 因为小程序的特殊性，本身提供了一些全局变量和方法供开发者使用，但ESlint并不能内置支持
 * 所以需要在.eslintrc.js中补充些额外全局变量，如下
 */
 module.exports = {
    // ..., 其他配置
    'globals': {
        'App': true,
        'Page': true,
        'Component': true,
        'Behavior': true,
        'wx': true,
        'getApp': true,
        'getCurrentPages': true,
    },
}