uni-app EditorConfig 不起作用

发布于 1周前 作者 eggper 来自 Uni-App

uni-app EditorConfig 不起作用

操作步骤

  • 新建任意项目
  • 新建 .editorconfig 文件
root = true  

[*]  
charset = utf-8  
end_of_line = crlf  
indent_style = space  
indent_size = 4  
tab_width = 4  
max_line_length = 120  
trim_trailing_whitespace = true  
insert_final_newline = true  

[*.{html, js, vue, css, less, scss, sass}]  
indent_size = 4  
tab_width = 4  

[*.{lock, json}]  
indent_size = 2  
tab_width = 2
  • 新建测试 js 文件
(function () {  
    //   
})();
  • 在任意行末输入多余空格

预期结果

  • Ctrl+S 保存后：
    • 行末多余空格被移除
    • 文件末尾新增空行

实际结果

  • Ctrl+S 保存后：
    • 文件表现正常，即视觉上移除了行末多余空格，文件末尾新增了空行
    • 关闭文件后重新打开，或使用其他编辑器打开，文件内容是未被修正的，即包含行末多余空格，且行末无新增空行

bug描述

.editorconfig 文件内容如下

root = true  

[*]  
charset = utf-8  
end_of_line = crlf  
indent_style = space  
indent_size = 4  
tab_width = 4  
max_line_length = 120  
trim_trailing_whitespace = true  
insert_final_newline = true  

[*.{html, js, vue, css, less, scss, sass}]  
indent_size = 4  
tab_width = 4  

[*.{lock, json}]  
indent_size = 2  
tab_width = 2

以上配置在 vscode 和 webstorm 中都可以正常作用，但是在 hbuilderx 中几乎不起作用，体现为：

  • 文件保存时无变化，无格式修正
  • 文件保存时，有格式修正，但是是无效修正，文件关闭后重新打开或在其他编辑器中打开时内容是修正之前的

开发环境信息

项 详情
产品分类 HbuilderX
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 22H2
HBuilderX版本号 3.7.3

Harmonyos Next教程
6 回复

HBuilderX 3.99.2023121601-alpha 已修复。


bug已确认, 后续会尽快修复, 感谢反馈

该问题3.8.7依然存在

3.8.12 依然存在，编辑器都不根据 .editorconfig 和 prettier 配置来的，相关开关和插件都安装了

[uni:helpers] Cannot read properties of undefined (reading ‘length’)报错

在使用uni-app进行跨平台应用开发时，可能会遇到EditorConfig配置不起作用的问题。EditorConfig文件用于定义和维护代码风格，包括缩进、换行符、空格等，确保团队成员在不同编辑器或IDE中保持一致的代码格式。如果配置未能生效，可能是由于以下几个原因：

  1. EditorConfig文件位置不正确：确保.editorconfig文件位于项目的根目录。

  2. 编辑器/IDE不支持或未启用EditorConfig：确保你的编辑器或IDE支持EditorConfig，并且已经启用该功能。

  3. 配置文件格式错误：检查.editorconfig文件的语法是否正确。

以下是一个示例.editorconfig文件，它定义了基本的代码格式规则：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.{js,jsx,ts,tsx,vue,json,css,scss,less,html,md}]
indent_style = space
indent_size = 2

确保你的编辑器或IDE支持EditorConfig。以VS Code为例，可以通过以下步骤启用EditorConfig：

  1. 安装EditorConfig插件（如果尚未安装）：

    • 打开VS Code，进入扩展市场（Extensions）。
    • 搜索“EditorConfig for VS Code”并安装。

  2. 验证EditorConfig是否启用：

    • 打开VS Code的设置（Settings），搜索“EditorConfig”。
    • 确保“Editor: EditorConfig”选项被勾选，表示已启用。

如果以上步骤仍然无法解决问题，可以尝试以下代码示例，用于在项目中手动设置代码格式化规则（注意，这并非EditorConfig的直接解决方案，而是作为替代方案）：

// 在项目的根目录下创建一个.prettierrc文件，用于Prettier格式化
{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

// 在package.json中添加格式化脚本
"scripts": {
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,json,css,scss,less,html,md}\""
}

// 运行格式化脚本
npm run format

上述代码使用了Prettier作为代码格式化工具，并配置了一个npm脚本，可以在项目根目录下运行npm run format来统一格式化代码。虽然这不是EditorConfig的直接解决方案，但它提供了一种保持代码风格一致性的有效方法。

回到顶部