更多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. ZYNQ入门实例——三种GPIO应用、中断系统及软硬件交叉触发调试

    一.前言 Xlinx的ZYNQ系列SOC集成了APU.各种专用外设资源和传统的FPGA逻辑,为ARM+FPGA的应用提供助力,降低功耗和硬件设计难度的同时极大提高两者间传输的带宽.之前在研究生课题中使 ...

  2. 珠峰-webpack

    ##### webpack的优势.可以做哪里事情. ##### npx的运行原理  https://zhuanlan.zhihu.com/p/27840803 #### webpack的插件 html ...

  3. Linux运维---02.制作trove-redis镜像

    redis-3.2 镜像制作及验证 镜像制作 1.安装redis yum install redis yum install epl-release yum install python-pip gi ...

  4. IntelliJ 如何找到项目中 Deprecated 的方法

    在一个项目中,如果我们标记了某些元素为 Deprecated 的话,如何让我们能够快速找到? 简单来说,你可以对项目进行 Code Inspection. 选择 Analyze > Inspec ...

  5. pikachu-远程代码、命令执行漏洞(RCE)

    一.RCE概述 1.1 什么是RCE? RCE漏洞,可以让攻击者直接向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. 1.2 远程系统命令执行 一般出现这种漏洞,是因为应用系统从设计上需要 ...

  6. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  7. python第三方库的安装pip的使用与换源(解决pip下载速度慢)

    python和其他语言一样,也有大量的第三方库 在安装python时默认都会安装pip,安装了pip后 在cmd.exe下可以运行pip 安装库 pip install 库的名字 换源 因为PyPi地 ...

  8. viewpage+RadioButton+Fragment简单导航界面

    https://blog.csdn.net/qibanxuehua/article/details/47333879

  9. oracle快速创建用户、imp/exp导入导出dmp文件

    1.首先我们可以用管理员用户以sysdba的身份登录oracle sqlplus username/password as sysdba 2.然后我就可以来创建用户了. create user use ...

  10. Java 8 Stream Api 中的 peek 操作

    1. 前言 我在Java8 Stream API 详细使用指南[1] 中讲述了 [Java 8 Stream API]( "Java 8 Stream API") 中 map 操作 ...