vscode使用editorconfig插件以及.editorconfig配置文件说明(统一代码风格工具——editorConfig)

2023-11-02

文档

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


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode使用editorconfig插件以及.editorconfig配置文件说明(统一代码风格工具——editorConfig) 的相关文章

随机推荐

  • Arrayfire学习笔记(一)安装

    1 安装 arrayfire的官网上有教程 按照步骤基本就可以完成安装 http arrayfire org docs installing htm 安装的过程就是很简单了 用户需要做的就是设置一个环境变量 即 In edit mode a
  • word文档怎么找回误删的文件_电脑上Word文件不小心误删除了如何恢复

    作为一个从事编辑文案的人员 工作是肯定离不开word的 我总是将整理好后的word文档归类 塞入已命名好的大大小小的文件夹里 最后备份到移动硬盘中 为了减少电脑内存 提高工作效率 我时常清理电脑中已备份过的文件 然而 却有一次 发现头一天备
  • springboot引入系统本地jar,并成功打包war包

    1 修改打包形式 在pom xml里面添加
  • 2023年绿色建筑国际会议(ICoGB 2023)

    2023年绿色建筑国际会议 ICoGB 2023 重要信息 会议网址 www icogb org 会议时间 2023年5月19 21日 召开地点 斯德哥尔摩 截稿时间 2023年4月1日 录用通知 投稿后2周内 收录检索 EI Scopus
  • 【比特笔记】关于文件的认识加一些自己的理解

    文件的认识 文件名 一个文件要有一个唯一的文件标识 以便用户识别和引用 文件名包含三个部分 文件路径 相对路径 or 绝对路径 文件名主干 文件后缀 例如 c code test txt 为了方便起见 文件标识常被称为文件名 我的理解 1
  • 【CAD算法】基于最速下降法(梯度下降)的最短路径实现(python实现)[5]

    1 内容回顾 关于Bezier曲线内容 请参考https blog csdn net iwanderu article details 103604863 优化问题有很多解决方式 例如最速下降 批量梯度下降 随机梯度下降 LM算法 GN算法
  • redis分布式锁实际应用

    签到送积分 userId userinfo MemberID 需要加锁的用户ID lockKey user lock userId 加锁 isLocked false lockExpireTime 10 锁的超时时间 以秒为单位 lockT
  • 消息中间件MQ与RabbitMQ核心知识点

    为什么使用消息队列MQ 消息队列MQ的优点 优点 异步处理 相比于传统的串行 并行方式 提高了系统吞吐量 应用解耦 系统间通过消息通信 不用关心其他系统的处理 流量削锋 可以通过消息队列长度控制请求量 可以缓解短时间内的高并发请求 日志处理
  • ansible--playbook实现负载均衡

    创建缩进文件 指定缩进为2格 devops server4 vim vimrc devops server4 cat vimrc autocmd filetype yaml setlocal ai devops server4 pwd ho
  • en开头的单词_【侃侃单词】词根词缀记单词-导学三:关于词缀

    https www zhihu com video 1109967410911756288 文章首发于微信公众号 侃侃单词 欢迎关注 导学三 关于词缀 Hello 大家好 我是Echo 欢迎来到侃侃单词 节课呢来详细聊聊词缀 我们在导学一的
  • qt plugins 插件框架

    文章目录 一 插件概念 优点 二 插件框架 1 插件框架要素 2 插件系统的构成 主系统 插件管理器 插件 程序流 二 qt框架下的插件 2 0 插件路径 2 1 Qt提供了两个用于创建插件的API 2 2 通过插件使应用程序可扩展包括以下
  • OmniRing智能戒指:手指上的智能健康管理

    随着电子元件的小型化 智能戒指已经获得了极大的普及 这些技术先进的戒指将时尚与功能相结合 为用户提供触手可及的各种功能 智能戒指可用于各种目的 包括健身跟踪 移动通知 非接触式支付 甚至控制智能家居设备 尽管体积小 但这些设备通常配备传感器
  • LRU(最近最少使用页面置换算法)淘汰算法

    什么是LRU算法 LRU是Least Recently Used的缩写 即最近最少使用页面置换算法 是为虚拟页式存储管理服务的 关于操作系统的内存管理 如何节省利用容量不大的内存为最多的进程提供资源 一直是研究的重要方向 而内存的虚拟存储管
  • verilog实现串口通信发送到数码管

    verilog实现串口通信 实现PC与FPGA的串口通信 按键数码管显示 时钟频率50MHZ 波特率115200 可以修改调整 串口输入数据 发送到数码管上进行显示 在vivado建立工程并综合 顶层模块代码如下 timescale 1ns
  • nginx配置vue项目添加访问前缀

    文章目录 前言 实现需求 Nginx配置访问前端 正确配置 注意点 alias的含义 举个栗子 静态文件及js等404错误 前言 最近 在搞一个SASS系统 将原有的单服务 每次卖出一套啥软件就需要部署一套环境 使得运维人员有些捉襟见肘 产
  • Android开源项目:捕鱼达人游戏源代码

    Android开源项目 捕鱼达人游戏源代码 这是一个Android上的开源项目 捕鱼达人游戏源代码 github上的地址链接是 https github com zhangphil Android BuYuDaRenGame git 内容和
  • 详解YAML语法及占位符语法

    一 设计一个YAML数据结构 首先我们提出这样一个需求 1 一个家庭有爸爸 妈妈 孩子 2 这个家庭有一个名字 family name 叫做 happy family 3 爸爸有名字 name 和年龄 age 两个属性 4 妈妈有两个别名
  • Windows中的时间(SYSTEMTIME和FILETIME)

    上一篇中介绍了C运行库中的时间处理函数 这一篇介绍Windows SDk中提供的时间函数 两种时间系统之间没有本质区别 事实上CRT时间是用Windows时间实现的 当然这是说的VC实现 同样提供本地时间和UTC时间之间的转换 不过CRT中
  • TP5 FIND_IN_SET和数组组合成查询条件

    直接上代码 我的是TP5 0 22版本 map exp Db raw FIND IN SET 字段所包含的值 字段 map status 1
  • vscode使用editorconfig插件以及.editorconfig配置文件说明(统一代码风格工具——editorConfig)

    文档 EditorConfig for VS Code EditorConfig官网 微软说明 editorconfig vscode github 简介 EditorConfig和Prettier一样 都是用来配置格式化你的代码的 这个格