Vue3如何通过ESLint校验代码是否符合规范详解

目录
  • 前言
  • 1.在项目中安装ESLint命令
  • 2.初始化ESLint配置命令
  • 3.查看eslint.js文件
  • 4.在package.json下添加验证脚本
  • 5.编辑器中安装eslint插件
    • 5.1 VS Code中安装eslint插件步骤,按下图操作
    • 5.2 Idea 中配置eslint方法
  • 6.在提交git时自动进行ESLint校验方法
  • 总结

前言

VUE3中项目使用的了ESLint插件校验代码是否符合编码规则,一起来看看eslint的安装方式,vs code编辑器,idea编辑器中方法。

1.在项目中安装ESLint命令

npm install eslint  --save-dev

2.初始化ESLint配置命令

通过向导的方式生成初始的配置包

npx  eslint --init

You can also run this command directly using 'npm init @eslint/config'.
npx: 40 安装成功,用时 27.246 秒
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
? Does your project use TypeScript? » No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb-base@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.2, @typescript-eslint/parser@latest
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >=
3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN vue-item@1.0.0 No description
npm WARN vue-item@1.0.0 No repository field.

+ eslint@8.14.0
+ eslint-plugin-import@2.26.0
+ eslint-config-airbnb-base@15.0.0
+ eslint-plugin-vue@8.7.1
+ @typescript-eslint/parser@5.22.0
+ @typescript-eslint/eslint-plugin@5.22.0
added 112 packages from 71 contributors, updated 4 packages and audited 195 packages in 187.851s

49 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
A config file was generated, but the config file itself may not follow your linting rules.

3.查看eslint.js文件

看到生成的文件在plugin:vue/essential使用了vue2的规则,修改vue3的ue3-strongly-recommended校验方法。

module.exports = {
    "env": {
        "es2021": true
    },
    "extends": [
        //默认使用vue2的配置
        //"plugin:vue/essential",
        //修改使用vue3的规则
        "plugin:vue/vue3-strongly-recommended",
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

在 https://eslint.vuejs.org/user-guide/#usage #Bundle Configurations 可以看到说明,翻译了下可以参考:

这个插件提供了一些预定义的配置。可以通过将以下配置添加到extends.
"plugin:vue/base"... 启用正确 ESLint 解析的设置和规则。
使用 Vue.js 3.x 的配置。
"plugin:vue/vue3-essential"... base,以及防止错误或意外行为的规则。
"plugin:vue/vue3-strongly-recommended"... 上面,加上大大提高代码可读性和/或开发体验的规则。
"plugin:vue/vue3-recommended"... 上面,加上强制执行主观社区默认值的规则,以确保一致性。
使用 Vue.js 2.x 的配置。
"plugin:vue/essential"... base,以及防止错误或意外行为的规则。
"plugin:vue/strongly-recommended"... 上面,加上大大提高代码可读性和/或开发体验的规则。
"plugin:vue/recommended"...以上,加上强制执行主观社区默认值以确保一致性的规则。

4.在package.json下添加验证脚本

–fix 可以自动修复低级代码问题

"scripts": {
    "dev":"vite",
    "lint": "eslint ./src/**/*.{js,vue,ts,tsx,jsx} --fix"
  },

5.编辑器中安装eslint插件

5.1 VS Code中安装eslint插件步骤,按下图操作

在VS Code设置中开启eslint格式化配置勾上,默认是不开启的。

5.2 Idea 中配置eslint方法

setting–搜索eslint就有结果,点ESLint勾上相应的选项。

6.在提交git时自动进行ESLint校验方法

执行命令:

npx mrm@2 lint-staged

在package.json文件下添加下面的代码。提交git就会自动校验修复,加入git提交。

 "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --cache --fix",
      "npm run lint",          //执行lint校验规则,不需要手动校验
      "git add"                  / /修改后的文件添加git
    ]
  }

总结

项目中使用了ESLint插件工具,帮助我们写出符合规范的代码,可以提高代码规范和编码效率。当然了,还有其他的工具也欢迎在评论区留言一起学习,成长进步。

(0)

相关推荐

  • vue项目关闭eslint校验

    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校验. 下面就介绍一下vue项目中如何关闭这个校验. 首先我们在创建一个vue项目的时候,会有一

  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写.这时我们需要关闭.这里有两种方法. 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生成,我们可以这样. 在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件.将以下代码删掉或注销: { test: /\.(js|vue)$/, loa

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • 给vue项目添加ESLint的详细步骤

    eslint配置方式有两种: 1.注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 2.配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的: 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量

  • vue如何关闭eslint检测(多种方法)

    目录 一.问题描述 二.问题解决 一.问题描述 我们在开发vue项目的时候,创建的时候可能会不小心选择了eslint,这个检测规则对于新手来说,简直就是噩梦,会让你崩溃.所以如果不想让eslint检测,我们该怎么办呢?我总结了一些方法,针对不同的版本. 二.问题解决  1.首先是比较旧的vue项目 比较旧一点的项目可能会有webpack.base.conf.js这样一个文件.有这个文件的话,就直接修改这个文件就可以解决 上图红框框部分,我项目中的文件内容是这样的,其他项目可能有别的一些内容,我们

  • 怎样在vue项目下添加ESLint的方法

    简易搭建 ESLint官网网址 ESLint中文官网 如果你是想在自己的项目里搭建ESLint,就可以按照官网的指示, 以全局安装举例, npm install -g eslint 然后初始化 eslint --init 它会问你一些问题,你可以按照你的喜好进行配置,我选的是popular下面的standard,生成的文件是js格式,那么就会创建出eslintrc.js文件: module.exports = { "extends": "standard" }; 然

  • Vue3如何通过ESLint校验代码是否符合规范详解

    目录 前言 1.在项目中安装ESLint命令 2.初始化ESLint配置命令 3.查看eslint.js文件 4.在package.json下添加验证脚本 5.编辑器中安装eslint插件 5.1 VS Code中安装eslint插件步骤,按下图操作 5.2 Idea 中配置eslint方法 6.在提交git时自动进行ESLint校验方法 总结 前言 VUE3中项目使用的了ESLint插件校验代码是否符合编码规则,一起来看看eslint的安装方式,vs code编辑器,idea编辑器中方法. 1

  • Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • xcode 左边导航栏中符合含义详解

    xcode 左边导航栏中符合含义详解 "M" = Locally modified    "U" = Updated in repository  "A" = Locally added    "D" = Locally deleted    "I" = Ignored  "R" = Replaced in the repository  "–" "=&qu

  • jquery 校验中国身份证号码实例详解

    jquery 校验中国身份证号码实例详解 大陆18位身份证(第二代身份证) 身份号码是一组具有特征组合码,由十七位数字本体码和一位校验码组成. 排列顺序从左至右依次为:六位数字地区码,八位数字生日码,三位数字顺序码和一位数字校验码. 校验方法: (1)先对前17位数字的权求和 S = Sum(Ci * Vi), i = 0, ... , 16 Ci:表示身份证号码上第i位置的数字值 Vi:表示第i位置上的"加权因子" 加权因子Vi: 7 9 10 5 8 4 2 1 6 3 7 9 1

  • Python+appium框架原生代码实现App自动化测试详解

    step1:首先介绍下python+appium的框架结构,如下截图所示 (1):apk目录主要放置待测app的apk资源: (2):config目录主要放置配置文件信息,包含:数据库连接配置.UI自动化脚本中所需的页面元素信息及app启动信息.自动化报告邮件发送配置信息.接口请求的对应的url信息等[大家可根据待测app的功能添加或减少配置文件信息]. (3):report目录主要放置测试完成后生成的测试报告信息: (4):src目录下包含的目录如下 common目录:app启动方法的封装文件

  • 通过numba模块给Python代码提速的方法详解

    简介:numba是Anaconda公司开发的针对Python的开源JIT编译器,用于提供Python版CPU和GPU编程,速度比原生Python快数十倍.numba是第三方库,可以在运行时将Python代码编译为本地机器指令,而不会强制大幅度的改变普通的Python代码,使得在部分场景下执行Python的效率得到飞速的提升. 工作原理对比: Python文件执行过程 1..py文件通过解释器转化为虚拟机可以执行的字节码(.pyc):字节码在虚拟机上执行,得到结果. 2.字节码是一种只能运行在虚拟

  • SpringBoot参数校验之@Valid的使用详解

    目录 简介 依赖 代码 测试 测试1:缺少字段 测试2:不缺少字段 测试3:缺少字段,后端获取BindResult 简介 说明 本文用示例说明SpringBoot的@Valid的用法. 依赖 <dependency> <groupId>org.hibernate.validator</groupId> <artifactId>hibernate-validator</artifactId> </dependency> 代码 Contr

  • SpringBoot参数校验之@Validated的使用详解

    目录 简介 依赖 用法1:不分组 代码 测试 用法2:分组 代码 测试 简介 说明 本文用示例说明SpringBoot的@Validated的用法. 依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validation</artifactId> </dependency> 它里边依赖了hibernat

  • koa TS ESLint搭建服务器重构版过程详解

    目录 初始化项目目录 安装项目运行所需要的软件包 修改package.json 从.env中加载环境变量 配置路径别名 用法 目录规范 编码风格规范 Eslint 初始化项目目录 yarn init -y 安装项目运行所需要的软件包 生产依赖 yarn add koa koa-router cross-env module-alias dotenv koa:搭建 Koa 服务的核心软件包. koa-router:Koa 路由软件包. koa-bodyparser:解析 POST 请求参数的软件包

随机推荐