当前位置: 首页 > 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…...

sklearn分类报告看不懂?5分钟搞懂micro和macro的F1差异(附代码示例)

sklearn分类报告看不懂&#xff1f;5分钟搞懂micro和macro的F1差异&#xff08;附代码示例&#xff09; 第一次看到sklearn的classification_report输出时&#xff0c;那些密密麻麻的precision、recall、f1-score已经够让人头疼了&#xff0c;更别提最后两行突然冒出的micro和m…...

Draw.io电子工程绘图库终极指南:三步构建专业电路图

Draw.io电子工程绘图库终极指南&#xff1a;三步构建专业电路图 【免费下载链接】Draw-io-ECE Custom-made draw.io-shapes - in the form of an importable library - for drawing circuits and conceptual drawings in draw.io. 项目地址: https://gitcode.com/gh_mirrors/…...

2026 年,AI 编程 Agent 的真正分水岭——Harness 详解

2026 年&#xff0c;AI 编程 Agent 的真正分水岭&#xff0c;到底在哪里&#xff1f; Harness 才是 AI Agent 的胜负手 - 全景信息图 一个反直觉的结论 这几个月你应该也发现了&#xff0c;各家模型隔三差五就刷一波榜 GPT-5.4 来了&#xff0c;Opus 4.6 来了&#xff0c;Ge…...

通用GUI编程技术——图形渲染实战(二十九)——Direct2D架构与资源体系:GPU加速2D渲染入门

通用GUI编程技术——图形渲染实战&#xff08;二十九&#xff09;——Direct2D架构与资源体系&#xff1a;GPU加速2D渲染入门 仓库已经开源&#xff01;喜欢的话点个⭐&#xff01;包含Win32的目前已完成教程&#xff0c;力争做一个完备的GUI教程&#xff01; 欢迎各位大佬前来…...

从原理图到PCB:LM317与LM337正负电源设计实战与避坑指南

1. 线性电源与开关电源的抉择 刚入行那会儿&#xff0c;我也纠结过该用线性电源还是开关电源。现在做音频前级放大器项目&#xff0c;果断选择了LM317/LM337这套经典方案。线性电源最打动我的就是它的"干净"——就像用滤水壶慢慢过滤的自来水&#xff0c;虽然出水速度…...

DCT-Net人像卡通化:SpringBoot后端集成指南

DCT-Net人像卡通化&#xff1a;SpringBoot后端集成指南 1. 引言 你有没有想过给自己的社交头像换个卡通风格&#xff1f;或者为应用用户提供一键生成卡通头像的功能&#xff1f;DCT-Net人像卡通化技术让这变得简单。这个模型能够将普通人像照片转换成各种风格的卡通形象&…...

5分钟快速上手eRPC:从零构建你的第一个RPC服务

5分钟快速上手eRPC&#xff1a;从零构建你的第一个RPC服务 【免费下载链接】erpc An efficient, extensible and easy-to-use RPC framework. 项目地址: https://gitcode.com/gh_mirrors/er/erpc eRPC是一个高效、可扩展且易于使用的RPC框架&#xff0c;让开发者能够快速…...

SiameseUIE基础教程:从SSH登录到实体输出的完整流程详解

SiameseUIE基础教程&#xff1a;从SSH登录到实体输出的完整流程详解 1. 引言&#xff1a;信息抽取的便捷解决方案 信息抽取是自然语言处理中的核心任务之一&#xff0c;能够从非结构化文本中自动识别和提取关键信息。传统的信息抽取方案往往需要复杂的环境配置和大量的依赖安…...

Z-Image-GGUF人像生成专项测试:不同种族、年龄与表情的刻画能力

Z-Image-GGUF人像生成专项测试&#xff1a;不同种族、年龄与表情的刻画能力 最近在尝试各种图像生成模型&#xff0c;发现一个挺有意思的现象&#xff1a;很多模型生成风景、静物效果不错&#xff0c;但一到人像&#xff0c;尤其是需要体现特定种族、年龄和表情的时候&#xf…...

衣柜里的暖,是藏不住的牵挂

老李独居在老房子里&#xff0c;儿女都在外地打拼&#xff0c;一年到头难得回几次家&#xff0c;平日里冷冷清清的屋子&#xff0c;只有逢年过节才会热闹几分。 北方的冬天总是格外漫长&#xff0c;寒风一吹&#xff0c;窗户缝里都透着刺骨的凉&#xff0c;老李年纪大了&#x…...