Visual studio code
2020-08-16 本文已影响0人
王国的荣耀
babeljs cn
gulp zh quick-start
w3c typescript
npm start 和npm run build背后运行的逻辑
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
react-scripts
"start": "react-scripts build",这个命令调用了start.js
"build": "react-scripts build",这个命令调用了build.js
在starts.js中后会调用webpack.config.dev.js，会去调用一些webpack的加载规则并使用webpack创建本地server。
typescript 之父
安德斯·海尔斯伯格（Anders Hejlsberg），1960年12月出生于丹麦哥本哈根，曾在丹麦科技大学学习工程学，计算机科学家。Turbo Pascal编译器的主要作者，Delphi、C#和TypeScript之父，.NET(dotnet)创立者。
image.png
TS安装编译配置自动生成
- npm install -g typescript
- tsc --init
- 选择终端-->运行任务-->tsc:监视-tsconfig.json就可以自动生成代码
interface
//定义接口
interface Person{
name: string,
age: number, // 必选属性
job?: string, //可选属性，表示不是必须的参数，
readonly salary: number, //表示是只读的属性,但是在初始化之后不能重新赋值，否则会报错
[ propName : string ] : any, // 任意类型
}
//定义一个变量，它的类型时接口Person，这样就约束了接口的内容
let person: Person = {
name: 'jack',
age: 28,
job: 'IT dog',
id: 9872,
salary: 9999,
}
function printMan(person) {
console.log( `我是 ${person.name}, 我今年 ${person.age},我的工作是${person.job}`);
}
tsx
tsx 就是 使用 typescript 书写 jsx。
调试typescript工程配置
- tsc --init
- 配置tsc 监视
配置tsc 监视
- 安装 npm install -D ts-node
- 配置luanch.json，并修改。
"runtimeArgs": [
"-r",
"ts-node/register"
],
选择 tsc: 监视 - tsconfig.json ，回车运行之后，编辑的代码保存之后，就会自动编译。
解决typescript调试参考
Visual Studio Code 开发和调试 TypeScript
Cannot find name 'Set'.
src/index.ts(120,20): error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.
tsconfig
"target": "es5",修改为 "target": "es6"。
同步配置
安装Settings Sync 插件
Settings Sync
打开命令行面板（查看->命令行面板）： command+shift+p
上传配置
CODE SETTINGS SYNC UPLOAD SUMMARY
Version: 3.4.3
--------------------
GitHub Gist Type: Secret
Restarting Visual Studio Code may be required to apply color and file icon theme.
--------------------
Files Uploaded:
extensions.json > extensions.json
keybindings.json > keybindingsMac.json
settings.json > settings.json
tasks.json > tasks.json
Extensions Ignored:
No extensions ignored.
Extensions Removed:
Feature Disabled.
Extensions Added:
beautify v1.5.0
bootstrap-snippets-vscode v0.3.0
bootstrap-v4-snippets v1.1.3
c-cpp-compile-run v1.0.11
code-runner v0.11.0
code-settings-sync v3.4.3
code-spell-checker v1.9.0
CppSnippets v0.0.14
cpptools v0.30.0-insiders2
debugger-for-chrome v4.12.9
docker-compose v0.3.5
docker-explorer v0.1.7
es7-react-js-snippets v2.8.3
globalsymbolscope v0.0.2
go v0.16.1
gtags v0.0.2
indent-rainbow v7.4.0
java v0.65.0
JavaScriptSnippets v1.8.0
jshint v0.10.21
json v1.0.4
LiveServer v5.6.1
mssql v1.9.0
node-module-intellisense v1.5.0
nodejs-extension-pack v0.1.9
npm-intellisense v1.3.0
open-in-browser v2.0.0
path-intellisense v2.2.1
php-debug v1.13.0
php-intellisense v2.3.14
phpcs v1.0.5
prettier-vscode v5.1.3
python v2020.8.101144
react-native-react-redux v2.0.4
search-node-modules v1.3.0
sqltools v0.22.11
vetur v0.26.1
vscode-apache v1.2.0
vscode-clang v0.2.3
vscode-css-peek v4.0.0
vscode-custom-css v3.0.10
vscode-database v2.2.3
vscode-docker v1.4.1
vscode-eslint v2.1.8
vscode-exec-node v0.5.3
vscode-gutter-preview v0.26.2
vscode-html-css v0.2.3
vscode-icons v10.2.0
vscode-intelephense-client v1.5.3
vscode-java-debug v0.27.1
vscode-java-dependency v0.11.0
vscode-java-pack v0.10.0
vscode-java-test v0.24.0
vscode-language-pack-zh-hans v1.48.3
vscode-maven v0.24.0
vscode-ngrx-uml v1.0.2
vscode-npm-script v0.3.13
vscode-qt-for-python v0.4.2
vscode-react-native v0.17.0
vscode-typescript-tslint-plugin v1.2.3
vscode-yaml v0.9.1
vscodeintellicode v1.2.10
xml v2.5.1
--------------------
Done.
