visual studio code简介

跨平台

这是一个轻量级的，跨平台的代码编辑器。 支持 mac / windows/ Linux

版本升级

每月更新一个版本，默认都自动更新，除非你设置了不自动更新。 -- 怎么设置 https://code.visualstudio.com/docs/supporting/faq#_how-do-i-opt-out-of-vs-code-autoupdates

可以下载Insider版本 试用最新功能。

额外扩展组件

VS code是一个编辑器首先，最小化功能。 不像其它IDE很庞大，开发人员可以根据自己的开发技术设置不同的扩展组件。

• Git 内置支持Git， 但是要单独安装GIT
• NodeJS 运行js的平台及编译环境
• TypeScript typescript的编译器， 转换typescript to javascript.

插件扩展

通过扩展市场，安装各种扩展支持许多功能。

插件支持禁用、启动、卸载、更新等等。 默认可以自动更新。

---

Workspace Recommend Extensions
可以创建插件列表分享给团队、同事。

extensions.json .vscode的目录下

{publisherName}.{extensionName}. //具体插件那边会有显示

使用

Mac 下开启visual code 方式：

• 命令行 code 需要安装code ctrl+shift+p install code in command
• spotlight visual code

快捷键大全
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

文件自动保存 文件-自动保存

查找 cmd+shift+F
选择查找文件 cmd+shift+J

代码补全: React Native Snippet

文档格式化： shift+Alt+F
选中格式化: ctrl + F

TODO:
使用extensions.json 统一安装某些扩展插件

{
"recommendations": [
"eg2.tslint",
"dbaeumer.vscode-eslint",
"msjsdiag.debugger-for-chrome"
]
}

可以统一团队的编辑风格。 -- 可以在js库创建workspace

debug

.vscode/launch.json

• 首先打开一个目录， 然后配置launch.json
  launch.json的configuration的配置属性
  必须的：
  • type debugger类型
  • request 请求类型 支持 launch/attach
  • name debug配置名称
    可选的：
  • preLaunchTask开启一个debug session之前

按F5

使用vscode调试代码

1. react-native start
2. vscode F5 attach packager , 安装 Debugger for chrome、react-native tools
3. ios simulator, debug remote JS
4. breakpoint and debug ...

工作区

{
    "folders": [
        {   
            "name": "Root",
            "path": "."
        }
    ],
    "settings": {},
    "extensions": {
        "recommendations": [
        "ms-vsts.team"
        ]
    }
}

预览markdown

编辑md文件， 然后Shift + CMD + V 可以预览内容。

ESLint

• 安装ESLint扩展
• 全局安装ESlint库 npm install ESLint -g
• 创建。eslintrc文件 使用命令行面板输入命令 create '.eslintrc.json'