使用Visual Studio Code开发react

  |   0 评论   |   72 浏览

背景

体验

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进行语法检查。

  1. npm安装eslint
npm install eslint
  1. visual studio code安装eslint

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

  1. 配置eslint

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

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

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

参考