背景:在一次项目开发中,我和同事使用的都是 VS Code 编辑器,但同事的缩进是4个空格,而我的编辑器缩进是2个空格。尽管我已经对 VS Code 编辑器进行了如下设置:
虽然我对 VS Code 编辑器进行了如上图一样的设置,依然没有改变两个空格的缩进。这样产生的后果就是每个人修改后的代码在格式上总是不统一的,那么提交到 git 上就会代码风格不一致,变得非常丑陋。
我是一个有着代码强迫症的人,因此我决定要彻底解决这个让人难受的问题,经过两个小时的研究后,最终将问题锁定在 VS Code 插件:EditorConfig for VS Code。
本篇文章主要介绍 VS Code 插件:EditorConfig for VS Code
作用:
当大家在协同工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范呢?
而 EditorConfig 正好可以解决这个问题,在这里配置的代码规范规则优先级高于编辑器默认的代码格式化规则。如果没有配置 editorConfig,在格式化时将会执行编辑器默认的代码格式化规则;如果配置了editorConfig,则按照 editorConfig 中的配置来格式化代码,从而忽略编辑器默认的代码格式化规则。
EditorConfig 包含一个用于定义代码格式的文件和一批编辑器插件,这些插件是让编辑器读取配置文件并以此来格式化代码。
安装:
步骤一:在 VS Code 编辑器插件扩展中查找 EditorConfig for VS Code 并安装
步骤二:在项目根目录中创建 .editorconfig 文件(如果已经存在,则不用创建,可直接进行配置),并进行配置,配置选项参考 Supported Properties 或者参考:complete list of properties.
步骤三:配置 .editorconfig 文件时的格式参考文件:Example file
步骤四:以下是我的项目根目录中 .editorconfig 文件中的配置
注意:如果要在项目根目录中 .editorconfig 文件中的配置生效,一定要在 VS Code 编辑器中安装 EditorConfig for VS Code 插件,否则 .editorconfig 文件中的配置不生效。
EditorConfig for VS Code 与 ESLint 或 TSLint 的比较:
这时候你或许有些疑惑,因为 EditorConfig for VS Code 的作用是在团队开发中保持代码规范使得代码风格一致,而 ESLint 或 TSLint 也是在团队开发中保持代码规范,使得代码风格一直,它们之间在功能上是不是有些重复,在一个项目中同时拥有这些是不是有些冗余。我对这个问题的简单理解是这样的:
EditorConfig for VS Code 这个插件只能简单的配置一些规范,并不能完全满足代码规范的需求,所以还需要其它代码检查工具配合使用,比如说:ESLint或StyleLint,统一代码风格。
参考网址:
EditorConfig:https://editorconfig.org/