[TOC] ## 简介 由于不同操作系统回车出现的 `\r` 对 shell 的影响,所以在开始编码前我们先使用 [editorconfig](https://editorconfig.org/) 来规范代码风格。 ## 插件安装 首先,如官方文档所说以下编辑器不需要安装插件,只需要配置 `.editorconfig` ![No Plugin](http://tbs.zhanghong.info/images/chapters/02/060_no_plugin.png) 以下编辑器需要安装插件和配置 `.editorconfig` 文件 ![Has Plugin](http://tbs.zhanghong.info/images/chapters/02/060_has_plugin.png) 下面我们介绍一下在编辑器 Sublime Text 3 和 PhpStrom 里如何安装 `EditorConfig` 插件,如果你使用的是其它需要安装插件的编辑器话,请自行 Google 所使用编辑器如何安装 `EditorConfig` 插件。 ### Sublime Text 3 安装插件 1. 安装 Package Control Package Control 是 Sublime Text 编辑器的插件管理包,所以我们首先要安装它。有了它之后,我们就可以很方便的浏览、安装和卸载 Sublime Text 中的插件。**如果你已经安装了 Package Control 请从本小节的第 2 步开始安装插件。** 打开 Package Control 的网页 [https://packagecontrol.io/](https://packagecontrol.io/) ,点击右侧的 `Install Now` 按钮。 ![Install Now](http://tbs.zhanghong.info/images/chapters/02/060_sb_1.png) 进入 [https://packagecontrol.io/installation#st3](https://packagecontrol.io/installation#st3) 页面,选择 `SUBLIME TEXT 3` 选项卡,复制出里面的代码段: ![S3 Code](http://tbs.zhanghong.info/images/chapters/02/060_sb_2.png) 代码复制如下: ```shell import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) ``` 快捷键 `Ctrl+~` 或者 `Ctrl+Shift+p` 打开 Sublime Text 3 控制台,将之前复制的代码粘贴到控制台里,按下 `Eenter` 键。 等待其安装完成后关闭程序,重新启动 Sublime Text 3 ,点开菜单 `Preferences(首选项)`可见 `Package Control` 项,说明插件管理包已安装成功。 2. 快捷键 `Ctrl+Shift+p` ,打开 `Command Palette` 悬浮对话框,在顶部输入 `Install`, 然后下选点击 `Package Control:Install Package` 。 ![Install Control](http://tbs.zhanghong.info/images/chapters/02/060_sb_3.png) 3. 在出现的悬浮对话框中输入 `Editor`, 然后点选下面的 `EditorConfig` 插件,就会自动开始安装,请耐心等待。 ![Install Package](http://tbs.zhanghong.info/images/chapters/02/060_sb_4.png) 4. 安装完后重新启动 Sublime Text 3 。 ### PhpStorm 安装插件 1. 打开设置面板 ![Config Panle](http://tbs.zhanghong.info/images/chapters/02/060_ps_1.png) 2. 打开插件页面 ![Plugin Window](http://tbs.zhanghong.info/images/chapters/02/060_ps_2.png) 3. 在插件面板里搜索 `EditorConfig` 插件并完成安装 ![Install Plugin](http://tbs.zhanghong.info/images/chapters/02/060_ps_3.png) ## 插件配置 在项目根目录创建 `.editorconfig` 文件: ```shel $ touch .editorconfig ``` 新创建的 `.editorconfig` 文件配置信息如下: ``` root = true [*] charset = utf-8 end_of_line = lf insert_final_newline = true indent_style = space indent_size = 4 trim_trailing_whitespace = true [*.md] trim_trailing_whitespace = false [*.yml] indent_size = 2 [*.{js,html,css}] indent_size = 2 ``` 在这里,我们简单介绍一下以上设置的意义,想了解更多 `.editorconfig` 设置参数介绍请阅读 [editorConfig编辑器配置](https://www.jianshu.com/p/00ac7bd5e74e) : 1. 所有文件的代码缩进方式是『空格』,给所有文件结尾添加一个空行; 2. 除 `md` 文件外其它格式文件保存时自动删除行尾空格; 3. `js`、`css` 和 `html` 文件按 **2** 个空格缩进代码,其它格式文件按 **4** 个空格缩进代码。 ## 提交代码 接下来,把代码纳入到版本管理: ```shell $ git add -A $ git commit '统一代码风格' ```