在vue项目中如何实现vscode与eslint配合使用

在vue项目中如何实现vscode与eslint配合使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,个人推荐eslint + vscode来写vue,绝对有种飞一般的感觉。

每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正。安装步骤如下:

<强>首先安装eslint插件

“files.autoSave":“off" 　　“eslint.validate":( 　　“javascript", 　　“javascriptreact", 　　“html", 　　{“language":“vue",“autoFix":真正的} 　　), 　　“eslint.options": { 　　“plugins": [“html"] 　　}

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的修复。

<强> vscode配置eslint搭配vue脚手架快速实现代码质量化书写

我们在公司使用脚手架的时候可能会使用eslint来实现代码的质量检测,但是真正在书写代码的时候要时刻记住那些“标准”可能有点难受比如结尾不加分号使用单引号首行俩个空格缩进等等

这个时候我们可能想每次书写玩代码保存的时候它能自动帮我整理成符合标准的代码那是不是就事半功倍了

没错vscode就有这样的功能

还是和和往常一样直接上步骤和代码了

1。实现这样的条件(vue脚手架安装的时候需要选中eslint +漂亮这个选项)

在vscode上安装三个插件eslint代码质量检测插件,漂亮规则可以自定义,vetur vue代码高亮

“editor.codeActionsOnSave": { 　　“source.fixAll.eslint":没错 　　}//默认用户保存的时候自动实现eslint代码标准

3。有一个刚安装好的vue脚手架我的是@vue/cli 4.0版本了

规则:{ 　　& # 39;漂亮/漂亮# 39;:( 　　& # 39;错误# 39; 　　{ 　　半:假的,//结尾分号错误是关闭真的是打开 　　singleQuote:真的,//单引号真的是打开假是关闭 　　printWidth: 160//默认代码多少个换行我这里设置160 　　} 　　] 　　}

4。运行测试在我们的怕包。json文件中的