当前位置: 首页 > news >正文

vue重修之自定义项目、ESLint和代码规范修复

文章目录

  • VueCli 自定义创建项目
  • ESlint代码规范及手动修复
  • 代码规范错误

VueCli 自定义创建项目

在这里插入图片描述

  1. 安装脚手架 (已安装)
npm i @vue/cli -g
  1. 创建项目

    vue create xxx
    
    • 选项
    Vue CLI v5.0.8
    ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
    > Manually select features     选自定义
    
    • 手动选择功能
      在这里插入图片描述
  • 选择vue的版本
  • 是否使用history模式
    在这里插入图片描述
  • 选择css预处理
    在这里插入图片描述
  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)
    在这里插入图片描述
  • 选择校验的时机 (直接回车)
    在这里插入图片描述
  • 选择配置文件的生成方式 (直接回车)
    在这里插入图片描述
  • 是否保存预设,下次直接使用? => 不保存,输入 N
    在这里插入图片描述
  • 启动项目
    npm run serve
    

ESlint代码规范及手动修复

  • [JavaScript Standard Style 规范说明] (https://standardjs.com/rules-zhcn.html)
  • 代码规范:一套写代码的约定规则.

代码规范错误

  • 如果代码不符合 standard 的要求,ESlint 会有提示
    在这里插入图片描述
  • 两种解决方案:
    1. 手动修正
    • 根据错误提示来一项一项手动修改纠正。
    • 如果你不认识命令行中的语法报错是,根据错误代码去百度或者ESLint规则表中查找其具体含义。
    1. 自动修正
    • 基于 vscode 插件 ESLint 高亮错误,并通过配置 自动 帮助我们修复错误。

在这里插入图片描述

  • 配置
    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {"source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
    
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
  • settings.json 参考
    {"window.zoomLevel": 2,"workbench.iconTheme": "vscode-icons","editor.tabSize": 2,"emmet.triggerExpansionOnTab": true,// 当保存的时候,eslint自动帮我们修复错误"editor.codeActionsOnSave": {"source.fixAll": true},// 保存代码,不自动格式化"editor.formatOnSave": false
    }
    

相关文章:

vue重修之自定义项目、ESLint和代码规范修复

文章目录 VueCli 自定义创建项目ESlint代码规范及手动修复代码规范错误 VueCli 自定义创建项目 安装脚手架 (已安装) npm i vue/cli -g创建项目 vue create xxx选项 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint) …...

华为OD 完全二叉树非叶子部分后序遍历(200分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应往年部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为OD…...

AI是未来?——神经网络篇

AI是未来?——神经网络篇 文章目录 AI是未来?——神经网络篇1. 神经网络小记问题记录: 1. 神经网络小记 疑问:假如让神经网络识别一张猫的图片,他经过了n个神经元节点最终识别为了狗。那么此时观察产生反应的这些神经…...

c语言练习94:分割链表

分割链表 给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你不需要 保留 每个分区中各节点的初始相对位置。 示例 1: 输入:head [1,4,3,2,5,2], x…...

华为OD 数组二叉树(200分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应往年部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为OD…...

Upload-labs(1-20关保姆级教程)

靶场下载链接 https://github.com/c0ny1/upload-labs 话不多说,直接喂饭 lab-1 上传php木马,发现弹出提示框,查看源码可知是前端过滤 bp抓包,先上传一张正常的jpg图片 修改文件内容和后缀,大概就是想怎么改就怎么…...

C语言实现调整数组中奇数偶数顺序

目录 1.思路2. 代码 1.思路 给定两个下标left和right,left放在数组的起始位置,right放在数组中最后一个元素的位置循环进行一下操作 a. 如果left和right表示的区间[left, right]有效,进行b,否则结束循环 b. left从前往后找&#…...

从车窗升降一探 Android 车机的重要 API:车辆属性 CarProperty

前言 前面我们介绍过 Android 车机 Automotive OS 的几块重要内容: 一文了解 Android 车机如何处理中控的旋钮输入从实体按键看 Android 车机的自定义事件机制深度入门 Android 车机核心 CarService 的构成和链路 本篇文章我们聚焦 Android 车机上最重要、最常用…...

Unity读取写入Excel

1.在Plugins中放入dll,118开头的dll在Unity安装目录下(C:\Program Files\Unity\Editor\Data\Mono\lib\mono\unity) 2.写Excel public void WriteExcel(){//文件地址FileInfo newFile new FileInfo(Application.dataPath "/test.xlsx…...

手搭手Ajax经典基础案例省市联动

环境介绍 技术栈 springbootmybatis-plusmysql 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis-plus 3.5.3.2 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http:/…...

分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测(SE注意力机制)

分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测&#xff08;SE注意力机制&#xff09; 目录 分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测&#xff08;SE注意力机制&#xff09;分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MAT…...

Springboot后端开发_日志

SpringBoot_日志 简介1、日志框架2、SLF4j使用1、如何在系统中使用SLF4j https://www.slf4j.org2、遗留问题 3、SpringBoot日志关系4、日志使用1、默认配置2、指定配置 5、切换日志框架拓展&#xff1a;日志分组 简介 6 种日志级别 TRACE: designates finer-grained informat…...

Unable to connect to the server: x509: certificate is valid for问题解决

文章目录 环境描述问题描述问题原因解决方案额外问题问题描述问题解决方案新问题 环境描述 Kubernetes版本1.15测试客户端centos7 问题描述 将构建于内网网络环境上的kubernetes集群的/etc/kubernetes/admin.conf文件拷贝到外网的一台装有kubernetes客户端的设备上&#xff…...

使用vite搭建前端项目

1、在vscode 终端那里执行创建前端工程项目&#xff0c;其中shop-admin为项目名称&#xff1a; npm init vite-app shop-admin 提示如需安装其他依赖执行npm install ....,否则忽略(第三步再讲)。 2、执行npm run dev 命令直接运行创建好的项目&#xff0c;在浏览器打开链接…...

leetcode1658. 将 x 减到 0 的最小操作数

题目链接&#xff1a;1658. 将 x 减到 0 的最小操作数 - 力扣&#xff08;LeetCode&#xff09; 知道滑动窗口&#xff0c;代码却写不出来 #define MIN(a ,b) ((a) < (b) ? (a) : (b))int minOperations(int* nums, int numsSize, int x) {int ans INT_MAX;int sum 0;f…...

Jenkins 重新定义 pom 内容,打包

文章目录 源码管理构建 源码管理 添加仓库地址&#xff0c;拉取凭证&#xff0c;选择需要的分支 构建 勾选 构建环境 下删除原始 build 配置&#xff0c;防止文件错误 Pre Steps 构建前处理 pom.xml &#xff0c;例如我是需要删除该模块的所有子模块配置&#xff0c;我这里…...

自然语言处理---Transformer构建语言模型

语言模型概述 以一个符合语言规律的序列为输入&#xff0c;模型将利用序列间关系等特征&#xff0c;输出一个在所有词汇上的概率分布&#xff0c;这样的模型称为语言模型。 # 语言模型的训练语料一般来自于文章&#xff0c;对应的源文本和目标文本形如: src1 "I can do&…...

【WPF】对Image元素进行缩放平移等操作

元素布局 <Border Grid.Row"1" Name"border" ClipToBounds"True" Margin"10,10,10,10"><Image Name"image" Visibility"Visible" Margin"3,3,3,3" Grid.Column"1" Source"{Bin…...

JavaScript中Bom节点和表单的获取值

Bom节点 代表浏览器对象模型&#xff08;Browser Object Model&#xff09;&#xff0c;它是浏览器提供的 JavaScript API&#xff0c;用于与浏览器窗口和浏览器本身进行交互 获取当前网页的URL&#xff1a; const currentURL window.location.href; console.log(currentURL…...

RDB.js:适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…...

如何用这个开源工具让英雄联盟游戏体验提升3倍?

如何用这个开源工具让英雄联盟游戏体验提升3倍&#xff1f; 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为错过对局接受而懊恼&#xf…...

Mybatisplus 找不到分页组件

Mybatisplus的pom升级3.5.9后找不到分页组件类PaginationInnerInterceptor&#xff0c;挣扎一番发现需要单独导入一个pom&#xff0c;代码如下<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-jsqlparser</artifactId><…...

芯驰X9车规级芯片实战:如何用6核Cortex-A55打造智能座舱(附开发板评测)

芯驰X9车规级芯片开发实战&#xff1a;从选型到多屏异显的智能座舱全流程解析 在智能汽车快速普及的今天&#xff0c;座舱系统的智能化程度已成为消费者购车的重要考量因素。作为国内领先的车规级芯片解决方案&#xff0c;芯驰X9凭借其6核Cortex-A55架构和丰富的接口资源&#…...

茶叶病害目标检测数据集 茶叶病害识别管理系统 数据集+界面+模型 识别功能包括登录、导入模型、图片、视频、实时检测

01 — 茶叶病害目标检测&#xff08;数据集/界面 基于YOLO全系列&#xff0c;界面非常美观&#xff0c;非常详细&#xff09;模块/类别 详细说明 一、技术栈编程语言&#xff1a;PythonGUI框架&#xff1a;PyQt5&#xff08;界面美观、操作友好&#xff09;目标检测模型框架&am…...

别再死记硬背DAX函数了!用这3个真实业务场景(销售分析/客户分层/动态排名)彻底搞懂PowerBI表操作

用真实业务场景解锁PowerBI表操作函数的实战价值 在数据分析领域&#xff0c;掌握DAX函数就像获得了一把瑞士军刀&#xff0c;但真正的高手不在于记住每个工具的名称&#xff0c;而在于知道何时使用以及如何组合它们解决实际问题。本文将带你跳出函数手册的死记硬背模式&#x…...

ViT图像分类-中文-日常物品实战教程:中文标签本地化翻译与多语言扩展方法

ViT图像分类-中文-日常物品实战教程&#xff1a;中文标签本地化翻译与多语言扩展方法 想用AI模型识别你手机里的照片&#xff0c;却苦于模型只认识英文标签&#xff1f;比如&#xff0c;你拍了一张“包子”的照片&#xff0c;模型却告诉你这是“steamed stuffed bun”。今天&a…...

深度掌控AMD Ryzen:SMUDebugTool硬件级调试全攻略

深度掌控AMD Ryzen&#xff1a;SMUDebugTool硬件级调试全攻略 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcod…...

[AI/向量数据库/GUI] Attu : Milvus 的图形化与一体化管理工具涎

前言 在使用 kubectl get $KIND -o yaml 查看 k8s 资源时&#xff0c;输出结果中包含大量由集群自动生成的元数据&#xff08;如 managedFields、resourceVersion、uid 等&#xff09;。这些信息在实际复用 yaml 清单时需要手动清理&#xff0c;增加了额外的工作量。 使用 kube…...

基于VLOOKUP的3D Face HRN数据管理方案

基于VLOOKUP的3D Face HRN数据管理方案 用Excel函数解决AI训练数据的管理难题&#xff0c;让3D人脸重建的数据管理变得简单高效 1. 引言&#xff1a;当AI遇上Excel 在3D人脸重建项目中&#xff0c;最让人头疼的往往不是算法本身&#xff0c;而是海量训练数据的管理问题。想象一…...

Windows任务栏美化终极指南:TranslucentTB让你的桌面秒变高级感

Windows任务栏美化终极指南&#xff1a;TranslucentTB让你的桌面秒变高级感 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 还在忍受Wind…...