This article due to potential commercial purposes, not open full text reprint permission, thank you!
In a previous article in this series, React Native developer IDE Selection and Configuration1In React Native, we introduced five ides that might be used in React Native development, and how to configure them to display smart reminders of React Native syntax and implementation code properly. In actual project development, there is much more to the IDE or project configuration than described above, especially in team development, there are many common configuration needs to be formulated, among which the code style unification tool EditorConfig and static code checking tool ESLint are essential. Due to space constraints, this article will cover EditorConfig first, and a later article will be devoted to ESLint.
In the end, we suggested keeping the IDE uniform for team development, but the ideal was full, and the reality was that the editors or IDES that team members were familiar with were never the same, so there was no need to restrict the use of a uniform IDE. So how do you solve the problem of inconsistent code styles that might result from using different editors or ides? For example, the number of indentation and the space at the end of the line varies from IDE to IDE. This is where EditorConfig comes in!
EditorConfig2By adding a configuration file to the project and installing plug-ins to keep the coding format consistent across editors and ides, EditorConfig’s configuration files are readable and work well with the version control system.
When we open a file in an editor or IDE, the EditorConfig plug-in will start in the file’s directory and work its way up to.editorConfig until it reaches the root directory or finds an.EditorConfig file with the root=true attribute. When all of the.EditorConfig configuration files that meet the criteria are found, the plugin reads the contents of these configuration files. The properties in the configuration file with the shortest path to the file have the highest priority. The same file is read from top to bottom, and the properties with the same name defined at the bottom have higher priority than those defined at the top.
Note that Windows users create a configuration file named.EditorConfig. The explorer will then automatically rename it to.EditorConfig.
1. EditorConfig configuration file
EditorConfig’s configuration file is named.EditorConfig. EditorConfig follows the INI3 format and has some extensions and customizations, such as wildcard pattern matching and custom attribute recognition. Section names represent file paths. The [and] characters are allowed. The file must be UTF-8 encoded and use CRLF or LF as a newline character.
Let’s first take a look at the examples provided on the official website to get an intuitive understanding of the wildcard pattern and the supported attribute definitions.
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8
# 4 space indentation
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified)
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2Copy the code1.1. Wildcard mode for file paths
. Editorconfig file paths support wildcard pattern matching, including the following six types:
| The wildcard | meaning |
|---|---|
| * | Match in addition to/Any string other than the path separator |
| ** | Matching any string |
| ? | Matches any single character |
| [name] | matchingnameRepresents any single character in the range |
| [!name] | matchingnameRepresents any single character outside the scope of |
| {s1,s2,s3} | Matches the given string |
1.2 Supported attributes
The following are common attribute definitions supported in the EditorConfig file, and a complete list of attributes can be viewed here4. It is important to note that all attributes are case insensitive.
| The property name | meaning |
|---|---|
| root | Special attributes, which can only be used in the header of the file, should not be included in any sections.trueRepresents the topmost configuration file, which will cause the plug-in to stop searching.editorconfigfile |
| indent_style | Indent style, can betab 和 space |
| indent_size | The size of the indent, i.e. the number of columns indented, when indexStyle valuestabWhen the indentSize will use the value of tab_width |
| tab_width | Sets the number of columns TAB represents. The default value is indent_size |
| endofline | Newline character to use. The value islf.crorcrlf |
| charset | Character code. The value islatin1.utf-8.utf-8-bom.utf-16be 和 utf-16leAnd, of course,utf-8-bomNot recommended |
| trimtrailingwhitespace | If set totrueRepresents the removal of any whitespace at the beginning of the newline,falseMeans not to remove |
| insertfinalnewline | If set totrueThe file ends with a blank line when saving the file,falseIs guaranteed not to end with blank lines |
Finally, let’s take a look at the contents of the.EditorConfig file of the famous Redux5 framework to get a feel for it:
# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = falseCopy the code2. EditorConfig plugin
At present, the mainstream editor or IDE basically has the corresponding EditorConfig plug-in, some built-in support, some need to be installed independently. It is important to note that the EditorConfig attribute is supported differently by different plug-ins, which will be noted later in the details of each IDE plug-in. The EditorConfig plugin is already built into the editor or IDE as shown below, so it is not necessary to install and configure EditorConfig independently. As you can see, WebStorm does not need to install EditorConfig independently.
EditorConfig support is not currently built into the editor or IDE as shown below, so to use EditorConfig’s capabilities you need to download the plug-in first. For Atom, Sublime Text 3, and Visual Studio Code, Deco does not have built-in support for EditorConfig, but there are no plug-ins available. Deco does not support the use of EditorConfig. It is, after all, a newborn.
2.1, the Atom Plugin6
Installing EditorConfig from Atom is done through Atom’s package manager by executing the following command
apm install editorconfigCopy the codeThe plugin currently supports the following attributes:
| The property name | Additional instructions |
|---|---|
| root | |
| indent_style | |
| indent_size | |
| endofline | supportlf 和 crlfThe two values |
| charset | supportlatin1.utf-8.utf-16be 和 utf-16leThe four values |
2.2、Sublime Text Plugin7
The EditorConfig plug-in can be installed in Sublime Text via Package Control, as shown below:
The plugin currently supports the following attributes:
| The property name | Additional instructions |
|---|---|
| root | |
| indent_style | |
| indent_size | |
| endofline | |
| charset | |
| trimtrailingwhitespace | |
| insertfinalnewline |
2.3. Visual Studio Code Plugin8
Open VS Code Quick Open (⌘+P on Mac) and type ext Install EditorConfig to find the EditorConfig plug-in as shown below. Restart after installation.
The plugin currently supports the following attributes:
| The property name | Additional instructions |
|---|---|
| indent_style | |
| indent_size | |
| tab_width | |
| trimtrailingwhitespace | |
| insertfinalnewline |
3, summarize
The purpose of EditorConfig is to keep the code file coding style consistent across different editors or ides, and it requires both configuration files and plug-ins. As you can see from the above analysis, the EditorConfig plugin on the IDE has different support for properties, and only two properties are supported:
At a minimum, the code should be indent the same across all editors or IDES.
4. Read more
Configure your Editor with EditorConfig9
Using EditorConfig to style code indentation, etc. – WebStorm as an example10
WebStorm 9 includes EditorConfig support11
Welcome to follow my wechat official account and focus on original or share high-quality articles in the field of Android, iOS, ReactNative and Web front-end mobile development, mainly including the latest trends in the industry, cutting-edge technology trends, open source function libraries and tools, etc.
[1] www.jianshu.com/p/8e9df5f85… ↩ [2] editorconfig.org/ ↩ [3] en.wikipedia.org/wiki/INI_fi… ↩ [4] github.com/editorconfi… ↩ [5] github.com/reactjs/red… ↩ [6] github.com/sindresorhu… ↩ [7] github.com/sindresorhu… ↩ [8] marketplace.visualstudio.com/items?itemN… ↩ [9] www.cnblogs.com/xiyangbaixu… ↩ [10] blog.csdn.net/gextreme/ar… ↩ [11] csspod.com/editorconfi… ↩