lint 代码规范,手动修复,以及vscode的第三方插件eslint自动修复

embedded/2024/9/22 18:24:23/

ESlint代码规范

  1. 不是语法规范,是一种书写风格,加多少空格,缩进多少,加不加分号,类似于书信的写作格式

  2. ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则,目前Standard的代码风格用的比较多

  3. 建议把Standard代码规范看一遍,然后在写的时候, 遇到错误就查询解决

  4. 网址:JavaScript Standard Style

安装ESlint

创建脚手架项目的时候就选择ESlint的安装,或者后期通过命令安装

全局安装ESLint的命令为:

javascript"> npm install eslint -g

在项目本地dev环境中安装ESLint的命令为:

javascript"> npm install eslint -D

同时,为了检测.vue文件中的js,还需要安装eslint-plugin-vue插件,命令如下:

javascript">npm install eslint-plugin-vue -D

另外,如果你想检测.html文件里的js,可以安装eslint-plugin-html插件,命令为:

javascript"> npm install eslint-plugin-html -D
  • 完成上述安装后,ESLint和相关插件就已经成功安装在你的Vue项目中了

  • 你可以根据需要初始化ESLint配置,生成.eslintrc.js文件,并配置相应的规则来满足你的代码检查需求

  • 请注意,上述命令中的“-D”或“--save-dev”参数表示将ESLint和相关插件作为开发依赖项安装到项目中。如果你使用的是yarn作为包管理工具,相应的命令会有所不同

  • 同时,安装完成后,你可能还需要在项目的根目录下创建一个.eslintignore文件来指定需要忽略的文件或目录,以避免不必要的检查

  • 最后,请确保你的编辑器或IDE支持ESLint,以便在编写代码时实时获取ESLint的反馈和提示

ESlint报错描述

翻译

手动修正代码

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思,你可以根据代码发生错误的规范提示去 ESLint 规则列表中查找其具体含义

打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义

通过插件eslint自动修正

配置代码:

javascript"> // 当保存的时候,eslint自动帮我们修复错误"editor.codeActionsOnSave": {"source.fixAll": true},// 保存代码,不自动格式化"editor.formatOnSave": false

放在settings.json 文件里,步骤:

  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目

  • 注意:使用了eslint校验之后,需要把vscode带的那些格式化工具全禁用了,否则可能会发生冲突


http://www.ppmy.cn/embedded/35627.html

相关文章

如何创建git并上传

Git的配置和上传主要涉及以下步骤: 一、Git的配置 安装Git:首先,你需要在你的计算机上安装Git。这通常可以通过访问Git的官方网站并按照其提供的安装指南来完成。 注册GitHub账户(如果你还没有的话):在Gi…

什么软件能在桌面上做笔记 好用的桌面笔记软件

一直认为,好记性不如烂笔头。在繁忙的工作和生活中,做笔记能够帮助我抓住那些一闪而过的灵感,也能让我随时回溯重要信息。特别是在电脑桌面上做笔记,更是方便快捷,一目了然。 想象一下,你正在工作中&#…

基于AI的Python爬虫-Scrapegraph-ai

网址 https://github.com/VinciGit00/Scrapegraph-ai 刚从github榜单看到的,将ai和爬虫结合起来的项目,我没安装,凡是关于ai的要么自己下载模型,要么用在线的api,这两样我现在都懒得装。 看介绍的话可以根据自然语言…

深度学习之基于Vgg19预训练卷积神经网络图像风格迁移系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 在数字艺术和图像处理领域,图像风格迁移技术一直备受关注。该技术可以将一幅图像的内容和…

第七章 Python 函数进阶

一、函数的多返回值 在 def return_num(): return 1 return 2 这种情况下只能返回1,运行到 return 1后就不在继续运行了; 1.1 语法: def return_num(): return 1 ,2 x, y return_num() print(x) print(y) 按照返回值的顺序…

如何优化npm的性能?

优化npm的性能可以从以下几个方面入手: 按需加载模块:npm CLI是一个JavaScript文件,可以通过性能分析来识别哪些模块是必需的,哪些可以按需加载。例如,某些错误处理模块可能只在出现错误时才需要加载。通过修改npm的脚…

前端之实现大文件上传的解决方案———断点续传

介绍 断点续传是一种网络数据传输方式,允许从中断的地方恢复下载或上传操作,而不是从头开始。这对于大文件传输尤其有用,因为它可以节省时间并减少网络资源的浪费。在前端开发中,实现大文件的断点续传可以提升用户体验&#xff0c…

微博视频怎么下载无水印

在当今社交媒体时代,微博已经成为人们获取信息、分享生活的重要平台之一。许多人在浏览微博时常常遇到一个问题:如何下载微博视频而不留下烦人的水印呢?今天,我将分享一些神秘的方法,让你轻松解锁微博视频的无水印下载技巧。 第…