Visual Studio Code是个牛逼的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Git感觉非常的适合前端开发，是微软亲生的想必TypeScript会支持的非常好。 所以我仔细研究了一下文档未来可能会作为主力工具使用。
主命令框 Command Palette
最重要的功能就是F1或Ctrl+Shift+P打开的命令面板了，在这个命令框里可以执行VSCode的任何一条命令，可以查看每条命令对应的快捷键，甚至可以关闭这个编辑器。
按一下Backspace会进入到Ctrl+P模式里
Ctrl+P 模式
在Ctrl+P下输入&又可以回到主命令框&Ctrl+Shift+P模式。
在Ctrl+P窗口下还可以
直接输入文件名，快速打开文件
?&列出当前可执行的动作
!&显示Errors或Warnings，也可以Ctrl+Shift+M
:&跳转到行数，也可以Ctrl+G直接进入
@&跳转到symbol（搜索变量或者函数），也可以Ctrl+Shift+O直接进入
@:根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入
#&根据名字查找symbol，也可以Ctrl+T
常用快捷键
编辑器与窗口管理
同时打开多个窗口（查看多个项目）
打开一个新窗口：&Ctrl+Shift+N
关闭窗口：&Ctrl+Shift+W
同时打开多个编辑器（查看多个文件）
新建文件&Ctrl+N
历史打开文件之间切换&Ctrl+Tab，Alt+Left，Alt+Right
切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名
左中右3个编辑器的快捷键Ctrl+1&Ctrl+2&Ctrl+3
3个编辑器之间循环切换 Ctrl+`
编辑器换位置，Ctrl+k然后按Left或Right
格式调整
代码行缩进Ctrl+[，&Ctrl+]
折叠打开代码块&Ctrl+Shift+[，&Ctrl+Shift+]
Ctrl+C&Ctrl+V如果不选中，默认复制或剪切一整行
代码格式化：Shift+Alt+F，或Ctrl+Shift+P后输入format
修剪空格Ctrl+Shift+X
上下移动一行：&Alt+Up&或&Alt+Down
向上向下复制一行：&Shift+Alt+Up或Shift+Alt+Down
在当前行下边插入一行Ctrl+Enter
在当前行上方插入一行Ctrl+Shift+Enter
移动到行首：Home
移动到行尾：End
移动到文件结尾：Ctrl+End
移动到文件开头：Ctrl+Home
移动到后半个括号&Ctrl+Shift+]
选中当前行Ctrl+i
选择从光标到行尾Shift+End
选择从行首到光标处Shift+Home
删除光标右侧的所有字Ctrl+Delete
Shrink/expand selection：&Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：可以连续选择多处，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down&或&Ctrl+Alt+Up
同时选中所有匹配的Ctrl+Shift+L
Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了，见下边Ctrl+Shift+K)
回退上一个光标操作Ctrl+U
跳转到定义处：F12
定义处缩略图：只看一眼而不跳转过去Alt+F12
列出所有的引用：Shift+F12
同时修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一个方法名，可以选中后按F2，输入新的名字，回车，会发现所有的文件都修改过了。
跳转到下一个Error或Warning：当有多个错误时可以按F8逐个跳转
查看diff 在explorer里选择文件右键&Set
file to compare，然后需要对比的文件上右键选择Compare
with 'file_name_you_chose'.
查找&Ctrl+F
查找替换&Ctrl+H
整个文件夹中查找&Ctrl+Shift+F
match one or more characters in a path segment
match on one character in a path segment
match any number of path segments ,including none
group conditions (e.g.&{**/*.html,**/*.txt}&matches
all html and txt files)
declare a range of characters to match (e.g.,&example.[0-9]&to
match on&example.0,example.1,
zoomIn/zoomOut：Ctrl
+ =/Ctrl
侧边栏显/隐：Ctrl+B
侧边栏4大功能显示：
Show Explorer&Ctrl+Shift+E
Show SearchCtrl+Shift+F
Show GitCtrl+Shift+G
Show DebugCtrl+Shift+D
Show OutputCtrl+Shift+U
预览markdownCtrl+Shift+V
自动保存：File -& AutoSave ，或者Ctrl+Shift+P，输入
f1后输入&theme&回车，然后上下键即可预览
自定义settings.json
settings&是全局设置，任何vs Code打开的项目都会依此配置。
默认存储在:
Windows:&%APPDATA%\Code\User\settings.json
Mac:&$HOME/Library/Application
Support/Code/User/settings.json
Linux:&$HOME/.config/Code/User/settings.json
settings&是本工作区的设置，会覆盖上边的配置
存储在工作区的.vocode文件夹下。
几乎所有设定都在settings.json里，包括
Editor Configuration - font, word wrapping, tab size, line numbers, indentation, …
Window Configuration - restore folders, zoom level, …
Files Configuration - excluded file filters, default encoding, trim trailing whitespace, …
File Explorer Configuration - encoding, WORKING FILES behavior, …
HTTP Configuration - proxy settings
Search Configuration - file exclude filters
Git Configuration - disable Git integration, auto fetch behavior
Telemetry Configuration - disable telemetry reporting, crash reporting
HTML Configuration - HTML format configuration
CSS Configuration - CSS linting configuration
JavaScript Configuration - Language specific settings
JSON Configuration - Schemas associated with certain JSON files
Markdown Preview Configuration - Add a custom CSS to the Markdown preview
Less Configuration - Control linting for Less
Sass Configuration - Control linting for Sass
TypeScript Configuration - Language specific settings
PHP Configuration - PHP linter configuration
例如可以修改让vscode认识.glsl扩展名
// Configure file associations to languages (e.g. &*.extension&: &html&). These have precedence over the default associations of the languages installed.
&files.associations&: {
&*.glsl&: &shaderlab&
修改默认快捷键
File -& Preferences -& Keyboard Shortcuts
修改keybindings.json，我的显示在这里C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
&key&: &ctrl+alt+space&,
&command&: &editor.action.triggerSuggest&,
&when&: &editorTextFocus&
&key&: &ctrl+d&,
&command&: &editor.action.deleteLines&,
&when&: &editorTextFocus&
&key&: &ctrl+shift+k&,
&command&: &editor.action.addSelectionToNextFindMatch&,
&when&: &editorFocus&
&key&:&ctrl+shift+/&,
&command&: &editor.action.blockComment&,
&when&: &editorTextFocus&
自定义代码段
然后输入语言,例如我这里输入&typescript
由于每次输入箭头函数()
=& {}太烦了，我这里加入一段加入一段
&arrow function&: {
&prefix&: &func&,
&(${e}) =& {$1}&
&description&: &arrow function&
保存后，下次输入func的时候就会自动出来箭头函数了
配置TypeScript环境
首先覆盖默认ctrl + space快捷键，因为这个快捷键被输入法切换占用了
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
{ &key&: &ctrl+alt+space&,
&command&: &editor.action.triggerSuggest&,
&when&: &editorTextFocus& }
File - Open Folder 打开项目的目录
创建&tsconfig.json
输入{}&,在大括号中间&ctrl
+ alt + space&（上边的自定义键盘）
&compilerOptions&: {
&target&: &ES5&,
&module&: &amd&,
&sourceMap&: true
可以创建.ts文件了
配置TaskRunner&Ctrl+Shift+P&输入&Configure
Task Runner
Run Task&Ctrl+Shift+B
安装typings
Install typings to bring in the .d.ts files which power javascript intellisense.
npm install typings
# Search for definitions.
typings search tape
# Find an available definition (by name).
typings search
# Install typings (DT is &ambient&, make sure to enable the flag and persist the selection in `typings.json`).
typings install react
install will create a typings folder. VS Code will reference the .d.ts files for intellisense.
新版本支持插件安装了
F1&输入&extensions
点击第一个开始安装或升级，或者也可以&Ctrl+P&输入&ext
install进入
点击第二个会列出已经安装的扩展，可以从中卸载
ext install
我在用的插件(期待更新…)
docthis 插件可以自动添加JSDoc注释。
+ p&后 输入ext
install docthis&可直接安装。
安装后连续两次&Ctrl+Alt+D&即可在光标处插入注释。
vscode-todo 显示todo列表
+ p&后 输入ext
install vscode-todo&可直接安装。
from:&https://nshen.net/article//vscode/
本文已收录于以下专栏：
相关文章推荐
孙广东   它长期以来一直是一个痛点开发统一游戏时: 不必使用 MonoDevelop 作为 IDE。原来我永远不会以为它是坏的但与 Visual Studio 在我的桌面 Wind...
Visual Studio Code C&&C++ 编译配置
工欲善其事必先利其器
Visual Studio Code 是微软出品的一款简单，美观，快速的代码编辑器，拥有丰富的扩展，通过配置，我...
官方文档介绍：网页链接下载链接：网页链接 （免费）
下面是知乎网友 马天翼  的对《如何评价
Visual Studio Code？》的分享回复，伯乐在线已征得转载许可。若再次转载，请自行征...
孙广东 
官方快捷键大全：/docs/customization/keybindings
Visual Studio Code是个牛逼的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Git感觉非常的适合前端开...
题外话第一次尝试Visual studio code是在两个月前，那时候体验了下，感受如下：优点：
多平台支持（atom ,sublime 也是三平台支持）
打开文件的速度很快，而且在大文件...
This package allows you to search for snippets from the cloud and inserts them into your code withou...
安装调试器。常用的有Debugger for Firefox和Debugger for Chrome
直接搜索安装即可打开项目，此时，是没有而配置浏览器的。选择添加配置，根据提示添加即可。
你的第一个VScode插件项目 [First VScode Extentions]
制作一个Hello World插件
简单解释package.json
用了vscode1.3...
1.创建一个github账号
2.在vscode中执行命令echo &# C-Tests& && README.md
git add README.md
git commit ...
他的最新文章
讲师：韦玮
讲师：陈守元
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)了解State、Props，学会React - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
State Props——React的关键所在
只有 State，Props，仅此而已。
React 只有 State（状态）、Props（属性），仅此而已。就是这么简单。所以说，如果你会 JS，也了解了 State（状态）和 Props（属性）。那么就可以你已经掌握了 React 大部分知识了。
在 State，Props 之前，先来看一下 React 的基础。
const element = &h1&Hello, world!&/h1&;
This funny tag syntax is neither a string nor HTML.
It is called JSX, and it is a syntax extension to JavaScript.
const element = &h1&Hello, world!&/h1&;这样的表达式就是 JSX 。它是 JavaScript 语法的延伸。
在 JSX 中，允许将 JS 代码和 HTML 标签一起使用。这样就可以使用熟悉 JS 来展开逻辑，使用熟悉的 HTML 来呈现 UI。不过这里有一点，就是一个 JSX 只能有一个根节点。所谓一个根节点，就是 HTML 最外面有且只有一个 HTML 标签。
const element = (
&h1&Hello&h1&
&/div&
&h1&world!&h1&
像这样就是错误的，因为在最外面有和 div 同级的 h1。
const element = (
&h1&Hello&h1&
&h1&world!&h1&
&/div&
改正的话，只需要将外面的 h1 移到 div里面，确保最外层只有一个 HTML 标签就好了。为什么要这样呢？因为这是 React 构建 **虚拟DOM（tree[树]）**的需要。不知道虚拟DOM是什么鬼？不知道Tree[树]？没关系，我也不知道。后面会有 React 虚拟DOM 的介绍。现在只需要记住这个规则就好了。
JSX 和 Typescript
如果使用 Typescript 来写 React，那 JSX 就相应的转变成了 TSX，其实本质还是不变的。
const element: JSX.Element = &h1&Hello, world!&/h1&;
可以看到，element后面多了个类型，叫 JSX.Element。我们看到的 React 应用 UI，都是通过 JSX.Element 映射到 HTML 上的。什么叫映射？额。。。这里可以当是呈现理解。
**什么是 Component（组件）？**对于 React 来讲（对Vue、Angular也一样），Component（组件）就是构成 React 的零件。如果把一个 React 应用比作你手中的电脑的话。那么主机、显示屏、键盘就是这个应用的组件。当然，主机这一大的组件还可以分成其它的较小的组件–CPU、主板等。主机、显示屏、键盘等其它零件有效的拼凑在一起，就形成了你手中的电脑。React 应用也一样，也通过一个或多的组件的合理组合。所以，Component 也相当于 React 应用的零件。
在 Component 的生命周期中有一个重要的方法：render。生命周期？会在下一篇中介绍。
class Welcome ponent {
render() {
return &h1&Hello, {this.props.name}&/h1&;
render 中返回的 HTML 就是该 Component 在UI上要呈现的样子。所以，编写 React Component的最终目的，就是通过逻辑，来控制 render 的返回结果。
JSX 是语法支持，Component 是理论支撑。那如何使 Component render 我们想要的 UI，那就需要涉及 Component 的两个重要概念：State、Props。
Props（属性）
属性就是一个事物的所属性质。对于不同事物，属性所代表的也有可能不一样。这里也只说 React Component 的 Props。
React 中，Component 的 Props 都是 Component 对其外部环境的变量的持有或引用。Component 所持有的 Props，并不能被其本身所改变，而相反的，若是 Component 所持有或引用的 Props 改变，那 Component 就要根据 Props 的变化，而做出相应的变化。
看一个例子（TodoApp）
class TodoApp ponent {
render() {
&TodoList items={this.state.items} /&
class TodoList ponent {
render() {
{this.props.items.map(item =& (
&li key={item.id}&{item.text}&/li&
&/ul&
在这个例子中，items 就是 TodoList 的 Props。items 的改变就会引起 TodoList 这个组件的改变。
这个例子有没有很熟悉的感觉。TodoList 是不是很像 HTML 中的自定义标签。与 HTML 标签是一样的，写法都是一样的。你会HTML，会JS，你就会 React！
在 Component中，可以通过 this.props（this.props.items）直接拿到相应的 Props。是不是比 HTML 标签还要简单。
State（状态）
React 中，State（状态）就是对 Component 自身的描述。对于 Component 来讲，Props 是外界叫它怎么样它就怎么样，Component 是对 Props 没有控制力的。而 State 不一样，Component 对 State 是有绝对控制力的。不受外界干扰，就是老子想怎么样就怎么样。
这里我们也可以看到 React 的设计哲学：影响事物发展的无非就是外因和内因，而 Props 和 State就是 Component的外因和内因。
在 Component，是这样定义 State 的
class TodoApp ponent {
constructor(props) {
this.state = {items: [], text: ''};
render() {
&h3&TODO&/h3&
&TodoList items={this.state.items} /&
&form onSubmit={this.handleSubmit}&
&input onChange={this.handleChange} value={this.state.text} /&
&button&{'Add #' + (this.state.items.length + 1)}&/button&
&/form&
&/div&
在代码中，可以看到，state是被 TodoApp Component所完全持有的。Component 可以通过改变自身的 State （setState()） 来改变 render 中逻辑。进而呈现不同UI。
State、Props 和 Typescript
使用 JS 写的 Component，Props 和 State表现的并不明显。虽然有 Flow 的解决方案。但 Typescript 的解决方案会更优雅和高效。
使用 Typescript 编写 React 组件，需要为组件定义好 Props 和 State。而这也被证明是个好的编码方式。可以帮助你构建更健壮的APP。至少是帮助了我。
interface OwnProps {
interface OwnState {
class TodoApp ponent&OwnProps, OwnState& {
render(): JSX.Element {
return &div&&/div&
这样的代码结构可以使我们快速的知道 TodoApp 这个 Component，拥有什么样的Props，和什么样的State。代码变得更加清晰和紧凑。更利于对团队开发和维护。
感觉写了一锅粥??
然而，我现在还是很会，估计我js也不会
现在的react应用层state估计都写在了redux了吧
redux 现在是 rn 项目的标配了，不过，我还是不懂它是怎么用的 ?
这个还是视具体情况使用得好
Redux管理根组件的 State，子组件的 Props
可以试试用mobx，redux不是必须的选择
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的如何学会TypeScript
今天我们来看一看TypeScipt，它是一种可以编译成JavaScipt的编程语言，是为构建大型复杂应用程序的开发者们而设计的。它继承了许多语言的编程思想，比如C#和Java，并且相对于宽松自由式的JavaScipt，它添加了更多的规则和约束。这个教程适用于相当精通JavaScipt，但刚接触TypeScipt的开发者们。本教程涵盖了大部分的基础知识和主要特性，同时包含了许多带有注释的例子，来帮助你学习这门语言。让我们开始吧！使用TypeScipt的好处JavaScipt已经很棒了，你或许会怀疑，我真的需要学习TypeScipt吗？从技术层面上来说，成为一位出色的开发者确实不需要学习TypeScipt，大多数人没有学习TypeScipt也做的很好。但是，工作中使用TypeScipt确实有许多好处：基于静态类型，用TypeScipt编辑代码有更高的预测性，更易纠错。由于模块，命名空间和强大的面向对象编程支持，使构建大型复杂应用程序的代码库更加容易。TypeScipt在编译为JavaScipt的过程中，在它到达运行时间前可以捕获所有类型的错误，并中断它们的执行。
& 果果文库所有资源均来源于互联网，仅供网友学习交流，若侵犯了您的权益，请联系我们予以删除。
2457&&人浏览
11459&&人浏览
8495&&人浏览
12055&&人浏览
3564&&人浏览
15950&&人浏览
14733&&人浏览
10675&&人浏览
10288&&人浏览
1974&&人浏览
10739&&人浏览
18681&&人浏览
15459&&人浏览
550&&人浏览
6261&&人浏览
本文标题：如何学会TypeScript 链接地址：
copyright@ 2013- Inc. All Rights Reserved 果果文库 版权所有 联系站长: ; 经营许可证编号:浙ICP备号Please enable JavaScript to view the