用WebStorm在团队中共享前端项目配置

众所周知，在团队中统一代码风格是一件很重要但实践起来却非常困难的事情。在过去，我们为了实现整个项目代码风格的一致，需要制定一套冗长的规范，要求团队每个成员阅读并按照规范来编写代码，这使得每个新成员需要一个很长的学习周期才能比较好的融入团队。同时，对新成员而言，一个陌生项目的初始化和各项环境配置也是一件非常麻烦的事情，需要较高的学习成本。

为了解决这些问题，很多工具应孕而生，例如：jslint、eslint、stylelint、editorconfig…… 但由此带来的另外一个问题就是，这些东西本身也是有学习成本的。虽然新成员不再需要再阅读冗长的规范文档了，他们仍然需要学习这些工具的配置和使用。那么有没有一种办法，可以让新成员无需学习这一切，直接上手新项目呢？

有，而且非常简单！用我们所熟悉的 WebStorm 就可以轻松实现。当然其他 JetBrains IDE 也是一样的，这里介绍的方法同样适用于：IntelliJ IDEA、RubyMine、PhpStorm、AppCode、PyCharm、CLion 和 Android Studio。

项目配置

WebStorm 项目配置由一系列的 xml 文件组成，位于项目根目录下的 .idea/ 目录。 在 WebStorm 中，许多设置项都是能够只对特定项目生效的。当你在设置界面上看到这行小字的时候 这就代表你在这个界面上的做的所有设置都只对当前项目生效，并且会以 xml 文件的形式存储到 .idea/ 目录中。这意味着，如果合理利用的话，我们就能够在团队成员间通过版本控制系统来共享这些配置。新人接手项目时，无需关心此项目原先的代码风格，只需一个快捷键便可将代码整理成统一的风格。新人只需几分钟便可完成整个开发环境的搭建。

对我们而言，以下是比较重要的一些配置：

代码风格 Code Style

首先，创建一套自己的代码风格配置，大部分人都有自己的一套风格配置了。如果没有的话，WebStorm 除了默认方案之外，还有两套预设可供选择

接下来，将 Code Style 的 schema 设置为 Project

点击 OK，然后 BOOM!!! 配置文件出现了 .idea/codeStyleSettings.xml

运行/调试 Run/Debug

没错，这个功能的配置也是可以共享的

只要勾选 share 选框即可

点击 OK，相应的配置文件已经安静的躺在 .idea/runConfigurations 目录中了

启动任务 Startup Tasks

同样是一个 share 选框，在这里可以找到
配置文件为 .idea/startup.xml

语言和框架 Languages & Frameworks

选择当前项目所使用的 ECMAScript 版本

配置保存在 misc.xml 中。

文件监视 File Watchers

这个无需额外配置，所有的 File Watcher 都会自动被添加到 .idea/watcherTasks.xml 当中。

比较常用的就上面这些了，其他的大家可以自行摸索。

添加 .gitignore 文件

相信不少人刚接触 WebStorm 的时候，都有过将 .idea/ 目录下的文件提交到 git 上，导致 WebStorm 错乱而痛不欲生的经历。为了避免这种问题的发生，不少人都粗暴地将整个 .idea/ 目录忽略掉了。

一开始我也很纳闷，为什么 WebStorm 要将整个项目的所有配置放在项目根目录下，让大家一个不小心就提交上去出错呢？直到有一天，我通过 ignore 插件生成了一份针对 WebStorm 的 .gitignore 文件，我发现插件生成的规则，并不是简单的将整个 .idea/ 目录排除在外，而是有针对性的排除掉了一些用户私有配置文件，而保留了所有可以提交到 git 上但又不会导致 bug 的配置文件。我恍然大悟，原来 .idea/ 目录下这些文件，就是用来让你在团队成员间共享的！只不过前提是你需要搞清楚，哪些文件可以提交，哪些不可以。

只要有一份合理的 .gitignore 文件，.idea/ 目录中的文件也是可以提交的！而由于有 ignore 插件的辅助，这一切也非常简单。

方案1 使用 ignore 插件生成配置

安装 ignore 插件

使用插件新建一个 ignore 文件

创建时会让你选择模板，搜索并勾选 JetBrains 模板，点 Generate

方案2 使用 gitignore.io 生成配置

打开 gitignore.io。

输入 JetBrains 点击创建，获得配置文件。

方案3 复制这份配置

# Created by .ignore support plugin (hsz.mobi)
### JetBrains template
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff:
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/dictionaries

# Sensitive or high-churn files:
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.xml
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml

# Gradle:
.idea/**/gradle.xml
.idea/**/libraries

# CMake
cmake-build-debug/

# Mongo Explorer plugin:
.idea/**/mongoSettings.xml

## File-based project format:
*.iws

## Plugin-specific files:

# IntelliJ
out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Cursive Clojure plugin
.idea/replstate.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties

提交配置文件

最后一步，只要将上述 .gitignore 文件以及 .idea 目录下没有被忽略掉的文件提交到 git 上就行了。

验收一下成果，重新 git clone 一次这个项目，观察各项配置能否正常同步。

完成之后，去泡杯茶，或者咖啡休息一下吧。