使用Visual Studio Code开发react

2020-01-31 | 0 评论 | 0 浏览

背景

体验

Visual Studio Code安装

Visual Studio Code

最新版本为 1.41.1

版本: 1.41.1
提交: 26076a4de974ead31f97692a0d32f90d735645c0
日期: 2019-12-18T14:57:51.166Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.2.0

设置环境变量

对于 zsh，编辑 ~/.zshrc，增加：

code () { VSCODE_CWD="$PWD"  open -n -b "com.microsoft.VSCode" --args $* ;}

创建react项目

见 g2-react 初体验

简单来讲，就是：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

在Visual Studio Code中打开react项目

cd my-app
code .

Markdown预览

打开 README.md文件：

在新窗口中预览：Markdown: Open Preview ⇧⌘V
在侧面窗口中预览：Markdown: Open Preview to the Side ⌘K V

语法高亮和括号匹配

打开 src/index.js 文件，默认已经支持。

智能提示

默认支持

定义

转到定义：Go to Definition (F12)
查看定义：Peek Definition (⌥F12)

点 Escape来关闭查看定义窗口。

编写 Hello World

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './index.css';

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();

在保存了之后，运行的服务会自动更新，然后在浏览器中会自动看到最新的 Hello World!。

调试 React

在Chrome中调试React代码。

安装Debugger for Chrome扩展

在Visual Studio Code中安装 Debugger for Chrome扩展。

设置断点

在 src/index.js 中的第7行设置断点：

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

设置Debug

打开Debug视图 (⇧⌘D)，点调试，来自动生成 launch.json 文件。在环境选择中，选择 Chrome。然后修改文件中的 url 端口从8080改为3000，如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

开始调试

在Visual Studio Code中，按F5或者绿色箭头，来启动调试。

如果使用了 [webpack](https://webpack.js.org/)，可以利用webpack的HMR特点，来更方便的调试。

语法检查

使用eslint进行语法检查。

npm安装eslint

npm install eslint

visual studio code安装eslint

在扩展中，安装eslint。然后重启visual studio code。

配置eslint

在Command Palette (⇧⌘P)中，输入eslint，选择 Create ESLint configuration。

最后会生成 .eslintrc.json文件。

这时，在Visual Studio Code下方的问题窗口中，会有检查结果提示。

水星的随笔