vue-cli3项目配置eslint代码规范的完整步骤

前言

最近接手了一个项目，由于之前为了快速开发，没有做代码检查。为了使得代码更加规范以及更易读，所以就要eslint上场了。

安装依赖

安装依赖有两种方法：

1. 在cmd中打上把相应的依赖加到devdependencies下，再npm install对应依赖。
2. 在package.json文件加上相应依赖：
   

eslint配置方法

eslint的规则有三个选项：

• "off"或者0，不启用这个规则
• "warn"或者1，出现问题会有警告
• "error"或者2，出现问题会报错
  

在根目录创建.eslintrc.js，代码如下：

忽略不必要的文件检测

在根目录下新建文件.eslintignore，对应的文件忽略检测。

src/assets

关闭某些代码的检测

有时候代码里有些特殊情况需要我们在某一行或者某几行关闭eslint检测，可以使用注释。

下面的代码会关闭所有规则：

下面的代码会关闭某一行的所有规则：

下面的代码在某一行关闭指定的规则：

开启验证

在根目录的vue.config.js中，把lintonsave设置为true。

vs code安装插件与设置

在vscode上安装eslint和vetur插件，并在file>>prefrence>>setting 或文件>>首选项>>设置中，找到setting.json，添加如下配置，让vscode每次保持的时候安装eslint规范来自动格式化：

结语

本文章只是记录eslint的过程，如果大家有什么问题可以在下方反馈给我，谢谢！

到此这篇关于vue-cli3项目配置eslint代码规范的文章就介绍到这了,更多相关vue-cli3项目配置eslint代码规范内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！