为微信小程序项目添加eslint

背景

在使用vscode开发微信小程序的过程中,修改js的时候发现没有报错提示,让我很不习惯,所以想为微信小程序项目添加eslint配置

编码实战

为微信小程序配置ESLint可以遵循以下步骤:

安装ESLint及其相关插件

首先,确保你的项目已经初始化了npmyarn。如果没有,可以在项目根目录运行以下命令:

npm init -y

接下来,安装ESLint及其必要的插件可以通过以下命令安装:

npm install eslint @babel/core @babel/eslint-parser --save-dev

创建ESLint配置文件

如果未使用交互式初始化,手动创建.eslintrc.js(或.eslintrc.json, .eslintrc.yml)文件,并配置如下内容:

// .eslintrc.js 示例
// .eslintrc.js 示例
module.exports = {env: {browser: true,es6: true},extends: ["eslint:recommended"],globals: {wx: "writable", // 全局变量wx,微信小程序的API对象App: "writable", // 全局函数AppPage: "writable", // 全局函数PageComponent: "writable", // 全局函数ComponentgetApp: "writable", // 全局函数Behavior: "writable", // 全局函数module: "writable"},parser: "@babel/eslint-parser", // 或其他适合的解析器parserOptions: {ecmaVersion: 2022,sourceType: "module",requireConfigFile: false // 如果你没有babel配置文件,可以设为false},plugins: [],rules: {// 自定义规则,根据需要添加或覆盖默认规则// 警告使用console.log,避免在生产环境中滥用"no-console": "warn",// 错误提示未使用的变量,但忽略形如 `_` 开头的参数(通常用作占位)"no-unused-vars": ["error", { argsIgnorePattern: "^_" }],// 代码风格// 错误提示,强制使用2个空格进行缩进indent: ["error", 2],// 警告提示,推荐使用双引号quotes: ["warn", "double"],// 错误提示,要求语句末尾必须有分号semi: ["error", "always"],// 错误提示,禁止对象或数组最后一个元素后面有逗号"comma-dangle": ["error", "never"],// 提高代码质量// 错误提示,强制使用全等比较eqeqeq: "error",// 错误提示,禁止使用debugger语句"no-debugger": "error",// 错误提示,禁止使用未定义的变量"no-undef": "error",// 错误提示,允许函数在定义前声明,但不允许变量在定义前使用"no-use-before-define": ["error", { functions: false }],// 错误提示,防止变量被意外重定义导致的阴影效应"no-shadow": "error",// 可能的错误// 错误提示,禁止不可到达的代码,如 return 后的语句"no-unreachable": "error",// ES6+特性// 错误提示,推荐使用模板字符串"prefer-template": "error",// 错误提示,根据情况决定箭头函数体是否使用大括号,提高代码简洁性"arrow-body-style": ["error", "as-needed"],// 错误提示,推荐使用const代替let,增强代码的不变性"prefer-const": "error",// 错误提示,推荐解构赋值以简化代码(对象解构开启,数组解构关闭)"prefer-destructuring": ["error", { array: false, object: true }],// 可读性和简洁性// 警告提示,限制每行代码的最大长度为120字符,增强代码可读性"max-len": ["warn", { code: 120 }],// 错误提示,强制使用驼峰命名法命名变量和函数camelcase: "error"}
};

集成到编辑器

如果你使用的是VSCode或其他支持ESLint的编辑器,确保安装了ESLint插件,并配置为使用项目根目录下的.eslintrc.js

检查ESLint是否正常运行

在vscoe中打开一个js文件,鼠标移动到右下角的JavaScript左边的"{}"图标上,正常运行的情况如下图所示:在这里插入图片描述
不正常的情况如下图:
在这里插入图片描述
点击"Open Eslint Output ",查看报错日志,根据报错信息一一处理,常见的报错可能有:ESLint、解析器以及其他相关插件的版本之间兼容。有时高版本的ESLint可能与旧项目不兼容,需要降级或升级其他依赖以匹配;eslint配置中使用了错误的配置项;

添加代码格式化设置(建议)

为了更好搭配我们的eslint,在项目根目录新建.prettierrc.js

module.exports = {printWidth: 120, // 调整以匹配ESLint中的"max-len"规则(120字符)tabWidth: 2, // 与两者配置一致useTabs: false, // 添加此行以明确使用空格而非制表符,与普遍代码风格一致semi: true, // 与ESLint配置中"semi"规则保持一致,即在语句末尾添加分号singleQuote: false, // 调整以匹配ESLint配置中的"quotes"规则(使用双引号)trailingComma: 'none', // 调整以匹配ESLint配置中的"comma-dangle"规则(禁止末尾逗号)arrowParens: 'avoid', // 调整以与ESLint配置中的倾向相匹配,特别是在"arrow-body-style"规则暗示的按需使用圆括号bracketSpacing: true, // 保持默认,与多数风格指南一致jsxBracketSameLine: false, // 默认设置,可根据具体需求调整endOfLine: 'lf', // 维持跨平台兼容性,默认或依据项目规范
};

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

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

相关文章

基于IDEA的Maven(坐标信息介绍和编写)

这篇博客来学习和分析一下: " pom.xml " 所生成的最基本的信息。 之前的博客中讲到,学 Maven 就是学 " pom.xml " 的配置。后面也会围绕这个文件进行学习。 目录 一、分析 pom.xml 文件 (1)分析的 "p…

2024 年最新 Python 基于火山引擎豆包大模型搭建 QQ 机器人详细教程(更新中)

豆包大模型概述 火山引擎官网:https://www.volcengine.com/ 字节跳动推出的自研大模型。通过字节跳动内部50业务场景实践验证,每日千亿级tokens大使用量持续打磨,提供多模态能力,以优质模型效果为企业打造丰富的业务体验。 模型…

数据库 | SQL语言和关系代数汇总篇(*^▽^*)

双重/两个 not exists 嵌套查询 简单分析_两个not exists-CSDN博客 最明白的 not exists 双层嵌套讲解 SQL 查询语句_not exist 嵌套-CSDN博客 1. 答案: 2. 答案: 3. 4. 5. 6. 7. 8. 这个SQL查询是从两个表(假设是SPJ和P)中检…

智能合约新项目 链上智能合约前端H5源码 智能合约区块链 以太坊前端调用智能合约

智能合约新项目 链上智能合约前端H5源码 智能合约区块链 以太坊前端调用智能合约 源码下载:https://download.csdn.net/download/m0_66047725/89402192 更多资源下载:关注我。

.NET+Python量化【1】——环境部署和个人资金账户信息查询

前言:量化资料很少,.NET更少。那我就来开个先河吧~ 以下是使用QMT进行量化开发的环境部署和基础信息获取有关操作。 1、首先自己申请券商的QMT权限,此步骤省略。 2、登陆QMT,选择极简模式,或者独立交易模式之类的。会进…

阿里员工:“大厂病”导致有些人不太正常

阿里巴巴对“大公司病”开刀 阿里巴巴宣布对“大公司病”开刀,终于有高层意识到这个问题的严重性,并决心解决。所谓“大公司病”,不仅体现在规模臃肿、部门繁多、层次复杂,还包括中层管理人员的不作为。这些人处在上传下达的位置&…

旅游管理平台系统

摘要 如今许多地区的风景已经随着网络技术的不断发展和进步而映入人们的眼帘,旅游已经成为一种大众化的休闲方式。而青海海西州风光旖旎,民族文化独特,更是吸引了众多游客纷至沓来。海西州地域广阔、人烟稀少、是一个经济发展缓慢的地方&…

nginx+tomcat负载均衡、动静分离群集【☆☆☆☆☆】

Nginx是一款非常优秀的HTTP服务器软件,性能比tomcat更优秀,它支持高达50 000个并发连接数,拥有强大的静态资源处理能力,运行稳定,内存、CPU等系统资源消耗非常低。目前很多大型网站都应用Nginx服务器作为后端网站程序的…

Python Textract库:文本提取

更多Python学习内容:ipengtao.com Textract是一个强大的Python库,用于从各种文件格式中提取文本。无论是PDF、Word文档、Excel电子表格、HTML页面还是图像,Textract都能有效地提取其中的文本内容。Textract通过集成多种开源工具和库&#xff…

opencascade AIS_InteractiveContext源码学习1 object display management 对象显示管理

AIS_InteractiveContext 前言 交互上下文(Interactive Context)允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是,对于已经被交互上下文识别的交互对象,必须使用上下文方法进行…

centOS Stream9配置NAT8网络

首先将VMware关机,添加网络适配器 启动虚拟机,查看ens192是否打开连接 安装的图形化需要查看右上角电源处网卡是否连接 最小化安装一般不会出现未连接的状态 使用ip a 查看 配置网卡文件 cd /etc/NetworkManager/system-connections/cd到当前目录下…

7-Zip

最牛掰的解压缩的开源软件!赏!!!! 概述 7-Zip 是一款免费开源的文件归档和压缩软件,由于其高压缩比和支持多种格式等优势,越来越受到用户的青睐。7-Zip 最初由一位俄罗斯程序员开发&#xff0c…

在 Visual Studio 2022 (Visual C++ 17) 中使用 Visual Leak Detector

在 Visual C 2022 中使用 Visual Leak Detector 1 问题描述1.1 内存泄漏的困扰和解决之道1.2 内存泄漏检测工具的选择1.3 VLD的现状 2 安装和设置VLD的环境变量2.1 安装VLD文件2.2 VLD安装后的目录和文件说明2.2.1 include子目录说明2.2.2 lib子目录说明2.2.2.1 目录整理 2.2.3…

uniapp app一键登录

一键登录不需要单独写页面,uniapp 有原生的页面 第一步,登录Dcloud后台》我的应用》点击应用名称 填写完点击 uniCloud模块新建一个服务空间》选择免费 , 创建完点击一键登录,添加应用,这个需要审核,“大概一天左右”…

ORM框架SQLAlchemy

ORM框架SQLAlchemy 目录 ORM框架SQLAlchemy介绍安装架构连接数据库1. PostgreSQL2. MySQL3. Oracle4. Microsoft SQL Server5. SQLite 创建连接池原生Python操作数据库SQLAlchemy的ORM操作创建表外键字段的创建一对多多对多 ORM操作增删改查查询添加删除修改 介绍 sqlalchemy是…

帝国CMS二次开发H5手游如何让同一个url 不同的模板

帝国CMS在二次开发《72游戏网》的时候,H5手游如何让同一个url 不同的模板 比如:www.72yy.com/you/11935.html 是H5游戏宣传页 由于很多H5游戏和网页游戏都是需要使用iframe来嵌套使用的 利于自己网站SEO收录优化 那么就再复制一套程序 用二级目录或者二…

一种基于非线性滤波过程的旋转机械故障诊断方法(MATLAB)

在众多的旋转机械故障诊断方法中,包络分析,又称为共振解调技术,是目前应用最为成功的方法之一。首先,对激励引起的共振频带进行带通滤波,然后对滤波信号进行包络谱分析,通过识别包络谱中的故障相关的特征频…

【Linux基础IO】重定向以及原理分析

我们先来看下面一个情况&#xff1a; #include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #define filename "text.txt"int main(){close(1);//关…

[Linux] 系统管理

全局配置文件 用户个性化配置 配置文件的种类 alias命令和unalias命令 进程管理 进程表

使用Docker在Mac上部署OnlyOffice,预览编辑word、excel、ppt非常好

前端编辑word、ppt文档&#xff0c;开源免费方案并没有找到合适的&#xff0c;像wps、石墨文档都是自研的方案。实现过程中wps采用的svg方案&#xff0c;而石墨文档采用的是canvas&#xff0c;它们均是自己来实现编辑器&#xff0c;不依赖浏览器提供的编辑器&#xff08;conten…