4. 选择开发工具

VS Code

---

为了统一我们的开发环境，经过比较，我们选择了VS Code

image

1. 为什么选择 VS Code？

• VS Code比较轻量化
• 启动快
• 扩展多
• 内置Git版本控制

2. 下载&安装

VS Code下载页
VS Code 文档 ^[1]

3. 统一配置^[2]

统一编码习惯，统一代码格式，事半功倍

• 先安装好 Settings Sync 扩展
  

  扩展中搜索 “Setting Sync”

• 以下是我们开发组的统一配置：

[token]

af39fa3c37a44295200a6b0f71e20a6da2a2804a

[gist]

fb498011f8e94f6bd974853e5a27cbba

查看已有的gist，可以通过这个链接 gist.github.com/theBigGavin !需要科学上网!

• 执行下面操作即可下载统一的配置：

  1. 在 VSCode 中输入 Shift + Alt + D, 启动配置下载，以后随时可以用这个命令下载配置。
  2. 首次下载，会弹出两个对话框进行token和git的配置：
     1. 在弹出的对话框中需要输入 上面的token，Enter确定，保存
     2. 在弹出的对话框中需要输入上面的gist，Enter确定，保存
  3. 稍后片刻便开始同步
  4. 观察 VSCode 输出窗口，显示 Done 则同步成功

• 如下载配置提示错误：

Sync : Github Token 无效或已过期. 请重新生成. 

这个问题是因为 token，或者gist设置的不对。

1. ctrl + shift + p 调出VSCode的命令框，输入sync，选择sync：重置设置
2. 重新按照上面的设置步骤依次配置token 和 gist 即可

特别提示：配置中token和git两个对话框输入的内容千万不能一样啊！别问我为什么知道这个。 (⊙﹏⊙)b

高级功能
ctrl + shift + p 调出VSCode的命令框，输入sync，选择sync：高级选项，再选择sync：编辑本地扩展设置，会发现token在这里保存着，而不是在用户设置里面，可以手动修改，ctrl + s 保存

6. git 的一些必要配置

因为项目中使用了eslint的检查，保证代码风格一致，减少windows开发环境和Linux部署环境的差异等，我们要求文件都以Unix风格的CL换行，而不是以Windows风格CRLF风格换行，所以要关闭git的自动转换CL和CRLF的功能，不允许提交混合了CRLF和CL换行符的代码。方法如下：

# 禁止自动转换换行风格
git config --global core.autocrlf false
# 禁止提交混合使用CRLF和LF的代码
git config --global core.safecrlf true

5. 具体有哪些扩展 (此处非最新，以最新的sync 数据为准)

  auto-close-tag v0.5.6
  auto-rename-tag v0.0.15
  azure-account v0.4.3
  beautify v1.4.2
  bracket-pair-colorizer v1.0.59
  code-beautifier v2.1.0
  code-settings-sync v3.1.1
  color-the-tag-name v0.10.0
  css-auto-prefix v0.1.7
  csspreview v1.0.2
  debugger-for-chrome v4.9.0
  font-awesome-codes-css v0.1.1
  font-awesome-codes-html v0.0.7
  html-css-class-completion v1.17.1
  html-snippets v0.2.1
  html5-boilerplate v1.0.3
  htmltagwrap v0.0.7
  hyper-term-theme v0.0.7
  icon-fonts v2.1.1
  indent-rainbow v7.2.4
  JavaScriptSnippets v1.7.0
  jquerysnippets v0.0.1
  jshint v0.10.19
  jsrefactor v2.14.1
  lit-it v1.2.12
  LiveServer v5.1.1
  node-module-intellisense v1.5.0
  nodejs-extension-pack v0.1.9
  npm-intellisense v1.3.0
  path-intellisense v1.4.2
  quokka-vscode v1.0.143
  rest-client v0.19.1
  search-node-modules v1.3.0
  snippet-creator v0.0.4
  vetur v0.12.6
  vscode-cdnjs v0.14.3
  vscode-css-peek v2.1.0
  vscode-eslint v1.5.0
  vscode-faker v1.3.0
  vscode-html-css v0.2.0
  vscode-icons v7.25.0
  vscode-javascript-snippet-pack v0.1.5
  vscode-language-pack-zh-hans v1.26.3
  vscode-markdownlint v0.20.0
  vscode-npm-script v0.3.5
  vscode-regexp-preivew v0.0.3
  vscode-todo-highlight v1.0.4
  vscode-versionlens v0.21.1
  vue-snippets v0.1.8

5. 炫酷效果

• 彩色括号

  
  彩色括号

• 彩色Tag

  
  彩色Tag

• 彩虹缩进

  
  彩虹缩进

• 快速插入cdnjs脚本

  
  cdnjs

• 实时预览Html

  
  Go Live

@2018/8/31

---

1. 英文滴 ↩

2. VSCode 同步设置及扩展插件 实现设备上设置统一 ↩