ESLint入门使用

ESLint入门使用

ESLint介绍

ESLint是在检查 ECMAScript/JavaScript 语法的一个工具插件，它的目标就是统一代码风格。像SLint,JSHint都是一样的功能，当然它们有不一样的地方，我们只要会使用就够了。而ESLint比较流行会ESLint就够了

安装

• 全局安装(推荐)

npm i eslint -g

• 本地安装

npm i eslint --svae-dev

安装后执行下面命令，系统会询问你

eslint --init

不管你是全局还是本地安装，它都要在本地生成一个配置文件，这里我选择配置文件为一个.js文件,即为.eslintrc.js

• 脚手架安装

脚手架安装的ESLint在项目文件下面不需要在执行eslint --init,在项目文件package.json中已经配置了，ESLint会自动去读取

字段参数

"root" //是否在根文件下使用
"env"  //执行环境， node , brower(浏览器)

• extends配置需要的插件

"extends":"eslint:recommended"  //配置该字段值时，代码风格设置会继承官方的

官方代码风格配置：https://eslint.bootcss.com/docs/rules/

如果需要检测Vue，React语法规范还需要下载其他插件plugin:vue/essenttial(Vue), eslint-plugin-react

配置在extends字段下。使用脚手架就不需要自己下了，它会帮你搞定

• parserOptions

"parserOptions":{
    "ecmaVersion":6,//表示使用ES6语法，默认ES3,ES5 
}

该字段还有其他配置，官网写得很清楚https://eslint.bootcss.com/docs/user-guide/configuring

• rules

该字段比较重要，可以在rules自定义自己的代码风格。如果已经配置了"extends":"eslint:recommended"，然后自己在rules中定义新的规则会覆盖掉官方的配置

官方文档中有绿色勾的即已配置。no-console官方没有开启，如果我想使用开启no-console,只要在配置文件中的rules字段下添加

"rules":{
    "no-console":"error"//表示使用console报错
}

使用命令eslint src,检测src文件夹下的文件代码

为了方便将检测命令封闭在package.json文件中

其中--fix表示自动修改可修改的代码，可修改的配置项会有一个图标

例如：no-extra-semi有图标，可以修改

执行npm run eslint,它会自动将不必要的分号自动清除

想完全自定义自己想要的代码风格，可以在rules字段下配置