专栏首页Web行业观察统一代码风格工具——EditorConfig
原创

统一代码风格工具——EditorConfig

文档

EditorConfig for VS Code EditorConfig官网 微软说明 editorconfig-vscode github

简介

EditorConfig和Prettier一样,都是用来配置格式化你的代码的,这个格式化代码,要和你lint配置相符!否则会出现你格式化代码以后,却不能通过你的代码校验工具的检验

EditorConfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置,例如缩进样式、选项卡宽度、行尾字符以及编码等,而无需考虑使用的编辑器或 IDE

editorConfig不是什么软件,而是一个名称为.editorconfig的自定义文件。该文件用来定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高,这在多人合作开发项目时十分有用而且必要

有些编辑器默认支持editorConfig,如webstorm;而有些编辑器则需要安装editorConfig插件,如ATOM、Sublime、VS Code等

当打开一个文件时,EditorConfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件,直到有一个配置文件root=true

EditorConfig的配置文件是从上往下读取的并且最近的EditorConfig配置文件会被最先读取. 匹配EditorConfig配置文件中的配置项会按照读取顺序被应用, 所以最近的配置文件中的配置项拥有优先权

如果.editorconfig文件没有进行某些配置,则使用编辑器默认的设置

配置.editorconfig

在当前项目根目录下添加.editorconfig文件

editorconfig文件是定义一些格式化规则(此规则并不会被vscode直接解析)

官网的一个配置

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file 表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
root = true

# Unix-style newlines with a newline ending every file 对于所有的文件  始终在文件末尾插入一个新行
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset  对于所有的js,py文件,设置文件字符集为utf-8
[*.{js,py}]
charset = utf-8

# 4 space indentation 控制py文件类型的缩进大小
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory  设置在lib目录下所有JS的缩进为
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

    

语法

editorConfig配置文件需要是UTF-8字符集编码的, 以回车换行或换行作为一行的分隔符

斜线(/)被用作为一个路径分隔符,井号(#)或分号(;)被用作于注释. 注释需要与注释符号写在同一行

通配符

*                匹配除/之外的任意字符串
**               匹配任意字符串
?                匹配任意单个字符
[name]           匹配name中的任意一个单一字符
[!name]          匹配不存在name中的任意一个单一字符
{s1,s2,s3}       匹配给定的字符串中的任意一个(用逗号分隔) 
{num1..num2}    匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数

属性

所有的属性和值都是忽略大小写的. 解析时它们都是小写的

indent_style    设置缩进风格(tab是硬缩进,space为软缩进)
indent_size     用一个整数定义的列数来设置缩进的宽度,如果indent_style为tab,则此属性默认为tab_width
tab_width       用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line     设置换行符,值为lf、cr和crlf
charset         设置编码,值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建议使用utf-8-bom
trim_trailing_whitespace  设为true表示会去除换行行首的任意空白字符。
insert_final_newline      设为true表示使文件以一个空白行结尾
root           表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件

控制指定文件类型的缩进大小

这里可以设置,如下:

[{*.json,*.yml}]
indent_style = space
indent_size = 2

对于.json .yml 文件,使用空格替代tab,并且一个tab会被替换为2个空格。

文件末尾新行

始终在文件末尾插入一个新行

[*]
end_of_line = lf
insert_final_newline = true

对于所有的文件

  • 每一行的尾部自动调整为 Lf
  • 文件的末尾是一个空行

实例

# editorconfig.org

root = true

[*]
charset = utf-8
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true


[*.md]
trim_trailing_whitespace = false

安装 EditorConfig扩展

在vscode里面安装EditorConfig

EditorConfig扩展的作用是读取第一步创建的editorconfig文件中定义的规则,并覆盖user/workspace settings中的对应配置(从这我们也可以看出vscode本身其实是并不直接支持editorconfig的)

全局安装或局部安装

editorconfig依赖包(npm install -g editorconfig | npm install -D editorconfig)

安装editorconfig依赖包主要是因为EditorConfig依赖于editorconfig包,不安装的可能会导致EditorConfig无法正常解析我们在第一步定义的editorconfig文件

使用

打开需要格式化的文件并手动格式化代码(shift+alt+f)

使用建议

配合代码检查工具使用,比如说:ESLint或TSLint,统一代码风格。

我的用于vue项目的配置文件

配合ESLint + Prettier

#表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
root = true

# Unix-style newlines with a newline ending every file 对于所有的文件  始终在文件末尾插入一个新行
[*]
end_of_line = crlf
insert_final_newline = true

# 对于所有的js文件,设置文件字符集为utf-8
[*.js]
charset = utf-8

# 设置所有JS,vue的缩进为
[*.{js,vue}]

indent_style = tab


原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SVN之于GIT的理论优势

    SVN(SubVersion)是Apache下一个开源的中心化版本控制系统,采用客户端/服务器架构存放项目仓库(仓库 = 代码 + 历史)。和分布式的Git相比...

    Jean
  • 为什么前后端分离了,你比从前更痛苦?

    前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

    Jean
  • 可视化讲解 DOM 的构建过程

    最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

    Jean
  • 【开源公告】TKEStack正式开源

    TKEStack是腾讯开源的一款集强壮性和易用性于一身的企业级容器编排引擎,以极简的向导式界面提供了容器应用的全生命周期管理能力,帮助用户在私有云环境中敏捷、...

    腾讯开源
  • VIM不正常退出产生的swp文件将泄漏敏感信息

    原理可参考此文章:https://blog.csdn.net/pwiling/article/details/51830781

    V站CEO-西顾
  • 备战“金九银十”10道String高频面试题解析

    String 是我们实际开发中使用频率非常高的类,Java 可以通过 String 类来创建和操作字符串,使用频率越高的类,我们就越容易忽视它,因为见的多所以熟...

    程序员追风
  • JAVA 面向对象

    拾点阳光
  • 搞懂机器学习模型的运行逻辑,从理解 Shapley 值开始

    我第一次听说 Shapley 值是在学习模型可解释性的时候。我知道了 SHAP,它是一个框架,可以更好地理解为什么机器学习模型会那样运行。事实证明,Shaple...

    AI研习社
  • Java之继承、抽象类、接口篇

    一、继承(extends) 什么是继承? 继承是对现实生活中的"分类"概念的一种模拟。 狮子拥有动物的一切基本特性,但同时又拥有自己的独特的特性,这就是"...

    CN_Simo
  • Java 继承详解

    多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可。

    用户7886150

扫码关注云+社区

领取腾讯云代金券