做哪个网站卖一手房比较好,手机搜索引擎排名,一般做网站什么价格,个人免费建网站背景
在使用vscode开发微信小程序的过程中#xff0c;修改js的时候发现没有报错提示#xff0c;让我很不习惯#xff0c;所以想为微信小程序项目添加eslint配置
编码实战
为微信小程序配置ESLint可以遵循以下步骤#xff1a;
安装ESLint及其相关插件
首先#xff0c;…背景
在使用vscode开发微信小程序的过程中修改js的时候发现没有报错提示让我很不习惯所以想为微信小程序项目添加eslint配置
编码实战
为微信小程序配置ESLint可以遵循以下步骤
安装ESLint及其相关插件
首先确保你的项目已经初始化了npm或yarn。如果没有可以在项目根目录运行以下命令
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, // 维持跨平台兼容性默认或依据项目规范
};
