eslint的安装和使用方法
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
},