eslint代码工具的安装和使用

eslint代码校验的安装和使用

EsLint是一种书写代码的规范，它可以让其他人遵守来更好的阅读代码。再eslint中，网上已经形成了一种规范，就是eslint-standard。我们可以来使用它来规范你的代码，当然也可以自己编写代码准则。
在这里主要详细介绍window电脑的使用方法
主要通过npm安装，没有的同学可以先去node官网下载node.js安装，里面自带npm虽然不是最新的。

1. 开始安装

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
如果想使用standard规范这是必须安装的

2. 新建文件
   安装完成了之后，新建文件.eslintrc来使用它

{
	"extends": "standard"
}

当然这还没玩，还需安装npm i eslint-plugin-vue eslint-plugin-html并在eslintrc中再次修改文件

{
  	"estends": "standard",
  	"plugins": [
  		"vue",
  		"html"
  	]
}

3. package.json中添加校验代码命令

"script": {
	"lint": "eslint --ext .js --ext .vue client/" // --ext后面是校验文件的后缀名
}

运行命令npm run lint时会报一大堆错误，你修改起来太麻烦，可以再次添加一条运行命令来修复eslint报的错误

"lint-repair": "eslint --fix --ext .js --ext .vue client/"  //添加一个参数--fix就会自动帮你修复eslint的错误

这时候在运行npm run lint-repair就会发现eslint报的错误没有了

4. 如何在开发过程中验证eslint
   每次修改完代码在跑一遍eslint会发现太麻烦了，我们可以在webpack中来完成每次运行项目时报错。
   npm i babel-lisnt eslint-loader 安装完成后，在eslintrc中添加

	"parse": "babel-eslint"

然后可以在webpack的rules中添加配置项

{
	test: /\.(js|vue)$/,
	loader: 'eslint-loader',
	exclude: '/node_modules/',
	enforce: 'pre'
}

这样就会在跑项目的时候报eslint的错误
最好你的项目是基于babel，webpack打包的项目。