ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似。

ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
使用前必须先安装ESLint,你可以使用npm安装(或者yarn):

// npm
npm install eslint --save-dev
// yarn
yarn add -D eslint

安装完毕之后可以生成ESLint的配置文件,用来便捷的管理你的ESLint规则,指令:

./node_modules/.bin/eslint --init
// 或者你也可以这样,使用npx命令,更便捷
npx eslint --init

初始化生成配置文件时,需要选择很多东西,详情如下:
// 空格键 选中/取消 Enter键确认选择

? How would you like to use ESLint? (Use arrow keys) //您想如何使用ESLint
  To check syntax only // 只检查语法
> To check syntax and find problems // 检查语法和发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式

? What type of modules does your project use? (Use arrow keys) //您的项目使用什么类型的模块
> JavaScript modules (import/export) // JavaScript模块
  CommonJS (require/exports) // CommonJS
  None of these // 其他

? Which framework does your project use? (Use arrow keys) //您的项目使用哪个框架(根据情况选择)
> React
  Vue.js
  None of these

? Does your project use TypeScript? (y/N) 
//项目是否使用TypeScript,后面括号中大写字母表示默认选项,如果不想使用,直接回车

? Where does your code run? (Press  to select,  to toggle all,  to invert sel
ection) //您的代码在哪里运行
>(*) Browser // 浏览器
 (*) Node // node

? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的
> JavaScript
  YAML
  JSON

The config that you've selected requires the following dependencies: //您选择的配置需要以下依赖,

eslint-plugin-vue@latest
? Would you like to install them now with npm? (Y/n) //您想现在安装它吗,默认yes,安装的话直接回车,不安装输入n

配置完成之后就会生成ESLint配置文件,.eslintrc.js文件,如下

module.exports = {
    "env": { // 指定脚本的运行环境, env 关键字指定你想启用的环境,并设置它们为 true
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [ // 设置当前ESLint默认继承的规则(或者你也可以使用标准规则:standard)
        "eslint:recommended",// 使用ESLint推荐的规则
        "plugin:vue/essential"
    ],
    "globals": { //  脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": { // 解析器选项
        "ecmaVersion": 2018,
        "sourceType": "module" // 类型为module,因为代码使用了使用了ECMAScript模块
    },
    "plugins": [ // 使用的插件
        "vue"
    ],
    "rules": { // 启用的规则及其各自的错误级别(在这里配置规则)
    }
};

其他 合并空值操作符 可选链操作符
安装
1、

npm install @babel/eslint-parser --save

2、
"eslint": "^7.5.0", 合并空值操作符 可选链操作符
3、
.eslintrc.js

parserOptions: {
    parser: '@babel/eslint-parser',
    sourceType: 'module',
    ecmaVersion: 2020
  },

eslint官方地址

标签: none

添加新评论