更多VSCode插件使用请访问:VSCode常用插件汇总


当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范呢?

最后终于找到了editorConfig这个东东,发现在这里配置的代码规范规则优先级高于编辑器默认的代码格式化规则。如果我没有配置editorconfig,执行的就是编辑器默认的代码格式化规则;如果我已经配置了editorConfig,则按照我设置的规则来,从而忽略浏览器的设置。

EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件,这些插件是让编辑器读取配置文件并以此来格式化代码。

安装

VSCode安装非常简单,直接在插件市场搜索EditorConfig for vs code 安装就行了,安装完毕记得重启编辑器。

使用

  • 在当前项目根目录下添加.editorconfig文件
  • 安装EditorConfig扩展
  • 全局安装或局部安装editorconfig依赖包(npm install -g editorconfig | npm install -D editorconfig)
  • 打开需要格式化的文件并手动格式化代码(Mac OS :shift+option+f  Windows :shift+alt+f)

可以通过资源管理器侧栏的上下文菜单右键选择Generate .editorconfig,然后这个目录下面就会创建出一个.editorconfig文件了,当然如果团队里有已经配置好的这个文件,直接复制过来就行了。

下面说说它的常用配置和使用方法:

一、常用属性配置

1、root<boolean>  :  是否是顶级配置文件,设置为true的时候才会停止搜索.editorconfig文件

2、charset<"latin" | "utf-8" | "utf-8-bom" | "utf-16be" | "utf-16le">     :    文件编码格式

3、indent_style<"tab" | "space">    :  缩进方式

4、indent_size<number>    :    缩进大小

5、end_of_line<"lf" | "cr" | "crlf">    :    换行符类型

6、insert_final_newline<boolean>   :     是否让文件以空行结束

7、trim_trailing_whitespace<boolean>  :   是否删除行尾空格

8、max_line_length<number>    :    最大行宽。

二、常用文件名匹配

1、*                  匹配除/之外的任意字符

2、**                 匹配任意字符串

3、?                 匹配任意单个字符

4、[name]                 匹配name字符

5、[!name]                 不匹配name字符

6、[s1,s2,s3]                 匹配给定的字符串

7、[num1..num2]                 匹配num1到mun2直接的整数

目前VSCode并不是所有属性都支持,所以只需要配置下面几个属性即可:

  • indent_style
  • indent_size
  • tab_width
  • end_of_line (保存时)
  • insert_final_newline (保存时)
  • trim_trailing_whitespace (保存时)

使用建议

这个插件只能简单的配置一些规范,并不能完全满足需求,所以还需要其它代码检查工具配合使用,比如说:ESLint或StyleLint,统一代码风格。

.editorconfig

# EditorConfig helps developers define and maintain consistent
# EditorConfig帮助开发人员定义和维护一致性
# coding styles between different editors and IDEs
# 不同编辑器和ide之间的编码样式
# 打开需要格式化的文件并手动格式化代码(Mac OS :shift+option+f  Windows :shift+alt+f)
# editorconfig.org

# editorconfig顶级配置文件,停止向上寻找配置文件
root = true [*]
# change these settings to your own preference
# 将这些设置更改为您自己的首选项
# 缩进样式=空格
indent_style = space
# 缩进大小=
indent_size = # we recommend you to keep these unchanged
# 我们建议你保持这些不变
# 换行符类型 = lf
end_of_line = lf
# 字符集=utf-
charset = utf-
# 删除行尾空格 = 是
trim_trailing_whitespace = true
# 插入最后一行=真
insert_final_newline = true [*.md]
# 删除行尾空格 = 否
trim_trailing_whitespace = false [package.json]
# 缩进样式=空格
indent_style = space
# 缩进大小=
indent_size =

VSCode常用插件之EditorConfig for vs code 使用的更多相关文章

  1. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  2. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...

  3. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  4. VsCode 常用插件清单

    插件离线安装说明 在一些内网开发环境中,无法做到在线安装,这个时候就需要对插件进行离线安装 了 打开 VSCode 插件市场网址 Extensions for the Visual Studio fa ...

  5. VSCode常用插件之Simple New File使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...

  6. VSCode常用插件之open in browser使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习

  7. VSCode常用插件之vscode-fileheader使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-fileheader这是一个给js文件(html.css也可以使用,但是没意义!!!)生成头部注释的插件,每次修改js文件之后会 ...

  8. 前端开发VScode常用插件

    名称 功能 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript 自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标 ...

  9. 前端vscode常用插件

    Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...

随机推荐

  1. webpack--介绍、安装及入门

    最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <scr ...

  2. linux中find文件搜索命令

    find 解释 命令名称:find 命令所在路径:/bin/find 执行权限:所有用户 功能描述:文件搜索 语法 find [搜索范围] [匹配条件] 匹配条件: -name 文件名(区分大小写) ...

  3. C#设计模式学习笔记:(18)状态模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/8032683.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第六个模式--状 ...

  4. 正则表达式验证IP地址(绝对正确)

    正则验证合法_有效的IP地址(ipv4/ipv6) 不墨迹直接上代码: 正则表达式: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[ ...

  5. 常量, char[], const char[], char*, const char*, char* const以及const char* const的详解

    注意,这里用char类型只是举了一个例子,其他的int之类的也通用. 1: 常量: 例子: char str[] = "Hello world!"; char ch = 'a'; ...

  6. JSP其余内置对象及四大范围对象的使用

    一.application String getContextPath():获取虚拟路径String getRealPath():获取虚拟路径对应的绝对路径 实例 application.jsp &l ...

  7. Percona Xtrabackup 备份工具

    生成备份 $ xtrabackup --backup --target-dir=/data/backups/ 注:--target-dir可以放在my.cnf配置文件中.如果指定的目录不存在,xtra ...

  8. jQuery---$冲突的解决方案

    $冲突的解决方案 遇到其他js文件也用$包装了函数.可以把jQuery放在后面,并释放下$的控制权,也可以换个字符替代原来的$,例如$$ 或者,jQuery //jQuery释放$的控制权 $$ = ...

  9. jQuery---五角星评分案例

    五角星评分案例 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心.当前位置后面的是空心.注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星.额外,找 ...

  10. webserver代理生成本地类的两种方式

    方式1,把webservers地址请求出来的xml拷贝出来放到文本里面后缀改成wsdl文件在VS里面使用下列命令 C:\Program Files (x86)\Microsoft SDKs\Windo ...