更多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. 物理机安装ESXI6.7提示No Network Adapters的解决方案

    下载好ESXI6.7.iso镜像,写入U盘后,提示No Network Adapters,找不到网卡驱动. 解决办法:需要重新封装ESXI,将对应的网卡驱动嵌入进来. 1.先下载VMware-Powe ...

  2. redis系列-要命的zrangebyscore

    0x0 引子 无论做哪种业务都躲不开排行功能.Redis 的 Sorted Sets 结构就是为排行而生的.它简单易用,效率奇高.同时它也有坑,你真的了解它吗? 老规矩,先讲故事,后科普.这里是 So ...

  3. OpenLayers 6 学习笔记2 WMS服务避坑记录

    心血来潮,花1小时安装软件写代码+复习api,顺便熟悉一波wms 再次强化认知了wms获取要素的能力没有wfs强,有待考究 原文链接(转载请声明@秋意正寒  博客园/知乎/B站/csdn/小专栏):h ...

  4. cesium结合geoserver实现地图空间查询(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  5. 百度架构师带你进阶高级JAVA架构,让你快速从代码开发者成长为系统架构者

    百度架构师带你进阶高级JAVA架构,让你快速从代码开发者成长为系统架构者 1.

  6. Spring Boot 配置拦截器方式

    其实spring boot拦截器的配置方式和springMVC差不多,只有一些小的改变需要注意下就ok了.下面主要介绍两种常用的拦截器: 一.基于URL实现的拦截器: public class Log ...

  7. mutations.js文件书写规范及模板调用此文件书写方法

    1)mutations.js代码如下 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2 ...

  8. (LNMP) Nginx_PHP_MariaDB

    L用的是Centos7.5以上,主要是NMP三组件的安装记录. 通常会先安装一下依赖: yum install -y pcre-devel zlib-devel openssl-devel 使用yum ...

  9. Spring-微服务

    项目框架 功能模块介绍 Eureka:https://baike.baidu.com/item/Eureka/22402835?fr=aladdin Ribbon:https://www.jiansh ...

  10. Vue中进度条的使用

    1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...