如何使用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. vscode编辑器插件设置

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

vscode setting.json补充配置

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

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

2.`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: {
    },
};
复制代码

ESlint在小程序中的额外配置

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