vue项目 安装eslint校验

eslint 代码风格校验

Step 1 安装

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

• 这些包是eslint-config-standard这个包的官方文档推荐我们安装的
• 根目录下创建.eslintrc文件，这是个json格式的文件

.eslintrc 配置

{
	"extends": "standard"
}

npm i eslint-plugin-html -D

• 安装eslint-plugin-html 的目的是 ，因为.vue文件里面是类似html格式文件，而不是javascript文件，所以eslint无法识别vue文件，所以得安装这个包 eslint-plugin-html ，这个包是解析vue文件下script标签里的代码

package.json里面进行配置

{
	"script": {
		"lint": "eslint --ext .js --ext .jsx --ext .vue client/"
	}
}

• 这些参数的意义是
• eslint ： 使用eslint
• –ext ：后缀名 指定哪些格式的文件需要使用eslint进行校验
• client/ ： 指定路径

eslint 检验之后 进行修复

• package.json里面进行配置

{
	"script": {
		"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
	}
}

• eslint 使用

npm run lint

npm run lint-fix

eslint 自动检测 配置

• 每次修改代码，都能自动校验代码规范
  -安装 eslint-loader babel-eslint

npm i eslint-loader babel-eslint -D

• .eslintrc文件配置

{
	"extends": "standard",
	"plugins": [
		"html"
	],
	"parser": "babel-eslint"
}

• 使用 “parser”: “babel-eslint” 的原因 ， 项目基于wepack开发的，代码都是要经过babel处理过的，babel处理的方式中有些语法对eslint不是特别支持，然后使用loader去处理eslint的时候就会出现一些问题，所以对于webpack+babel开发的项目，都会配置 “parser”: “babel-eslint”。

webpack.config.base.js 配置

module: {
	rules: [
		{
			test: /\.(vue|js|jsx)$/,
			loader: 'eslint-loader',
			exclude: /node_modules/,
			enforce: 'pre'//'post'
		},
		{
			test: /\.vue$/,
			loader: "vue-loader",
			options: createVueLoaderOptions(isDev)
		}
	]
}

• test 处理文件后缀名的集合
• loader
• exclude node_modules 里有许多js文件，而且node_modules里的js文件都是经过一些处理的，比如babel处理的，处理之后是es5的规则，而我们的eslint-standard 是es6 es7 的规则，所以把node_modules的文件去掉
• enforce 有两个参数，pre 和 post ，pre是预处理，post是后处理。因为.vue文件已经指定了vue-loader处理，eslint只是做代码检测，所以不需要处理vue的文件，所以在vue-loader 之前先检测 eslint

项目优化

• editorconfig
• 根目录下创建.editorconfig文件
• 作用是规范编辑器配置的

root = true // 这个项目读 editorconfig 读到这个文件就可以了，不用往上层目录去搜索
[*]//指定所有文件
charset = utf-8
end_of_line = lf
indent_size = 2 //tab键 长度是2
indent_style = space //推荐使用space而不是windows里的制表符
insert_final_newline = true //保存文件的时候，自动结尾加空行
trim_trailing_whitespace = true //在我们写代码的时候，一行后面有空格，自动去掉，一行结尾的空格

• 注意 eslint 要求代码结尾留有一行空行
• webstorm已经默认安装了editorconfig
• vscode 需要自行安装editorconfig 这个插件

git 提交中的eslint使用

• Step1 安装 husky
• 作用是，每次git commit 之前，先校验是否符合eslint规范，不符合就不能提交
• 安装husky后，会在项目根目录下的.git目录下生成一个hook，这个hook会调用package.json的某些内容，比如precommit
• 注意 安装那些githook工具的时候，需要提前在项目中git init 初始化，如果不做git init初始化，那githook无法放入git目录中

npm i husky -D

• Step2 package.json 配置

{
	"script": {
		"precommit": "npm run lint-fix"
	}
}

• git 初始化

git init