vue-使用eslint开发项目

最新推荐文章于 2023-09-27 11:15:10 发布

haishangfeie

最新推荐文章于 2023-09-27 11:15:10 发布

阅读量196

点赞数

分类专栏：前端开发笔记 vue

本文链接：https://blog.csdn.net/haishangfeie/article/details/101191533

版权

20 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

vue项目如何使用eslint、editorconfig以及precommit配置项目

1、安装

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

2、创建.eslintrc，这样就可以检测代码了

{
	"extends":"standard"
}

3、但是这样无法检测vue文件

npm i eslint-plugin-html -D

这样就可以检测script标签了，因为.vue中也是写在script标签中，这时就可以检测到了
修改.eslintrc文件

{
	"extends":"standard",
	"plugins":"html"
}

4、使用eslint
在package.json中加入命令，其中–ext表示要检测文件的后缀，第二个参数是要检测的文件夹

"lint":"eslint --ext .js --ext .vue --ext .jsx src/"

运行

npm run lint

5、自动修复eslint的报错
在package.json中加入命令，其中–ext表示要检测文件的后缀，第二个参数是要检测的文件夹

"lint-fix":"eslint --fix --ext .js --ext .vue --ext .jsx src/"

运行

npm run lint-fix

6、每次运行都检测代码

npm i  eslint-loader babel-eslint -D

再次扩展.eslintrc文件

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

因为项目是基于webpack进行开发，代码是经过了bable处理过的，所以一般使用webpack和bable开发的项目都会指定parser

修改webpack的配置

rules:[
	// 在最上面加上
	{
		test:/\.(vue|js|jsx)$/,
		loader:'eslint-loader',
		exclude:'/node_modules/,
		enforce:'pre'
	}
]

enforce:'pre’是要预处理的意思，因为如果eslint都不通过，就不需要往下执行了，所以它应该要在vue-loader处理.vue文件前执行

7、规范编辑器配置
创建.editorconfig

root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

root 为true，是告诉ide，配置文件读到这里就可以了，不用再往上搜索
indent_style = space 使用空格而不用制表符
trim_trailing_whitespace 去除每行后面的空格

8、配置钩子，在提交代码前对代码进行检测，如果代码没有通过eslint的检测，就无法进行提交
注意在安装这个包前，需要先初始化git

git init

npm i husky -D

安装这个包后，会自动在.git目录下生成一些文件，这些文件可以读取我们package.json里的内容，比如precommit
接着配置package.json的命令

“precommit”:"npm run lint-fix",

关注