安装 eslint 配置指南 及 遇到的一些问题记录

前端eslint配置指南

背景

  1. 当前前端项目风格混乱,每个人有自己的开发习惯,有自己的格式化习惯,不便于项目的风格统一,不利于代码维护
  2. 有的项目eslint没有用起来,没有起到规范代码的作用,导致出现一些基础代码问题,如:重复命名

目标

  1. 统一的代码规范
  2. 统一的格式化规范
  3. 统一的强校验规范

策略

  1. 使用eslint配置前端标准化的代码规范
  2. 使用prettier格式化代码,形成统一风格
  3. 使用husky添加git钩子,配合lint-staged强校验staged阶段的代码
  4. 使用.editorconfig

配置步骤

准备工作:

  1. 使用node: 12.16.0
  2. 使用cnpm

添加eslint校验:

  1. 安装依赖包c

cnpm i eslint@7.32.0 eslint-webpack-plugin@2.7.0 eslint-plugin-vue@7.20.0 --save -D

  1. 修改eslintrc

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 12,
    sourceType: 'module',},
  env: {
    node: true,
    browser: true,},extends: ['eslint:recommended','plugin:vue/essential',],// add your custom rules here
  rules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],}
}

  1. 修改Webpack.config.base.js

// 添加插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 配置插件
plugins: [new vueLoaderPlugin(),new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      moment: 'moment'})// 新增插件配置].concat(config.dev.useEslint ? (new ESLintPlugin()) : []),// 移除module.rules中的eslint配置
  rules:[// 移除以下代码...(config.dev.useEslint ? [createLintingRule()] : []),]

添加prettier格式化:

  1. 安装依赖包

cnpm install prettier@2.8.8 eslint-config-prettier@8.8.0 eslint-plugin-prettier@4.2.1 --save -D

  1. 新增.prettierrc.js文件

module.exports = {
  printWidth: 180,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: true,
  bracketSameLine: false,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'avoid',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: false,
  embeddedLanguageFormatting: 'auto',
};

  1. 修改eslitrc.js文件

// 新增extends
extends: ['plugin:prettier/recommended'
]

添加强校验:

  1. 我们期望在代码commit的时候自动eslint校验我们的代码
  2. 我们期望只校验我们本次修改的代码,而不是全项目校验(对历史项目友好,加快校验效率)

步骤

  1. 添加依赖包

cnpm install husky@7.0.4 lint-staged@11.2.6 --save -D

  1. 启用git-hooks画u

npx husky install

执行完成后,会新增一个.husky文件夹

  1. 创建pre-commit钩子,用来校验staged的代码

npx husky add .husky/pre-commit "npx lint-staged"

  1. package.json中配置lint-staged

 "lint-staged": {"*.{js,vue}": "eslint --fix"}

配置完成后,当我们commit的时候就会自动校验我们的代码

配置.editorconfig

editorconfig的作用是用来规范我们的编辑习惯的

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

备注:以上的所有配置,各项目根据自己的实际情况做微调,有则改之无则加勉,eslint规则切忌随意off

vscode校验配置

遇到eslint问题,我们可以用上面的操作格式化当前文件,或者save的时候校验

记录遇到eslint的一些校验问题

1、'$' is not defined

env: {

 browser: true,

 jquery: true

},

2、The template root requires exactly one element     

'vue/no-multiple-template-root': 'off',

3、 vue/require-component-is

  <!-- eslint-disable vue/require-component-is -->

  <component :is="compName"></component>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RT-DETR优化策略:轻量级Backbone改进 | 高效模型 (Efficient MOdel, EMO),现代倒残差移动模块设计|ICCV2023

🚀🚀🚀本文改进:面向移动端的轻量化网络模型——EMO,它能够以相对较低的参数和 FLOPs 超越了基于 CNN/Transformer 的 SOTA 模型,支持四个版本EMO_1M, EMO_2M, EMO_5M, EMO_6M,参数量如下,相对于自带的rtdetr-l、rtdetr-x有很大提升 layersparametersgradientsEMO_1…

MySQL-事务

什么是事务 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 事务的特性 (ACID) 原子性(Atomicity)&#xff1a;事务是不…

C_11微机原理

一、单项选择题&#xff08;本大题共 15 小题&#xff0c;每小题 3分&#xff0c;共45分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案。&#xff09; .EXE 文件产生在&#xff08;&#xff09;之后。 A.汇编 B. 编辑 C.用软件转换 D.连接 2,十进制-61的8位二进…

创芯科技USB_CAN【库文件】

只用到【只收】【只发】功能 23.11.18 using help; //using Models; using System; using System.Collections.Generic; using System.Linq; using System.Net.NetworkInformation; using System.Runtime.CompilerServices; using System.Runtime.InteropServices; using Sys…

MybatisPlus学习

一.快速入门 1.相关数据库创建 CREATE TABLE USER(id BIGINT(20) NOT NULL COMMENT 主键ID,NAME VARCHAR(30) NULL DEFAULT NULL COMMENT 姓名,age INT(11) NULL DEFAULT NULL COMMENT 年龄,email VARCHAR(50) NULL DEFAULT NULL COMMENT 邮箱,PRIMARY KEY (id));​​INSERT I…

后端返回 date 时间日期格式为 UTC 格式字符串,形如 2022-08-11T10:50:31.050+00:00前端如何修改为yyyy-mm-dd

在不指定任何特殊配置的情况下&#xff0c;返回的 date 类型的字段会自动转成 UTC 格式字符串&#xff0c;形如 2022-08-11T10:50:31.05000:00。 前端如何处理&#xff1f; vue举例 utils 下新建 mixins.js文件 // minins.js文件 import Vue from "vue"; import {…

MidJourney笔记(1)-入门

注册 MidJourney注册和使用方式,有点特别。在介绍注册之前,需要给大家先介绍Discord。 Discord是一家游戏聊天应用与社区,在国内用的人相对比较少,在国外用得比较多。 那MidJourney和Discord有什么关系呢? MidJourney是搭建在Discord上的一个人工智能程序,通过在Discord添…

《洛谷深入浅出基础篇》——P3405 citis and state ——哈希表

上链接&#xff1a;P3405 [USACO16DEC] Cities and States S - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P3405 上题干&#xff1a; 题目描述 Farmer John 有若干头奶牛。为了训练奶牛们的智力&#xff0c;Farmer John 在谷仓的墙上放了一…

Spring对事务的实现

Spring对事务的支持 事务概述事务的四个处理过程事务的四个特性 引入事务场景Spring实现事务的两种方式声明式事务之注解实现方式 事务概述 在一个业务流程当中&#xff0c;通常需要多条DML&#xff08;insert delete update&#xff09;语句共同联合才能完成&#xff0c;这多…

若依启动步骤

1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址&#xff1a;cmd中ipconfig命令查看 6.启动后端&#xff1a;如下 7.启动前端ruoyi-ui中 先运行npm install&#xff0c;再npm run dev。项目就启动成功了。 用户名&#xff1a;admin 密码&#x…

【2022改良版】学法减分助手PRO小程序源码

【2022改良版】学法减分助手PRO小程序源码 &#xff0c;交管推出个学法减分&#xff0c;每个驾驶员可以把被扣的6分&#xff0c;以看视频答题的形式学习回来&#xff0c;然后答题这个一共二十道题每道题60秒&#xff0c; 有好多人不会&#xff0c;用咱们的小程序就可以模拟练习…

计算机视觉:驾驶员疲劳检测

目录 前言 关键点讲解 代码详解 结果展示 改进方向&#xff08;打哈欠检测疲劳方法&#xff09; 改进方向&#xff08;点头检测疲劳&#xff09; GUI界面设计展示 前言 上次博客我们讲到了如何定位人脸&#xff0c;并且在人脸上进行关键点定位。其中包括5点定位和68点定…

交换机的工作原理

局域网交换技术是数据链路层上的技术&#xff0c;就是转发数据帧。在数据通信中&#xff0c;所有交换设备都执行两个基本操作&#xff1a; 交换数据帧生成并维护交换地址表 交换数据帧 交换机根据数据帧的MAC地址&#xff08;物理地址&#xff09;进行数据帧的转发操作。交换…

Stable Diffusion 入门

Stable Diffusion 入门 简介 稳定扩散&#xff08;Stable Diffusion&#xff09;是一种用于解决基于图论的问题的算法。在许多实际场景中&#xff0c;我们需要对图中的节点进行扩散&#xff0c;以便发现节点之间的关联性和信息传播路径。稳定扩散算法通过模拟节点之间的信息传…

二、程序员指南:数据平面开发套件

MEMPOOL库 内存池是固定大小对象的分配器。在DPDK中&#xff0c;它由名称标识&#xff0c;并使用环形结构来存储空闲对象。它提供一些其他可选服务&#xff0c;例如每个核心的对象缓存和一个对齐辅助工具&#xff0c;以确保对象填充以将它们均匀分布在所有DRAM或DDR3通道上。 …

C# public和internal的区别

在C#中&#xff0c;internal 和 public 是访问修饰符&#xff0c;它们控制着类和类成员的可访问性。 Public public 是最常用的访问修饰符。如果一个类或类成员被声明为 public&#xff0c;那么它可以从任何其他类或者是该类的实例访问到。换句话说&#xff0c;它没有任何访问…

LINUX入门篇【6】----第一个LINUX小程序---进度条及相关知识讲解

前言&#xff1a; 本篇我们将开始尝试构建我们的第一个LINUX的小程序----进度条作为一个十分常见的程序&#xff0c;在我们之后的工程实践中也是需要多次运用&#xff0c;但是介于我们目前还没有去学习网络等方面的知识&#xff0c;没法独立的去利用程序去下载一个真正的程序&…

JAVA基础12:字符串(上)

1.API 1&#xff09;API概述 API(Application Programming Interface):应用程序编程接口 编写一个机器人程序去控制机器人踢足球&#xff0c;程序需要向机器人发出向前跑、向后跑、射门、抢球等各种命令。机器人厂商一定会提供用于控制机器人的接口类&#xff0c;这些类中定…

Devart dotConnect ADO.NET Data Providers Crack

开发数据相关 .NET 应用程序的终极解决方案&#xff1a;快速、灵活、全面、功能丰富、支持 ORM 的 ADO.NET 提供程序 概述 实体框架 连接字符串 博客 高性能 ADO.NET 数据提供程序 dotConnect 是基于 ADO.NET 架构和采用多项创新技术的开发框架构建的增强型数据连接解决方​​…

【配置环境】VS Code怎么使用JavaScript的Mocha测试框架和Chai断言库

一&#xff0c;环境 Windows 11 家庭中文版&#xff0c;64 位操作系统, 基于 x64 的处理器VS Code 版本: 1.83.1 (user setup)Node.js 版本&#xff1a;20.9.0 二&#xff0c;安装背景 在运行测试用例时遇到 ReferenceError: describe is not defined 错误&#xff0c;网上搜寻…