前端项目规范化1:什么是.editorconfig文件以及prettier转换.editorconfig文件属性

什么是EditorConfig

EditorConfig有助于为在不同编辑器和IDE中处理同一项目的多个开发人员维护一致的编码风格

EditorConfig项目由一个用于定义编码样式的文件格式和一组文本编辑器插件组成,这些插件使编辑器能够读取文件格式并遵守定义的样式

EditorConfig文件很容易阅读,并且可以很好地与版本控制系统配合使用

EditorConfig文件是什么样子的

.editorconfig文件即EditorConfig文件
以下是一个.editorconfig文件示例

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

[*.md]
trim_trailing_whitespace = false

属性列表

https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties

indent_style

缩进样式

这些值不区分大小写。它们将被核心库降为小写

可能的值

  • tab
  • space

indent_size

缩进大小(以单间距字符为单位)

这些值不区分大小写。它们将被核心库降为小写

可能的值

  • 整数
  • tab

如果indent_size等于tab,则indent_size将设置为tab大小。如果指定了tab_width,则应为tab_width;如果未指定tab_width,则应设置为编辑器设置的tab大小

tab_width

单个制表符的宽度

可能的值

  • 正整数(当indent_size是一个数字时,默认为indent_size)

end_of_line

行尾文件格式(Unix、DOS、Mac)

这些值不区分大小写。它们将被核心库降为小写

注意:如果您想在不同的操作系统之间使用行结尾,最好不要设置此选项,而是将该任务留给VCS!在未来,我们可能会为这种情况添加像native这样的值(cf #226

可能的值

  • lf
  • crlf
  • cr

charset

文件字符编码(请参阅字符集支持)

这些值不区分大小写。它们将被核心库降为小写

可能的值

  • latin1
  • utf-8
  • utf-16be
  • utf-16le
  • utf-8-bom

trim_trailing_whitespace

表示是否从行尾删除空白

这些值不区分大小写。它们将被核心库降为小写

可能的值

  • true:删除换行符之前的任何空白字符
  • false:确保编辑器保留空白字符

insert_final_newline

表示文件是否应以换行结束

这些值不区分大小写。它们将被核心库降为小写

可能的值

  • true
  • false

max_line_length

在指定的字符数之后强制换行。off可关闭此功能(使用编辑器设置)

可能的值

  • 正整数
  • off

prettier转换.editorconfig

prettier是前端著名的代码格式化工具,它可以与.editorconfig结合使用

prettier-vscode插件设置useEditorConfig为true,或者调用以编程方式调用prettier.resolveConfig(filePath, { editorconfig: true })情况下

prettier会转换.editorconfig文件的一些配置属性为prettier相应的配置属性,转换出的配置属性会被prettier配置文件中相应配置属性覆盖(即优先级低于prettier配置文件),目前,有以下属性支持:

.editorconfig配置

[*]
end_of_line = lf
indent_style = space
indent_size = 8
max_line_length = 80

会被prettier转换成

{ endOfLine: 'lf', useTabs: false, tabWidth: 8, printWidth: 80 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用Prettier和ESLint时,可以创建一个.prettierrc.cjs文件来配置Prettier的规则。这个文件可以使用CommonJS模块的语法来导出一个对象,对象中包含了Prettier的配置规则。你可以使用以下命令来创建.prettierrc.cjs文件: ``` echo {} > .prettierrc.cjs ``` 这样就创建了一个空的.prettierrc.cjs文件,你可以在其中添加Prettier的配置规则。\[1\]同时,为了解决Prettier和ESLint的冲突问题,你还需要安装eslint-plugin-prettier和eslint-config-prettier插件。你可以使用以下命令来安装这两个插件: ``` # 使用npm安装 npm i eslint-plugin-prettier eslint-config-prettier -D # 使用yarn安装 yarn add eslint-plugin-prettier eslint-config-prettier -D ``` 安装完成后,你需要在.eslintrc.cjs文件中添加Prettier插件的配置,以解决Prettier和ESLint的冲突问题。在extends数组中添加"plugin:prettier/recommended",这样Prettier的规则就会被应用到ESLint的规则中。\[2\]同时,你还可以使用eslint-plugin-prettier和eslint-config-prettier来关闭ESLint中与Prettier冲突的规则,以确保两者能够正常协同工作。\[3\] #### 引用[.reference_title] - *1* *2* *3* [EditorConfig + ESLint + Prettier 实现代码规范化](https://blog.csdn.net/lhz_333/article/details/126407788)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值