My React Native skill tree lighting project EditorConfig

In a previous article in this series, React Native developer IDE Selection and Configuration¹In 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!

EditorConfig²By 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 code

1.1. Wildcard mode for file paths

. Editorconfig file paths support wildcard pattern matching, including the following six types:

1.2 Supported attributes

The following are common attribute definitions supported in the EditorConfig file, and a complete list of attributes can be viewed here⁴. It is important to note that all attributes are case insensitive.

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 code

2. 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 Plugin⁶

Installing EditorConfig from Atom is done through Atom’s package manager by executing the following command

apm install editorconfigCopy the code

The plugin currently supports the following attributes:

2.2、Sublime Text Plugin⁷

The EditorConfig plug-in can be installed in Sublime Text via Package Control, as shown below:

The plugin currently supports the following attributes:

2.3. Visual Studio Code Plugin⁸

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:

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 EditorConfig⁹

Using EditorConfig to style code indentation, etc. – WebStorm as an example¹⁰

WebStorm 9 includes EditorConfig support¹¹

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… ↩