editorConfig介绍

当多人共同开发一个项目的时候，往往会出现大家用不同编辑器的情况。就前端开发者来说，有人喜欢Sublime，有人喜欢Webstorm, 也有人喜欢Atom，还有人喜欢 Vim，HBuilder 等等。各种不同编程语言的开发者喜欢各种不同的编辑器。

问题来了，如何让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)？

我们来先看看，我们有一些可以部分的解决上面的问题的做法：

• 对编辑器进行设置。比如，项目中的编码规范是：代码缩进用空格；缩进两个空格。对于 sublime 来说，我们只需做如下设置：

"tab_size": 2,
"translate_tabs_to_spaces": true// 将 Tab 转化成空格

但可能出现的问题是：如果某开发者如果在同时开发两个项目，不幸的是，这两个项目的编码规范有冲突（比如，一个是缩进两个空格，另一个是缩进四个空格）怎么办？还有，如果该项目的某些编码规范编辑器设置不支持（比如，对 JS 文件要缩进两个空格；对 CSS 文件要缩进四个空格）怎么办？还有，不同编辑器设置各不相同等等。

• 每次代码提交前，使用 ESLint 之类的一系列工具对代码进行编码规范的验证。修改不符合编码规范的代码直至满足规范为止。好吧，对于编辑器的设置与编码规范有冲突的情况，程序员就不得不苦逼的改改改。

editorConfig能很好的“无痛”地解决上面问题。下面我就来介绍使用 editorConfig 来解决上面的问题。只需两步~

1. 在项目根创建一个名为 .editorconfig 的文件。该文件的内容定义该项目的编码规范。editorConfig 支持的编码规范在后文会有详细的介绍。

2. 安装与编辑器对应的 editorConfig 插件。

   其工作原理是：当你在编码时，editorConfig 插件会去查找当前编辑文件的所在文件夹或其上级文件夹中是否有 .editorconfig 文 件。如果有，则编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级高于编辑器自身的设置。
   

EditorConfig 支持的常用的编码规范，如下

• charset：文件编码。可选值
  • latin1
  • utf-8。一般用这个。
  • utf-16be
  • utf-16le
• indent_style: 缩进类型。可选值
  • space
  • tab
• indent_size: 缩进数量。可选值
  • 整数。一般设置 2 或 4。
  • tab
• insert_final_newline：是否在文件的最后插入一个空行。可选值
  • true
  • false
• end_of_line：换行符格式。说明见 Wiki：换行 可选值
  • lf。一般用这个。
  • crlf
  • cr
• trim_trailing_whitespace：是否删除行尾的空格。可选值
  • true
  • false

完整版见这里。

可见 editorConfig 能设置的编码规范不多，但也基本够用。editorConfig 和ESLint之类的编码规范验证工具一起使用是不错的选择。

最后附上我的.editorconfig文件：

# http://editorconfig.org

root = true

# 对所有文件生效
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# 对后缀名为 md 的文件生效
[*.md]
trim_trailing_whitespace = false

作者：九彩拼盘
链接：http://www.jianshu.com/p/712cea0ef70e
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在哪里存放配置文件

当打开一个文件时，EditorConfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件，直到有一个配置文件root=true。

EditorConfig配置文件从上往下读取，并且路径最近的文件最后被读取。匹配的配置属性按照属性应用在代码上，所以最接近代码文件的属性优先级最高。

Windows 用户：在资源管理器创建.editorconfig文件，可以先创建.editorconfig.文件，系统会自动重名为.editorconfig。

文件格式详情

EditorConfig文件使用INI格式（译注：请参考维基百科），目的是可以与Python ConfigParser Library兼容，但是允许在分段名（译注：原文是section names）中使用“and”。分段名是全局的文件路径，格式类似于gitignore。斜杠(/)作为路径分隔符，#或者;作为注释。注释应该单独占一行。EditorConfig文件使用UTF-8格式、CRLF或LF作为换行符。

通配符

特殊字符可以用\转义，以使其不被认为是通配符。

支持的属性

注意：不是每种插件都支持所有的属性，具体可见Wiki。

indent_style：tab为hard-tabs，space为soft-tabs。
indent_size：设置整数表示规定每级缩进的列数和soft-tabs的宽度（译注：空格数）。如果设定为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，不建议使用uft-8-bom。
trim_trailing_whitespace：设为true表示会除去换行行首的任意空白字符，false反之。
insert_final_newline：设为true表明使文件以一个空白行结尾，false反之。
root：表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件。

目前所有的属性名和属性值都是大小写不敏感的。编译时都会将其转为小写。通常，如果没有明确指定某个属性，则会使用编辑器的配置，而EditorConfig不会处理。

推荐不要指定某些EditorConfig属性。比如，tab_width不需要特别指定，除非它与indent_size不同。同样的，当indent_style设为tab时，不需要配置indent_size，这样才方便阅读者使用他们习惯的缩进格式。另外，如果某些属性并没有规范化（比如end_of_line），就最好不要设置它。

下载插件

Sublime Text

直接在Package Control里搜EditorConfig就行，在Console里可以看到生效的配置。

WebStorm

在Setting–>Plugins–>Browse JetBrains Plugins里搜索EditorConfig即可。
IntellijIDEA、PhpStorm、PyCharm等应该类似。

注：从9.X版本开始，WebStorm原生就内置了EditorConfig，不需要装任何插件。

译注：支持的编辑器/IDE很多，使用也都很简单，大家自己去官网下吧。

Projects Using EditorConfig

An incomplete list of projects that are using EditorConfig:

A11Y Project(source) -- A11Y Project : A community-driven effort to make web accessibility easier.

Amaze UI(source) -- A front-end framework from China.

AngularJS(source) -- HTML enhanced for web apps

Angular Strap(source) -- Bootstrap directives for Angular

angular-leaflet-directive-- angular directive for leaflet library.

animate.css-- (source) -- CSS animation library

async(source) -- Async utilities for node and the browser

Autofac(source) -- An addictive .NET IoC container.

Autogen(source) -- copyright + license header generator for many languages

Babel(source) -- compiler for writing next generation JavaScript

basket.js(source) -- A proof-of-concept script loader for caching/loading scripts with localStorage

Bootstrap(source) -- front-end web development framework

Bootstrap Material Design(source) -- Material design theme for Bootstrap 3

bower(source) -- front-end web package manager

Cachet(source) -- Open Source Status Page

CakePHP(source) -- The Rapid Development Framework for PHP

CanJS(source) -- CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy

chaplin(source) -- HTML5 application architecture using Backbone.js.

Chocolatey(source) -- Chocolatey NuGet - Like apt-get, but for Windows.

clipboard.js(source) -- Modern copy to clipboard

diaspora(source) -- distributed social network

discourse(source) -- community discussion platform

Django(source) -- Python web framework for perfectionists with deadlines

django-model-utils-- Django model mixins and utilities.

dokku(source) -- Docker-powered mini-Heroku

dragula(source) -- Drag and drop so simple it hurts

Drupal(source) -- Drupal is an open source content management platform powering millions of websites and applications.

ECMA262(source) -- Status, process, and documents for ECMA262

Effeckt.css(source) -- transitions and animations library

Elastic Search(source) -- Open Source, Distributed, RESTful Search Engine

Ember.js(source) -- A JavaScript framework for creating ambitious web applications

EpicEditor(source) -- EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.

ECharts(source) -- A powerful charting and visualization library for browser

Flat-UI(source) -- Design Framework (html/css3/less/js)

Foundation(source) -- Responsive front-end web development framework

FreeCodeCamp(source) -- Learn to code and help nonprofits.

free-programming-books(source) -- Freely available programming books

Front-End Developer Interview Questions(source)

gae-init(source) -- the easiest way to start new web applications on Google App Engine

Ghost(source) -- Publishing platform

Gitbook(source-- Modern book format and toolchain using Git and Markdown

gogs(source) -- Gogs (Go Git Service) is a painless self-hosted Git service

Google Web Starter Kit(source) -- boilerplate for multi-device web developmentgrunt-shell(source) -- Grunt task to run shell commands

gulp(source) -- Node.js-based streaming build system

Hacktoolkit-- Refined APIs and bootstrap code for hackathon projects and beyond.

Hover.css(source-- collection of CSS3 hover effects

html2text-- Convert HTML to Markdown-formatted text.

HTML5 Boilerplate(source) -- front-end web app template

httpie(source) -- CLI HTTP client

homebrew(source) -- The missing package manager for OS X

Ignite(source) -- React Native Generator and Starter

IncludeOS(source) -- A minimal, resource efficient unikernel for cloud services

Ionic(source) -- HTML5 mobile development framework and SDK

jade(source) -- robust, elegant, feature rich template engine for Node.js

JabbR(source) -- JabbR is a chat application built with ASP.NET using SignalR.

jQuery UI(source) -- The official jQuery user interface library

jquery-powertip-- A jQuery plugin that creates hover tooltips.

jQuery(source) -- jQuery JavaScript Library

Learn Git Branching(source) -- An interactive git visualization to challenge and educate!

LibreOffice(source) -- The free office suite

lodash(source) -- JavaScript utility library

Materialize(source) -- a CSS Framework based on Material Design

Material Design Lite(source) -- Google's Material Design Lite Components

Material UI(source) -- React Components that Implement Google's Material Design

Mockito([source])(https://github.com/mockito/mockito/blob/release/2.x/.editorconfig) -- A mocking framework for Java

Modernizr(source) -- Feature detect HTML5 and CSS3 features

Moment.js(source) -- Parse, validate, manipulate, and display dates in javascript.

MOOSE Framework(source) -- a finite-element, multiphysics framework primarily developed by Idaho National Laboratory.

Mozilla Developer Network(source) -- a learning platform for Web technologies and the software that powers the Web

Node.js(source) -- a JavaScript runtime built in V8

Octopress-- Octopress is an obsessively designed framework for Jekyll blogging.

Phabricator(source,Arcanist,libphutil) -- Open source collection of web applications which makes it easier to scale software companies (founded at Facebook).

pdf.js(source) -- PDF Reader in JavaScript

Phalcon Compose(source) -- Phalcon ready to go Docker Compose project

phaser(source) -- fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers

pm2(source) -- Production process manager for Node.js applications with a built-in load balancer

React(react) -- JavaScript user interface library

React Native(source) -- A framework for building native apps with React

Redux(source) -- Predictable state container for JavaScript apps

Roots Theme(source) -- Roots is a starting WordPress theme made for developers based on HTML5 Boilerplate & Bootstrap

roots(source) -- a toolbox for building simple, beautiful, and efficient products for the web.

roslyn(source) -- .NET compiler platform

Ruby(source) -- Ruby Programming Language

Sails(source) -- Node.js MVC framework

screenfull.js(source) -- Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

select2(source) -- jQuery-based select box replacement

SFML(source) -- SFML is a simple, fast, cross-platform and object-oriented multimedia API. It provides access to windowing, graphics, audio and network. It is written in C++, and has bindings for various languages such as C, .Net, Ruby, Python.

SilverStripe(source) -- PHP5 framework forming the base for the SilverStripe CMS (http://silverstripe.org).

SpinKit(source) -- collection of CSS3 loading animations

sweetalert(source) -- replacement for JavaScript "alert"

Symfony(source) -- The Symfony PHP framework

TodoMVC(source) -- A common learning application for popular JavaScript MV* frameworks

Typeplate(source) -- Typeplate "A Typographic Starter Kit"

TYPO3 CMS([source] (https://git.typo3.org/Packages/TYPO3.CMS.git/blob/HEAD:/.editorconfig)) -- A enterprise content management framework

video.js(source) -- open source HTML5 & Flash video player

Visual Studio Code(source) -- text editor

Vowpal Wabbit(source) -- Vowpal Wabbit is the essence of speed in machine learning, able to learn from terafeature datasets with ease.

Vuo(source) -- Vuo is a visual programming language for interactive media.

webpack(source) -- A bundler for javascript and friends

WordPress(source) -- WordPress is web software you can use to create a beautiful website or blog.

Yeoman(source) -- a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

zsh-completions(source) -- Additional completion definitions for Zsh

Zsh(source) -- Zsh is a shell designed for interactive use, although it is also a powerful scripting language.

编写插件

可以用任何一种核心库来编写EditorConfig插件。核心库以正在编辑的文件作为输入，寻找/编译相关的.editorconfig文件，并回传需要用到的属性。考虑到未来的兼容性（可以添加新的属性名和属性值），请在你的插件里忽略未识别的属性名和属性值。目前有供C、Python和Java语言使用的库。（还有一个Java和Python绑定的库，这个只是用来存档的，目前已废弃。）

如果你计划编写一个新插件，请用邮件群组通知我们，这样我们可以帮忙并添加链接。如果你计划用任意一个核心作为库或者命令行接口，C、Python或者Java库的文档可能会帮上忙。

更多信息请看WIKI。

后言

可以看到，EditorConfig目前支持的属性非常少，且只局限于基本的文件缩进、换行等格式（当然这与其定位有关），虽然并不能满足团队里代码规范统一的要求，但是其简单易上手、跨编辑器且静默生效的特点，建议在项目中使用。