vue2设置保存自动执行run lint配置步骤

2022年6月9日09:36:37

目录

一. ESlint介绍

ESLint的用途主要是：

  1. 审查代码是否符合编码规范以统一代码风格；
  2. 审查代码是否存在语法错误；

用法：
  通常在项目中安装了ESlint相关的包以后，可在.eslintrc.js文件的rule中手动添加代码校验规则，以保持一个项目的代码风格统一。eslint详细配置介绍见：ESLint在Vue中的使用详解

二. 保存自动执行run lint

设置保存自动执行分为run lint分为三步

  1. 安装eslint插件；
  2. 手动添加eslint规则rule；
  3. 编辑器setting配置；

1、插件安装
  vscode插件扩展搜索里面安装eslint，如下图vue2设置保存自动执行run lint配置步骤
在vue项目初始化时若选择安装eslint，则package.json的devDependencies中会出现以下配置：

"eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^6.2.2",

若没有则手动安装以上安装包；

2、手动添加eslint规则rule
  关于rule配置，主要配置的是eslint配置规则，通常在.eslintrc.js文件中配置，详细配置见文章ESLint在Vue中的使用详解。

3、编辑器setting配置；
打开setting设置，点击右上角打开setting（JSON)设置，
vue2设置保存自动执行run lint配置步骤

添加如下代码：

"editor.tabSize":2,"eslint.autoFixOnSave":true,"eslint.validate":["javascript",// 用eslint的规则检测js文件{"language":"js","autoFix":true},{"language":"vue","autoFix":true},],"eslint.options":{"extensions":[".js",".vue"]},"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"eslint.run":"onSave",

配置完成后每次ctrl+s保存文件即可自动自行执行run lint。

  • 作者：Saga Two
  • 原文链接：https://blog.csdn.net/m0_46309087/article/details/113874237
    更新时间：2022年6月9日09:36:37 ，共 927 字。