• 前端editorconfig使用详解


    前言

    在团队开发中,我们常常无法保证所有成员都会使用同一种编辑器。为了保证项目代码格式的统一,我们就可以用editorconfig来统一管理。

    editorconfig的作用

    EditorConfig项目包含一个用于定义编码样式的文件格式和一个文本编辑器插件集合,这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。

    editorconfig的使用

    • editorconfig插件

    并不是所有的编辑器都默认支持editorconfig。
    有些编辑器默认支持editorConfig,如webstorm;而有些编辑器则需要安装editorConfig插件,如ATOM、Sublime、VS Code等

    • .editorconfig文件

    .editorconfig 自定义文件是用来定义编辑器的编码格式规范,编辑器的行为会与.editorconfig文件中定义的一致,并且其优先级比编辑器自身的设置要高。.editorconfig一般放在项目的根目录下。

    editorconfig的编码属性

    表示是最顶层的配置文件,发现为true时,才会停止查找.editorconfig文件
    root
    
    设置缩进风格,可选值有制表符tab和空格space
    indent_style
    
    设置缩进空格数,一般为整数2或4
    indent_size
    
    设置tab类型的缩进列数,一般为整数2或4
    tab_width
    
    编码格式,可选值有latin1、utf-8(一般使用它)、utf-16be、utf-16le
    charset
    
    保存文件时是否在文件的最后插入一个空行。可为true和false
    insert_final_newline
    
    是否删除行尾的空格,可为true和false
    trim_trailing_whitespace
    
    设置换行符格式,可选值lf(一般为它)、cr、crlf
    end_of_line
    

    PS:

    • 所有属性和值都不区分大小写,如果没有指定属性,将使用编辑器自身的设置。
    • 所有设置过的属性,都可以将值设为unset来删除之前的设置,例如添加indent_size = unset来取消对indent_size的定义。
    • indent_size和tab_width的区别
      如果indent_style 的值为 tab,缩进的长度优先取tab_width设置的值, 如果没有tab_width, 则取indent_size的值,如果值为 space,缩进的长度优先取indent_size的值,如果没有indent_size,则取tab_width的值

    editorconfig的通配符

    通配符 含义
    * 匹配除/之外的任意字符
    ** 匹配任意字符串
    任何单个字符,路径分隔符 ( /)除外
    [name] 匹配名称name中的任何单个字符
    [!name] 匹配名称中没有name的任何单个字符
    {s1,s2,s3} 匹配任何给定的字符串(以逗号分隔,可以嵌套)
    {num1..num2} num1和之间的任何整数num2,其中num1和num2 可以是正数或负数

    .editorconfig文件示例

    # 对所有文件有效
    [*]
    charset=utf-8
    end_of_line=lf
    insert_final_newline=false
    indent_style=space
    indent_size=4
    
    # 对后缀名为vue的文件有效
    [*.vue]
    indent_style=space
    indent_size=4
    
    # 对.analysis_options文件以及后缀名为yml和yaml文件有效
    [{.analysis_options,*.yml,*.yaml}]
    indent_style=space
    indent_size=4
    
    # 对后缀名为js,jsx,ts,tsx的文件有效,也可以写成[{*.js, *.jsx, *.ts, *.tsx}],相同的部分*.可以提出去
    [*.{js,jsx,ts,tsx}]
    indent_style = space
    indent_size = 2
    trim_trailing_whitespace = true
    insert_final_newline = true
    
    
  • 相关阅读:
    如何抓住用户痛点做产品?
    分析需求场景对产品设计的意义
    【用户分析-用户场景】这TM才是产品思维!
    WebUploader实现浏览器端大文件分块上传
    npm 安装包报错 rollbackFailedOptional
    PAT 甲级 1074 Reversing Linked List (25 分)(链表部分逆置,结合使用双端队列和栈,其实使用vector更简单呐)...
    PAT 甲级 1071 Speech Patterns (25 分)(map)
    P3370 【模板】字符串哈希
    PageRank算法原理与Python实现
    PAT-2019年冬季考试-甲级 7-4 Cartesian Tree (30分)(最小堆的中序遍历求层序遍历,递归建树bfs层序)...
  • 原文地址:https://www.cnblogs.com/wangyingblock/p/15459360.html
Copyright © 2020-2023  润新知