/ JetBrains

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

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

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

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

项目配置

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

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

代码风格 Code Style

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

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

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

运行/调试 Run/Debug

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

只要勾选 share 选框即可 run_debug_configurations

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

启动任务 Startup Tasks

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

语言和框架 Languages & Frameworks

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

配置保存在 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_plugin

使用插件新建一个 ignore 文件 new_ignore

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

方案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 一次这个项目,观察各项配置能否正常同步。

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